"use client";

import { useRef, useState, type FormEvent } from "react";
import { Loader2, Pencil, Trash2 } from "lucide-react";
import { toast } from "react-hot-toast";
import { FormField, SelectField } from "@/components/shared/form-field";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import type { Location } from "./types";
import type { LocationSiteManagerAccount } from "./related-api-contract";
import {
  siteManagerUpdateFromForm,
  type SiteManagerDetail,
} from "./site-manager-contract";
import {
  getSiteManager,
  removeSiteManagerFromLocation,
  updateSiteManager,
} from "./site-manager-client-api";

function display(value: string) {
  return value.trim() || "—";
}

function DetailField({ label, value }: { label: string; value: string }) {
  return (
    <div className="min-w-0">
      <dt className="text-sm text-muted-foreground">{label}</dt>
      <dd className="mt-1 break-words text-sm font-medium">{display(value)}</dd>
    </div>
  );
}

function detailDate(value: string) {
  return value ? value.slice(0, 10) : "";
}

export function SiteManagerDetailsDialog({
  location,
  account,
  onChanged,
  readOnly = false,
}: {
  location: Pick<Location, "id" | "name">;
  account: LocationSiteManagerAccount;
  onChanged: () => void;
  readOnly?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const [detail, setDetail] = useState<SiteManagerDetail | null>(null);
  const [loading, setLoading] = useState(false);
  const [editing, setEditing] = useState(false);
  const [confirmingRemoval, setConfirmingRemoval] = useState(false);
  const [saving, setSaving] = useState(false);
  const [removing, setRemoving] = useState(false);
  const [error, setError] = useState("");
  const pending = useRef(false);

  function changeOpen(nextOpen: boolean) {
    if (pending.current) return;
    setOpen(nextOpen);
    if (!nextOpen) {
      setEditing(false);
      setConfirmingRemoval(false);
      setError("");
    }
  }

  async function openDetails() {
    setOpen(true);
    setLoading(true);
    setDetail(null);
    setEditing(false);
    setConfirmingRemoval(false);
    setError("");
    try {
      setDetail(await getSiteManager(location.id, account.id));
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Unable to load Site Manager details.");
    } finally {
      setLoading(false);
    }
  }

  async function save(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (readOnly || pending.current) return;
    const values = siteManagerUpdateFromForm(new FormData(event.currentTarget));
    if (!values) {
      setError("Check the name, email, international phone number, and profile details.");
      return;
    }
    pending.current = true;
    setSaving(true);
    setError("");
    try {
      const message = await updateSiteManager(location.id, account.id, values);
      toast.success(message);
      setOpen(false);
      onChanged();
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Unable to update the Site Manager.");
    } finally {
      pending.current = false;
      setSaving(false);
    }
  }

  async function remove() {
    if (readOnly || pending.current) return;
    pending.current = true;
    setRemoving(true);
    setError("");
    try {
      const message = await removeSiteManagerFromLocation(location.id, account.id);
      toast.success(message);
      setOpen(false);
      onChanged();
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Unable to remove the Site Manager from this location.");
    } finally {
      pending.current = false;
      setRemoving(false);
    }
  }

  return (
    <>
      <Button type="button" variant="outline" size="sm" onClick={() => void openDetails()}>
        Details
      </Button>
      <Dialog open={open} onOpenChange={changeOpen}>
        <DialogContent
          className="flex max-h-[92dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl"
          showCloseButton={!saving && !removing}
        >
          <DialogHeader className="shrink-0 border-b px-6 py-5 pr-14">
            <DialogTitle>{editing ? "Edit Site Manager" : "Site Manager details"}</DialogTitle>
            <DialogDescription>
              Assigned to {location.name}.
            </DialogDescription>
          </DialogHeader>

          {loading ? (
            <div className="flex min-h-48 items-center justify-center gap-3 text-sm text-muted-foreground">
              <Loader2 aria-hidden="true" className="size-4 animate-spin motion-reduce:animate-none" />
              Loading Site Manager details…
            </div>
          ) : error && !detail ? (
            <div className="m-6 rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive" role="alert">
              {error}
            </div>
          ) : detail && editing && !readOnly ? (
            <form className="flex min-h-0 flex-1 flex-col" onSubmit={save}>
              <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-6 py-5">
                {error && <p role="alert" className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">{error}</p>}
                <fieldset disabled={saving} className="space-y-6 disabled:opacity-70">
                  <section className="space-y-4">
                    <h3 className="font-medium">Account information</h3>
                    <div className="grid gap-4 sm:grid-cols-2">
                      <FormField name="firstName" label="First name" autoComplete="given-name" defaultValue={detail.firstName} required maxLength={100} />
                      <FormField name="lastName" label="Last name" autoComplete="family-name" defaultValue={detail.lastName} required maxLength={100} />
                      <FormField name="email" label="Email" type="email" autoComplete="email" defaultValue={detail.email} required maxLength={254} />
                      <FormField name="phone" label="Phone" type="tel" autoComplete="tel" defaultValue={detail.phone} required maxLength={32} />
                      <SelectField
                        name="active"
                        label="Status"
                        defaultValue={String(detail.active)}
                        options={[{ value: "true", label: "Active" }, { value: "false", label: "Inactive" }]}
                      />
                    </div>
                  </section>

                  <section className="space-y-4">
                    <h3 className="font-medium">Profile information</h3>
                    <div className="grid gap-4 sm:grid-cols-2">
                      <FormField name="dateOfBirth" label="Date of birth" type="date" defaultValue={detailDate(detail.basicInformation.dateOfBirth)} />
                      <FormField name="placeOfBirth" label="Place of birth" defaultValue={detail.basicInformation.placeOfBirth} maxLength={256} />
                      <FormField name="gender" label="Gender" defaultValue={detail.basicInformation.gender} maxLength={50} />
                      <FormField name="avatarUrl" label="Avatar URL" type="url" defaultValue={detail.basicInformation.avatarUrl} maxLength={2048} />
                    </div>
                  </section>

                  <section className="space-y-4">
                    <h3 className="font-medium">Address</h3>
                    <div className="grid gap-4 sm:grid-cols-2">
                      <FormField className="sm:col-span-2" name="streetAndNumber" label="Street and number" autoComplete="street-address" defaultValue={detail.address.streetAndNumber} maxLength={256} />
                      <FormField name="city" label="City" autoComplete="address-level2" defaultValue={detail.address.city} maxLength={256} />
                      <FormField name="postalCode" label="Postal code" autoComplete="postal-code" defaultValue={detail.address.postalCode} maxLength={256} />
                      <FormField name="state" label="State / Province" autoComplete="address-level1" defaultValue={detail.address.state} maxLength={256} />
                      <FormField name="country" label="Country" autoComplete="country-name" defaultValue={detail.address.country} maxLength={256} />
                    </div>
                  </section>
                </fieldset>
              </div>
              <DialogFooter className="mx-0 mb-0 shrink-0 rounded-b-xl border-t px-6 py-4">
                <Button type="button" variant="outline" disabled={saving} onClick={() => { setEditing(false); setError(""); }}>
                  Cancel
                </Button>
                <Button type="submit" disabled={saving} aria-busy={saving}>
                  {saving && <Loader2 aria-hidden="true" className="animate-spin motion-reduce:animate-none" />}
                  {saving ? "Saving…" : "Save changes"}
                </Button>
              </DialogFooter>
            </form>
          ) : detail ? (
            <>
              <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-6 py-5">
                {error && <p role="alert" className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">{error}</p>}
                {confirmingRemoval && (
                  <div role="alert" className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm">
                    <p className="font-medium">Remove this Site Manager from {location.name}?</p>
                    <p className="mt-1 text-muted-foreground">The Site Manager account itself will not be deleted.</p>
                  </div>
                )}
                <section className="space-y-4">
                  <h3 className="font-medium">Account information</h3>
                  <dl className="grid gap-x-6 gap-y-5 sm:grid-cols-2">
                    <DetailField label="First name" value={detail.firstName} />
                    <DetailField label="Last name" value={detail.lastName} />
                    <DetailField label="Email" value={detail.email} />
                    <DetailField label="Phone" value={detail.phone} />
                    <DetailField label="Status" value={detail.active ? "Active" : "Inactive"} />
                  </dl>
                </section>
                <section className="space-y-4">
                  <h3 className="font-medium">Profile information</h3>
                  <dl className="grid gap-x-6 gap-y-5 sm:grid-cols-2">
                    <DetailField label="Date of birth" value={detailDate(detail.basicInformation.dateOfBirth)} />
                    <DetailField label="Place of birth" value={detail.basicInformation.placeOfBirth} />
                    <DetailField label="Gender" value={detail.basicInformation.gender} />
                    <DetailField label="Avatar URL" value={detail.basicInformation.avatarUrl} />
                  </dl>
                </section>
                <section className="space-y-4">
                  <h3 className="font-medium">Address</h3>
                  <dl className="grid gap-x-6 gap-y-5 sm:grid-cols-2">
                    <DetailField label="Street and number" value={detail.address.streetAndNumber} />
                    <DetailField label="City" value={detail.address.city} />
                    <DetailField label="Postal code" value={detail.address.postalCode} />
                    <DetailField label="State / Province" value={detail.address.state} />
                    <DetailField label="Country" value={detail.address.country} />
                  </dl>
                </section>
              </div>
              <DialogFooter className="mx-0 mb-0 shrink-0 flex-col-reverse rounded-b-xl border-t px-6 py-4 sm:flex-row sm:justify-between">
                {readOnly ? (
                  <Button type="button" variant="outline" onClick={() => changeOpen(false)}>Close</Button>
                ) : confirmingRemoval ? (
                  <>
                    <Button type="button" variant="outline" disabled={removing} onClick={() => setConfirmingRemoval(false)}>
                      Cancel
                    </Button>
                    <Button type="button" variant="destructive" disabled={removing} aria-busy={removing} onClick={() => void remove()}>
                      {removing && <Loader2 aria-hidden="true" className="animate-spin motion-reduce:animate-none" />}
                      {removing ? "Removing…" : "Remove from location"}
                    </Button>
                  </>
                ) : (
                  <>
                    <Button type="button" variant="destructive" disabled={saving || removing} onClick={() => setConfirmingRemoval(true)}>
                      <Trash2 aria-hidden="true" />Remove from location
                    </Button>
                    <div className="flex flex-col-reverse gap-2 sm:flex-row">
                      <Button type="button" variant="outline" onClick={() => changeOpen(false)}>Close</Button>
                      <Button type="button" onClick={() => setEditing(true)}><Pencil aria-hidden="true" />Edit</Button>
                    </div>
                  </>
                )}
              </DialogFooter>
            </>
          ) : null}
        </DialogContent>
      </Dialog>
    </>
  );
}