"use client";

import { useEffect } from "react";

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

import { Badge } from "@/components/ui/badge";
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";
import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { Textarea } from "@/components/ui/textarea";
import { type Client, staffMembers } from "@/data/clients";

interface ClientSheetProps {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  client: Client | null;
}

export function ClientSheet({ open, onOpenChange, client }: ClientSheetProps) {
  const { register, reset, setValue, watch } = useForm<Partial<Client>>({
    defaultValues: client ?? {
      type: "Individual",
      language: "EN",
      status: "Active",
      portalStatus: "None",
    },
  });

  useEffect(() => {
    reset(
      client ?? {
        type: "Individual",
        language: "EN",
        status: "Active",
        portalStatus: "None",
      },
    );
  }, [client, reset]);

  const type = watch("type");
  const language = watch("language");

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
        <SheetHeader>
          <SheetTitle>{client ? "Edit Client" : "New Client"}</SheetTitle>
          <SheetDescription>{client ? "Update client information." : "Add a new client to the CRM."}</SheetDescription>
        </SheetHeader>

        <div className="mt-4 flex flex-col gap-4 px-4">
          <div className="grid gap-1.5">
            <Label>Client Name *</Label>
            <Input {...register("name")} placeholder="e.g. Dupont Holdings Inc." />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="grid gap-1.5">
              <Label>Client Type *</Label>
              <Select value={type} onValueChange={(v) => setValue("type", v as Client["type"])}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Individual">Individual</SelectItem>
                  <SelectItem value="Corporate">Corporate</SelectItem>
                  <SelectItem value="Trust">Trust</SelectItem>
                  <SelectItem value="Partnership">Partnership</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid gap-1.5">
              <Label>Preferred Language</Label>
              <Select value={language} onValueChange={(v) => setValue("language", v as Client["language"])}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="EN">English (EN)</SelectItem>
                  <SelectItem value="FR">French (FR)</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="grid gap-1.5">
            <Label>Email *</Label>
            <Input {...register("email")} type="email" placeholder="email@example.com" />
          </div>

          <div className="grid gap-1.5">
            <Label>Phone</Label>
            <Input {...register("phone")} placeholder="514-555-0000" />
          </div>

          <div className="grid gap-1.5">
            <Label>Address</Label>
            <Input {...register("address")} placeholder="Street, City, Province, Postal Code" />
          </div>

          {(type === "Corporate" || type === "Partnership") && (
            <div className="grid gap-1.5">
              <Label>Business Number (BN)</Label>
              <Input {...register("businessNumber")} placeholder="123456789RT0001" />
            </div>
          )}

          {type === "Individual" && (
            <div className="grid gap-1.5">
              <Label>SIN</Label>
              <Input {...register("sin")} placeholder="123-456-789" />
            </div>
          )}

          <div className="grid grid-cols-2 gap-4">
            <div className="grid gap-1.5">
              <Label>Assigned Staff *</Label>
              <Select onValueChange={(v) => setValue("assignedStaffId", v)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select staff" />
                </SelectTrigger>
                <SelectContent>
                  {staffMembers.map((s) => (
                    <SelectItem key={s.id} value={s.id}>
                      {s.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid gap-1.5">
              <Label>Backup Staff</Label>
              <Select onValueChange={(v) => setValue("backupStaffId", v)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select backup" />
                </SelectTrigger>
                <SelectContent>
                  {staffMembers.map((s) => (
                    <SelectItem key={s.id} value={s.id}>
                      {s.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="grid gap-1.5">
            <Label>Tags</Label>
            <Input {...register("tags")} placeholder="e.g. VIP, Real Estate, HST Registrant (comma separated)" />
          </div>

          <div className="grid gap-1.5">
            <Label>Status</Label>
            <Select defaultValue="Active" onValueChange={(v) => setValue("status", v as Client["status"])}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Active">Active</SelectItem>
                <SelectItem value="Inactive">Inactive</SelectItem>
                <SelectItem value="Prospect">Prospect</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="grid gap-1.5">
            <Label>Notes</Label>
            <Textarea {...register("notes")} placeholder="Internal notes about this client..." rows={3} />
          </div>

          <div className="rounded-lg border p-3">
            <div className="flex items-center justify-between">
              <span className="font-medium text-sm">Client Portal</span>
              <Badge variant="outline">Not Enabled</Badge>
            </div>
            <p className="mt-1 text-muted-foreground text-xs">Portal access can be granted after saving the client.</p>
          </div>
        </div>

        <SheetFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button onClick={() => onOpenChange(false)}>{client ? "Save Changes" : "Create Client"}</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}