"use client";

import { useState, useEffect, useMemo, useRef } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { Separator } from "@/components/ui/separator";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from "@/components/ui/sheet";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { DuplicateWarning, type DuplicateMatch } from "@/components/ui/duplicate-warning";
import { toast } from "sonner";
import {
  Loader2,
  User,
  Building2,
  Mail,
  Phone,
  AtSign,
  MapPin,
  FileText,
  ExternalLink,
  CheckCircle2,
  XCircle,
} from "lucide-react";
import { cn } from "@/lib/utils";
import getPocketBase from "@/lib/pocketbase";
import { getAllCompanies, findCustomerDuplicates } from "@/lib/pb-helpers";
import { CompanySearch } from "@/components/ui/company-search";
import { UserSearch } from "@/components/ui/user-search";
import type { Company, Customer } from "@/lib/types";

interface CustomerFormProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  customer?: Customer | null;
  onSaved: () => void;
}

/**
 * Treat PB's `{ lon: 0, lat: 0 }` (Null Island) as "no coordinates".
 * PB geoPoint is non-nullable with this zero default — masking it
 * keeps every unset customer from showing up at sea.
 */
function hasRealCoordinates(c: Customer["coordinates"]): c is { lon: number; lat: number } {
  return !!c && (c.lon !== 0 || c.lat !== 0);
}

function buildCustomerFormState(customer?: Customer | null) {
  return {
    customer: customer?.customer || "",
    email: customer?.email || "",
    alternative_email: customer?.alternative_email || "",
    buyer_email: customer?.buyer_email || "",
    number: customer?.number || "",
    company: customer?.company || "",
    // Pass the resolved rep name/email through as a fallback label so the
    // user-search trigger shows the rep on edit even before its popover
    // has been opened and the user roster has been fetched. See
    // `selectedLabel={...}` on `<UserSearch>` below.
    rep: customer?.rep || "",
    /**
     * Active/inactive customer flag (added 2026-09). We default new
     * customers to `true` (active) but collapse legacy rows — which
     * pre-date the PB field entirely and come back as `undefined` —
     * to `true` as well. The PB admin migration deliberately leaves
     * existing rows untouched, so the office doesn't wake up to a
     * customer base that's been silently flipped to "inactive".
     */
    status: customer?.status ?? true,
    /**
     * Site/location name (added 2026-09). Distinct from the older
     * `site` free-text mine tag — see `Customer.site_location`
     * JSDoc in `types.ts`. Always initialised to "" so the
     * autocomplete `<datalist>` has a string to compare against.
     */
    site_location: customer?.site_location || "",
    lat: customer && hasRealCoordinates(customer.coordinates) ? String(customer.coordinates.lat) : "",
    lon: customer && hasRealCoordinates(customer.coordinates) ? String(customer.coordinates.lon) : "",
    description: customer?.description || "",
  };
}

function FieldLabel({ icon: Icon, label }: { icon: React.ElementType; label: string }) {
  return (
    <Label className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground mb-1">
      <Icon className="h-3 w-3" />
      {label}
    </Label>
  );
}

