"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { Search, Plus, X } from "lucide-react"

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { Check } from "lucide-react"
import { Separator } from "@/components/ui/separator"

interface Contact {
  firstName: string
  lastName: string
  phone: string
  email: string
  countryCode: string
  isPrimary: boolean
}

interface CPContactFormData {
  cpCompany: string
  contacts: Contact[]
}

interface AddCPContactSheetProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSubmit: (data: CPContactFormData) => void
  cpCompany?: string // Optional: If provided, hides company selector
  cpCompanyName?: string // Optional: Display name of the company
}

// Mock CP companies data
const cpCompanies = [
  { value: "urbanvest", label: "UrbanVest Realty" },
  { value: "primeprop", label: "PrimeProp Solutions" },
  { value: "estatepro", label: "EstatePro Partners" },
  { value: "realtyhub", label: "RealtyHub India" },
  { value: "propconnect", label: "PropConnect Services" },
]

export function AddCPContactSheet({ open, onOpenChange, onSubmit, cpCompany, cpCompanyName }: AddCPContactSheetProps) {
  const { handleSubmit, setValue, watch, reset } = useForm<CPContactFormData>({
    defaultValues: {
      cpCompany: cpCompany || "",
      contacts: []
    }
  })

  const [openCompanySelect, setOpenCompanySelect] = useState(false)
  const selectedCompany = watch("cpCompany")

  const [contacts, setContacts] = useState<Contact[]>([{
    firstName: "",
    lastName: "",
    phone: "",
    email: "",
    countryCode: "+91",
    isPrimary: true
  }])

  const addContact = () => {
    setContacts([...contacts, {
      firstName: "",
      lastName: "",
      phone: "",
      email: "",
      countryCode: "+91",
      isPrimary: false
    }])
  }

  const removeContact = (index: number) => {
    if (contacts.length > 1) {
      setContacts(contacts.filter((_, i) => i !== index))
    }
  }

  const updateContact = (index: number, field: keyof Contact, value: string | boolean) => {
    const updated = [...contacts]
    if (field === 'isPrimary' && value === true) {
      // If setting this contact as primary, unset all others
      updated.forEach((contact, i) => {
        contact.isPrimary = i === index
      })
    } else {
      updated[index][field] = value as any
    }
    setContacts(updated)
  }

  const onFormSubmit = (data: CPContactFormData) => {
    const formData = {
      cpCompany: data.cpCompany,
      contacts
    }
    onSubmit(formData)
    handleClose()
  }

  const handleClose = () => {
    onOpenChange(false)
    reset()
    setContacts([{
      firstName: "",
      lastName: "",
      phone: "",
      email: "",
      countryCode: "+91",
      isPrimary: true
    }])
  }

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="sm:max-w-[600px] flex flex-col p-0">
        <SheetHeader className="px-6 py-4 border-b sticky top-0 bg-background z-10">
          <SheetTitle>Add Channel Partner Contact</SheetTitle>
          <SheetDescription>
            Add new contact(s) to an existing channel partner firm.
          </SheetDescription>
        </SheetHeader>

        <div className="flex-1 overflow-y-auto px-6 py-6">
          <form id="cp-contact-form" onSubmit={handleSubmit(onFormSubmit)} className="space-y-6">
            {/* CP Company Selection with Search - Only show if cpCompany not provided */}
            {!cpCompany && (
              <>
                <div className="space-y-2">
                  <Label htmlFor="cpCompany">CP Company *</Label>
                  <Popover open={openCompanySelect} onOpenChange={setOpenCompanySelect}>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        role="combobox"
                        aria-expanded={openCompanySelect}
                        className="w-full justify-between"
                      >
                        {selectedCompany
                          ? cpCompanies.find((company) => company.value === selectedCompany)?.label
                          : "Select CP company..."}
                        <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-[500px] p-0">
                      <Command>
                        <CommandInput placeholder="Search company..." />
                        <CommandList>
                          <CommandEmpty>No company found.</CommandEmpty>
                          <CommandGroup>
                            {cpCompanies.map((company) => (
                              <CommandItem
                                key={company.value}
                                value={company.value}
                                onSelect={(currentValue) => {
                                  setValue("cpCompany", currentValue)
                                  setOpenCompanySelect(false)
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    selectedCompany === company.value ? "opacity-100" : "opacity-0"
                                  )}
                                />
                                {company.label}
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                </div>

                <Separator />
              </>
            )}

            {/* Contacts */}
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-semibold">Contact Details</h3>
                <Button type="button" variant="outline" size="sm" onClick={addContact}>
                  <Plus className="h-4 w-4 mr-1" />
                  Add Contact
                </Button>
              </div>

              {contacts.map((contact, index) => (
                <div key={index} className="space-y-4 p-4 border rounded-lg relative">
                  {contacts.length > 1 && (
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="absolute top-2 right-2 h-6 w-6"
                      onClick={() => removeContact(index)}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  )}

                  <div className="flex items-center space-x-2 mb-2">
                    <Checkbox
                      id={`primary-${index}`}
                      checked={contact.isPrimary}
                      onCheckedChange={(checked) => updateContact(index, "isPrimary", checked as boolean)}
                    />
                    <Label
                      htmlFor={`primary-${index}`}
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Set as Primary Contact
                    </Label>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>First Name *</Label>
                      <Input
                        value={contact.firstName}
                        onChange={(e) => updateContact(index, "firstName", e.target.value)}
                        placeholder="First name"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Last Name *</Label>
                      <Input
                        value={contact.lastName}
                        onChange={(e) => updateContact(index, "lastName", e.target.value)}
                        placeholder="Last name"
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Phone Number *</Label>
                    <div className="flex gap-2">
                      <Select
                        value={contact.countryCode}
                        onValueChange={(value) => updateContact(index, "countryCode", value)}
                      >
                        <SelectTrigger className="w-[100px]">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="+91">+91</SelectItem>
                          <SelectItem value="+1">+1</SelectItem>
                          <SelectItem value="+44">+44</SelectItem>
                          <SelectItem value="+61">+61</SelectItem>
                        </SelectContent>
                      </Select>
                      <Input
                        value={contact.phone}
                        onChange={(e) => updateContact(index, "phone", e.target.value)}
                        placeholder="Phone number"
                        className="flex-1"
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Email *</Label>
                    <Input
                      type="email"
                      value={contact.email}
                      onChange={(e) => updateContact(index, "email", e.target.value)}
                      placeholder="email@example.com"
                    />
                  </div>
                </div>
              ))}
            </div>
          </form>
        </div>

        <div className="px-6 py-4 border-t sticky bottom-0 bg-background flex justify-end gap-2">
          <Button type="button" variant="outline" onClick={handleClose}>
            Cancel
          </Button>
          <Button type="submit" form="cp-contact-form">
            Add Contact{contacts.length > 1 ? 's' : ''}
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  )
}