"use client"

import { useEffect } from "react"
import { useForm } from "react-hook-form"

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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

interface CPFirmEditData {
  id: string
  companyName: string
  website: string
  address: string
  city: string
  state: string
  country: string
  baseCommissionRate: string
  notes: string
}

interface EditCPFirmSheetProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSubmit: (data: CPFirmEditData) => void
  initialData: CPFirmEditData | null
}

const states = [
  "Andhra Pradesh", "Arunachal Pradesh", "Assam", "Bihar", "Chhattisgarh",
  "Goa", "Gujarat", "Haryana", "Himachal Pradesh", "Jharkhand", "Karnataka",
  "Kerala", "Madhya Pradesh", "Maharashtra", "Manipur", "Meghalaya", "Mizoram",
  "Nagaland", "Odisha", "Punjab", "Rajasthan", "Sikkim", "Tamil Nadu",
  "Telangana", "Tripura", "Uttar Pradesh", "Uttarakhand", "West Bengal"
]

const countries = ["India", "United States", "United Kingdom", "Canada", "Australia"]

const cities = ["Mumbai", "Delhi", "Bangalore", "Hyderabad", "Chennai", "Kolkata", "Pune", "Ahmedabad"]

export function EditCPFirmSheet({ open, onOpenChange, onSubmit, initialData }: EditCPFirmSheetProps) {
  const { register, handleSubmit, formState: { errors }, reset, setValue, watch } = useForm<CPFirmEditData>({
    defaultValues: {
      companyName: "",
      website: "",
      address: "",
      city: "",
      state: "",
      country: "India",
      baseCommissionRate: "",
      notes: "",
    }
  })

  // Prepopulate form when initialData changes
  useEffect(() => {
    if (initialData) {
      reset(initialData)
    }
  }, [initialData, reset])

  const onFormSubmit = (data: CPFirmEditData) => {
    onSubmit(data)
    onOpenChange(false)
  }

  const handleClose = () => {
    onOpenChange(false)
  }

  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>Edit Channel Partner Company</SheetTitle>
          <SheetDescription>
            Update the company information for this channel partner.
          </SheetDescription>
        </SheetHeader>

        <div className="flex-1 overflow-y-auto px-6 py-6">
          <form id="edit-cp-firm-form" onSubmit={handleSubmit(onFormSubmit)} className="space-y-6">
            {/* Company Information */}
            <div className="space-y-4">
              <h3 className="text-sm font-semibold">Company Information</h3>
              
              <div className="space-y-2">
                <Label htmlFor="companyName">CP Company Name *</Label>
                <Input
                  id="companyName"
                  {...register("companyName", { required: "Company name is required" })}
                  placeholder="Enter company name"
                />
                {errors.companyName && (
                  <p className="text-sm text-destructive">{errors.companyName.message}</p>
                )}
              </div>

              <div className="space-y-2">
                <Label htmlFor="baseCommissionRate">Base Commission Rate</Label>
                <Input
                  id="baseCommissionRate"
                  {...register("baseCommissionRate")}
                  placeholder="e.g., 2.5%"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="address">Address</Label>
                <Input
                  id="address"
                  {...register("address")}
                  placeholder="Enter address"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="city">City</Label>
                <Select 
                  value={watch("city")} 
                  onValueChange={(value) => setValue("city", value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select city" />
                  </SelectTrigger>
                  <SelectContent>
                    {cities.map((city) => (
                      <SelectItem key={city} value={city}>
                        {city}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="state">State</Label>
                  <Select 
                    value={watch("state")} 
                    onValueChange={(value) => setValue("state", value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select state" />
                    </SelectTrigger>
                    <SelectContent>
                      {states.map((state) => (
                        <SelectItem key={state} value={state}>
                          {state}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="country">Country</Label>
                  <Select 
                    value={watch("country")} 
                    onValueChange={(value) => setValue("country", value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select country" />
                    </SelectTrigger>
                    <SelectContent>
                      {countries.map((country) => (
                        <SelectItem key={country} value={country}>
                          {country}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </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="edit-cp-firm-form">
            Update CP Company
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  )
}