export function CustomerForm({ open, onOpenChange, customer, onSaved }: CustomerFormProps) {
  const [loading, setLoading] = useState(false);
  const [companies, setCompanies] = useState<Company[]>([]);
  const [form, setForm] = useState(() => buildCustomerFormState(customer));
  /**
   * Live duplicate-detection state. The customer check is multi-field
   * (name + company + email when set), so the debounced effect below
   * re-runs whenever any of those change. The save-block dialog uses
   * the same `duplicates` snapshot — re-checked at submit time so a
   * fast typer can't slip a duplicate past us.
   */
  const [duplicates, setDuplicates] = useState<Customer[]>([]);
  const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
  /**
   * Suggestions for the `site_location` autocomplete. Fetched once
   * when the sheet opens via `/api/v1/customers/sites`; the field is
   * plain-text on the PB side (see `Customer.site_location`), so the
   * `<datalist>` only nudges the operator toward values already used
   * by other customers — it doesn't restrict input.
   *
   * Stays an empty array on network failure so the input still works
   * as a free-text field. Distinct from the older `site` (mine/shaft
   * tag) autocomplete used by the batch pin tool.
   */
  const [siteLocationSuggestions, setSiteLocationSuggestions] = useState<
    { site_location: string; customerCount: number }[]
  >([]);

  // Lazy-load companies for the company combobox the first time the
  // sheet opens. Cheap (small table) and the user opens the form
  // infrequently, so we don't bother with a context or page-level
  // prefetch.
  useEffect(() => {
    if (!open || companies.length > 0) return;
    let cancelled = false;
    getAllCompanies()
      .then((data) => {
        if (!cancelled) setCompanies(data);
      })
      .catch(() => {
        // best-effort — combobox will just show empty list
      });
    return () => {
      cancelled = true;
    };
  }, [open, companies.length]);

  // Lazy-load distinct `site_location` values for the datalist the
  // first time the sheet opens. Once loaded, the datalist shows
  // every distinct value with how many customers carry it.
  // Re-fetching on every open would be wasteful; the endpoint is
  // `dynamic = "force-dynamic"` on the server side, but the data
  // here changes at human-typing pace, so once-per-session is fine.
  useEffect(() => {
    if (!open || siteLocationSuggestions.length > 0) return;
    let cancelled = false;
    fetch("/api/v1/customers/sites", { cache: "no-store" })
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
      .then((data: { items?: { site_location: string; customerCount: number }[] }) => {
        if (!cancelled) setSiteLocationSuggestions(data.items ?? []);
      })
      .catch(() => {
        // best-effort — datalist just stays empty, the field still
        // accepts free-text
      });
    return () => {
      cancelled = true;
    };
  }, [open, siteLocationSuggestions.length]);

  // Reset the form state when the form is bound to a different
  // customer. Skip the very first run — `useState(() => buildCustomerFormState(customer))`
  // already initialised the form, and a 0ms timer would clobber
  // anything the operator typed in the gap between mount and the
  // effect's first run. The ref compares by id (not the whole
  // record) so the effect only fires when the operator binds the
  // form to a new row.
  const lastCustomerId = useRef<string | undefined>(customer?.id);
  useEffect(() => {
    if (lastCustomerId.current === customer?.id) return;
    lastCustomerId.current = customer?.id;
    setForm(buildCustomerFormState(customer));
    setDuplicates([]);
  }, [customer?.id, customer]);

  // Reset the form state when the sheet closes. The parent only flips
  // `open` to `false` once the operator is done with the dialog (X
  // button, outside click, or successful save). Without this, opening
  // the sheet again — e.g. clicking "Add" after a cancelled edit —
  // inherits the previous session's typed values, which is confusing
  // and risks leaking a stale `customer` prop into a Create flow.
  // The `customer` dep keeps the reset in sync if the parent switches
  // the bound record while the sheet is already closed.
  useEffect(() => {
    if (open) return;
    setForm(buildCustomerFormState(customer));
    setDuplicates([]);
  }, [open, customer]);

  // Live duplicate check — 300ms after the last change to name,
  // company, or email. Customer dupes are multi-field, so we key on
  // all three: same name AND same company, AND (when both sides have
  // an email) the emails also match. `customer?.id` excludes the
  // current record when editing. We derive the empty-name case
  // instead of calling setState in the effect (React 19 lint).
  useEffect(() => {
    const name = form.customer.trim();
    if (!name) return;
    let cancelled = false;
    const timer = window.setTimeout(() => {
      findCustomerDuplicates(name, form.company, form.email, customer?.id)
        .then((matches) => {
          if (!cancelled) setDuplicates(matches);
        })
        .catch(() => {
          // best-effort — save-block re-checks anyway
        });
    }, 300);
    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [form.customer, form.company, form.email, customer?.id]);

  // Derived view: clear the warning when the name is empty so stale
  // matches from a previous keystroke don't linger.
  const visibleDuplicates = useMemo(
    () => (form.customer.trim() ? duplicates : []),
    [form.customer, duplicates]
  );

  // Resolve the company name for the secondary line on each match. The
  // customer row stores `company` as a relation id, and the helper
  // already fetches with `expand: "company"`, so the id → name lookup
  // is a single pass over the already-loaded companies array.
  const companyNameById = new Map(companies.map((c) => [c.id, c.company] as const));
  const duplicateMatches: DuplicateMatch[] = visibleDuplicates.map((c) => ({
    id: c.id,
    href: `/customers/${c.id}`,
    name: c.customer,
    secondary: c.expand?.company?.company ?? companyNameById.get(c.company) ?? c.email,
  }));

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.customer.trim()) {
      toast.error("Customer name is required");
      return;
    }

    // Re-check at submit time. The live effect is debounced, so a fast
    // typist could submit before it ran. If we find any duplicate we
    // pop a modal that lists them and asks the operator to confirm or
    // cancel — they can also click "View" to open the existing record
    // in a new tab.
    let submitDuplicates: Customer[] = duplicates;
    if (submitDuplicates.length === 0) {
      try {
        submitDuplicates = await findCustomerDuplicates(
          form.customer,
          form.company,
          form.email,
          customer?.id
        );
        setDuplicates(submitDuplicates);
      } catch {
        submitDuplicates = [];
      }
    }
    if (submitDuplicates.length > 0) {
      setDuplicateDialogOpen(true);
      return;
    }

    await performSave();
  };

  /**
   * The actual PB write. Extracted so the "Save anyway" path inside the
   * duplicate dialog can re-run validation + write after the operator
   * confirms the override. Identical to the company-form pattern.
   */
  const performSave = async () => {
    // Coordinates: blank → PB default {0,0}; both-or-neither, range-checked.
    const latTrim = form.lat.trim();
    const lonTrim = form.lon.trim();
    let coordinatesPayload: { lon: number; lat: number };
    if (!latTrim && !lonTrim) {
      coordinatesPayload = { lon: 0, lat: 0 };
    } else {
      if (!latTrim || !lonTrim) {
        toast.error("Enter both latitude and longitude, or leave both blank.");
        return;
      }
      const lat = Number(latTrim);
      const lon = Number(lonTrim);
      if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
        toast.error("Coordinates must be numbers.");
        return;
      }
      if (lat < -90 || lat > 90) {
        toast.error("Latitude must be between -90 and 90.");
        return;
      }
      if (lon < -180 || lon > 180) {
        toast.error("Longitude must be between -180 and 180.");
        return;
      }
      coordinatesPayload = { lon, lat };
    }

    setLoading(true);
    try {
      const pb = getPocketBase();
      // `company` and `rep` are relation ids — PB stores them as
      // strings; passing "" unsets the relation. `dateadded` /
      // `lastvisiteddate` mirror the legacy fields (still useful for
      // sorting / display on the list page).
      //
      // `status` (added 2026-09) flips the customer active/inactive.
      // We coerce through `!!` so an accidental falsy value (string,
      // undefined) becomes a deterministic bool in PB.
      //
      // `site_location` (added 2026-09) is a free-text site label —
      // see `Customer.site_location` JSDoc. Empty string is fine;
      // PB treats the field as plain text.
      //
      // `customer?.site` (the older free-text mine/shaft tag) is NOT
      // touched by this form — it's owned by the batch pin tool at
      // `/visits/pin-tool`. Two separate fields, two separate edit
      // surfaces.
      const data = {
        customer: form.customer,
        email: form.email,
        alternative_email: form.alternative_email,
        buyer_email: form.buyer_email,
        number: form.number,
        company: form.company,
        rep: form.rep,
        status: !!form.status,
        site_location: form.site_location,
        coordinates: coordinatesPayload,
        description: form.description,
        dateadded: customer?.dateadded || new Date().toISOString(),
        lastvisiteddate: new Date().toISOString(),
      };
      if (customer) {
        await pb.collection("customers").update(customer.id, data);
        toast.success("Customer updated");
      } else {
        await pb.collection("customers").create(data);
        toast.success("Customer created");
      }
      onSaved();
      onOpenChange(false);
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : "Failed to save customer";
      toast.error(message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="w-full sm:max-w-md p-0 flex flex-col">
        <SheetHeader className="px-6 pt-6 pb-2 border-b shrink-0">
          <SheetTitle className="text-lg flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">
              <User className="h-4 w-4" />
            </div>
            {customer ? "Edit Customer" : "New Customer"}
          </SheetTitle>
          <SheetDescription>
            {customer ? "Update customer details" : "Add a new customer to your CRM"}
          </SheetDescription>
        </SheetHeader>

        <form onSubmit={handleSubmit} className="flex-1 flex flex-col min-h-0">
          <div className="flex-1 overflow-y-auto space-y-6 px-6 py-5">
            <div className="space-y-4">
              <div>
                <FieldLabel icon={User} label="Customer Name *" />
                <Input
                  value={form.customer}
                  onChange={(e) => setForm({ ...form, customer: e.target.value })}
                  required
                  placeholder="Full name or business name"
                  className="h-9"
                  aria-invalid={duplicateMatches.length > 0}
                />
                <DuplicateWarning matches={duplicateMatches} entityLabel="Customer" />
              </div>
              {/*
                Active/Inactive customer toggle — lifted to the top of the
                form (2026-09) so the operator can flip the flag without
                scrolling past company / sales rep / description. State
                semantics: `status` is a PB bool, true = active, false =
                inactive; legacy rows that pre-date the field come back
                as `undefined` and collapse to `true` via `?? true` in
                `buildCustomerFormState`, so untouched existing customers
                read as Active on first edit.

                Visual: the switch has a coloured background that flips
                with state — green when active, muted when inactive — so
                the answer is one glance from across the room, not "did
                I read the trigger label right?". The icon (Check /
                X-circle) reinforces the same answer for screen-reader
                users.
              */}
              <div
                className={cn(
                  "flex items-center justify-between gap-4 rounded-md border px-3 py-3 transition-colors",
                  form.status
                    ? "border-success/40 bg-success/10"
                    : "border-muted-foreground/30 bg-muted/40"
                )}
              >
                <div className="min-w-0 flex items-start gap-2.5">
                  {form.status ? (
                    <CheckCircle2
                      className="h-4 w-4 text-success shrink-0 mt-0.5"
                      aria-hidden
                    />
                  ) : (
                    <XCircle
                      className="h-4 w-4 text-muted-foreground shrink-0 mt-0.5"
                      aria-hidden
                    />
                  )}
                  <div className="min-w-0">
                    <Label
                      htmlFor="customer-status"
                      className="text-sm font-medium leading-none"
                    >
                      {form.status ? "Active customer" : "Inactive customer"}
                    </Label>
                    <p className="mt-1 text-[11px] text-muted-foreground">
                      New customers are active by default. Flip this
                      off when the customer stops working for the
                      mine — historical quotes and orders stay
                      attached, but the customer drops off the
                      active pickers.
                    </p>
                  </div>
                </div>
                <Switch
                  id="customer-status"
                  checked={!!form.status}
                  onCheckedChange={(checked) =>
                    setForm({ ...form, status: checked === true })
                  }
                  aria-label={form.status ? "Active customer" : "Inactive customer"}
                />
              </div>
              <div>
                <FieldLabel icon={Building2} label="Company" />
                <CompanySearch
                  value={form.company}
                  onValueChange={(id) => setForm({ ...form, company: id })}
                  companies={companies}
                  // Same pattern as `selectedLabel` on `<UserSearch>`
                  // below — the form passes the resolved company name
                  // through so the trigger shows the linked company
                  // immediately on edit, before the companies list has
                  // finished loading. Without this the trigger falls
                  // through to "Select company..." and looks like the
                  // existing company relationship is gone — which is
                  // a UX trap when all the operator wants to do is
                  // flip the Active toggle and save.
                  selectedLabel={customer?.expand?.company?.company}
                  placeholder="Select company..."
                />
                <p className="text-[11px] text-muted-foreground mt-1.5">
                  The company the customer works for. Already-linked
                  companies stay selected when you save — you only
                  need to touch this field to change or clear it.
                </p>
              </div>
              <div>
                <FieldLabel icon={MapPin} label="Site / Location" />
                {/*
                  `site_location` (added 2026-09) is the shaft/site label
                  specific to this customer. PB storage is plain text, so
                  we wrap a regular <input> with a <datalist> that
                  pre-fills suggestions from other customers already
                  typed — see `listDistinctSiteLocations`. The operator
                  can still type anything; the datalist just nudges them
                  toward consistency.

                  Stable ID on the <input> lets the <datalist> bind to
                  it via `list=`. cmdk-style filtering not needed —
                  this is a free-text field, not a constrained picker.
                */}
                <Input
                  list="customer-site-location-options"
                  value={form.site_location}
                  onChange={(e) => setForm({ ...form, site_location: e.target.value })}
                  placeholder="e.g. Kusasalethu shaft"
                  className="h-9"
                  aria-label="Site or location"
                />
                <datalist id="customer-site-location-options">
                  {siteLocationSuggestions.map((s) => (
                    <option key={s.site_location} value={s.site_location}>
                      {s.customerCount > 0 ? `${s.site_location} (${s.customerCount})` : s.site_location}
                    </option>
                  ))}
                </datalist>
                <p className="text-[11px] text-muted-foreground mt-1.5">
                  The shaft or site within the company (each company
                  usually has more than one). Leave blank if the
                  customer is office-only or you don&apos;t know yet.
                </p>
              </div>
            </div>

            <Separator />

            <div className="space-y-4">
              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contact</p>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <FieldLabel icon={Mail} label="Email" />
                  <Input
                    type="email"
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    placeholder="email@example.com"
                    className="h-9"
                  />
                </div>
                <div>
                  <FieldLabel icon={Phone} label="Phone" />
                  <Input
                    value={form.number}
                    onChange={(e) => setForm({ ...form, number: e.target.value })}
                    placeholder="Phone number"
                    className="h-9"
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <FieldLabel icon={AtSign} label="Alt Email" />
                  <Input
                    type="email"
                    value={form.alternative_email}
                    onChange={(e) => setForm({ ...form, alternative_email: e.target.value })}
                    placeholder="alternative@example.com"
                    className="h-9"
                  />
                </div>
                <div>
                  <FieldLabel icon={AtSign} label="Buyer Email" />
                  <Input
                    type="email"
                    value={form.buyer_email}
                    onChange={(e) => setForm({ ...form, buyer_email: e.target.value })}
                    placeholder="buyer@example.com"
                    className="h-9"
                  />
                </div>
              </div>
              <div>
                <FieldLabel icon={MapPin} label="Delivery Coordinates" />
                <div className="grid grid-cols-2 gap-3">
                  <Input
                    value={form.lat}
                    onChange={(e) => setForm({ ...form, lat: e.target.value })}
                    type="number"
                    step="any"
                    placeholder="Latitude"
                    className="h-9"
                    aria-label="Latitude"
                  />
                  <Input
                    value={form.lon}
                    onChange={(e) => setForm({ ...form, lon: e.target.value })}
                    type="number"
                    step="any"
                    placeholder="Longitude"
                    className="h-9"
                    aria-label="Longitude"
                  />
                </div>
                <p className="text-[11px] text-muted-foreground mt-1.5">
                  Leave both blank if unknown. Used later for routing /
                  delivery. Example: -26.2041, 28.0473 (Johannesburg).
                </p>
              </div>
            </div>

            <Separator />

            <div className="space-y-4">
              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Details</p>
              <div>
                <FieldLabel icon={User} label="Sales Rep" />
                <UserSearch
                  value={form.rep}
                  onValueChange={(id) => setForm({ ...form, rep: id })}
                  // Prop the rep's resolved name/email into the trigger so
                  // it renders immediately on edit, before the user-search
                  // popover has been opened and the user roster fetched
                  // (see UserSearch JSDoc — `selectedLabel` fills the gap).
                  selectedLabel={
                    customer?.expand?.rep?.name || customer?.expand?.rep?.email
                  }
                  placeholder="Select sales rep..."
                />
              </div>
              {/*
                Active/Inactive toggle used to live here, but it was
                buried past company / rep / description and easy to
                miss. It's now the second row of the form (right
                under the customer name) so flipping the flag is one
                tap. Keeping the Save layer in `performSave` unchanged
                — `status: !!form.status` already shipped 2026-09.
              */}
              <div>
                <FieldLabel icon={FileText} label="Description" />
                <Textarea
                  value={form.description}
                  onChange={(e) => setForm({ ...form, description: e.target.value })}
                  rows={2}
                  placeholder="Optional notes..."
                  className="resize-none text-sm"
                />
              </div>
            </div>
          </div>

          <SheetFooter className="border-t px-6 pb-6 pt-4 bg-popover shrink-0">
            <Button type="submit" disabled={loading} className="w-full">
              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              {customer ? "Save Changes" : "Create Customer"}
            </Button>
          </SheetFooter>
        </form>
      </SheetContent>
    </Sheet>

    {/* Duplicate confirmation. The customer check is multi-field
        (name + company + email when set), so a match here means a
        real collision — same person, same company, same email. The
        operator can cancel and edit, click "View" to inspect the
        existing record in a new tab, or override with "Save anyway"
        when the match is genuinely a different person. */}
    <Dialog open={duplicateDialogOpen} onOpenChange={setDuplicateDialogOpen}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>
            {duplicates.length === 1 ? "Possible duplicate" : `${duplicates.length} possible duplicates`}
          </DialogTitle>
          <DialogDescription>
            {duplicates.length === 1
              ? "An existing customer has the same name at the same company. Check the match below before saving."
              : "Several existing customers have the same name and company. Confirm none of them is the one you're adding."}
          </DialogDescription>
        </DialogHeader>
        <ul className="max-h-60 space-y-1.5 overflow-y-auto">
          {duplicates.map((d) => {
            const secondary = d.expand?.company?.company ?? companyNameById.get(d.company) ?? d.email;
            return (
              <li
                key={d.id}
                className="flex items-start justify-between gap-2 rounded-md border bg-background/60 px-3 py-2 text-sm"
              >
                <div className="min-w-0 flex-1">
                  <p className="truncate font-medium" title={d.customer}>
                    {d.customer}
                  </p>
                  {secondary && (
                    <p className="truncate text-xs text-muted-foreground" title={secondary}>
                      {secondary}
                    </p>
                  )}
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon-sm"
                  onClick={() => window.open(`/customers/${d.id}`, "_blank", "noopener")}
                  aria-label={`Open ${d.customer}`}
                  title="Open in new tab"
                >
                  <ExternalLink className="h-3.5 w-3.5" />
                </Button>
              </li>
            );
          })}
        </ul>
        <DialogFooter>
          <Button
            type="button"
            variant="outline"
            onClick={() => setDuplicateDialogOpen(false)}
          >
            Cancel
          </Button>
          <Button
            type="button"
            variant="destructive"
            onClick={async () => {
              setDuplicateDialogOpen(false);
              await performSave();
            }}
            disabled={loading}
          >
            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            Save anyway
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
    </>
  );
}