"use client";

import { useEffect, useRef, useState } from "react";
import { Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { FormField } from "@/components/shared/form-field";
import { SearchableFilterField } from "@/components/shared/searchable-filter-field";
import { validateDlmConnector } from "./contract";
import { assignDlmConnectorRequest } from "./client-api";
import { formNumber, PowerFields, DlmStatusField } from "./form-fields";
import type { DlmSite, DlmConnector, DlmConnectorOptions } from "./types";

export function DlmConnectorDialog({ site, locationName, options, loading, error: lookupError, editing, assignedIds = [], onReload, onOpenChange, onAssigned }: {
  site: DlmSite;
  locationName: string;
  options: DlmConnectorOptions | null;
  loading: boolean;
  error: string;
  editing?: DlmConnector;
  assignedIds?: string[];
  onReload: () => void;
  onOpenChange: (open: boolean) => void;
  onAssigned: () => void;
}) {
  const [connectorId, setConnectorId] = useState(editing?.connectorId ?? "");
  const [saving, setSaving] = useState(false), [error, setError] = useState("");
  const pending = useRef(false), errorRef = useRef<HTMLParagraphElement>(null);
  useEffect(() => { if (error) errorRef.current?.focus(); }, [error]);
  const available = options?.records.filter(option => editing ? option.connectorId === editing.connectorId : !assignedIds.includes(option.connectorId)) ?? [];
  const selected = available.find(option => option.connectorId === connectorId);
  function changeOpen(open: boolean) { if (!pending.current) onOpenChange(open); }
  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (pending.current) return;
    if (!selected) { setError("Choose a connector from this location."); return; }
    const form = new FormData(event.currentTarget);
    const valid = validateDlmConnector({ chargepoint_id: selected.chargepointId, connector_id: selected.connectorId, connector_number: selected.connectorNumber, max_power_kw: formNumber(form, "max_power_kw"), min_power_kw: formNumber(form, "min_power_kw"), priority: formNumber(form, "priority"), priority_weight: formNumber(form, "priority_weight"), active: form.get("active") === "true" });
    if ("error" in valid) { setError(valid.error); return; }
    if (selected.powerKw > 0 && valid.payload.max_power_kw > selected.powerKw) { setError(`Maximum power cannot exceed the connector's rated ${selected.powerKw} kW.`); return; }
    pending.current = true; setSaving(true); setError("");
    try { await assignDlmConnectorRequest(site.id, valid.payload); onAssigned(); }
    catch (cause) { setError(cause instanceof Error ? cause.message : "Unable to save the connector settings."); }
    finally { pending.current = false; setSaving(false); }
  }
  return <Dialog open onOpenChange={changeOpen}>
    <DialogContent className="flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden p-0 [&_.text-muted-foreground]:text-foreground/70 sm:max-w-xl" showCloseButton={!saving}>
      <DialogHeader className="shrink-0 border-b px-6 py-5"><DialogTitle>{editing ? "Edit connector limits" : "Assign connector"}</DialogTitle><DialogDescription>{site.name} · {locationName}</DialogDescription></DialogHeader>
      <form onSubmit={submit} className="flex min-h-0 flex-1 flex-col">
        <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-6 py-5">
          {error && <p ref={errorRef} tabIndex={-1} role="alert" className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">{error}</p>}
          {loading ? <p role="status" className="flex items-center gap-2 py-10 text-sm text-muted-foreground"><Loader2 aria-hidden="true" className="size-4 animate-spin motion-reduce:animate-none" />Loading connectors from this location…</p>
            : lookupError ? <div role="alert"><p className="text-sm text-destructive">{lookupError}</p><Button type="button" variant="outline" className="mt-3" onClick={onReload}>Retry connector lookup</Button></div>
            : !available.length ? <div className="rounded-lg border bg-muted/40 p-4 text-sm"><p className="font-medium">No eligible connectors</p><p className="mt-1 text-muted-foreground">{editing ? "This connector is no longer available at this location. Refresh the site to check its assignment." : "All available connectors at this location are already assigned here, or none could be loaded."}</p></div>
            : <fieldset disabled={saving} className="space-y-5 disabled:opacity-70">
              {!options?.complete && <p role="status" className="rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground">The connector source is incomplete. Only verified connectors are available to select.</p>}
              <SearchableFilterField name="connector_id" label="Connector" value={connectorId} onValueChange={setConnectorId} options={available.map(option => ({ value: option.connectorId, label: `${option.chargepointName} · Connector ${option.connectorNumber}`, description: `${option.ocppIdentity} · ${option.name} · ${option.powerKw} kW rated` }))} allowCustomValue={false} required disabled={Boolean(editing)} placeholder="Search charger or connector" />
              {selected && <div className="rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground">{selected.ocppIdentity} · Connector {selected.connectorNumber} · Rated {selected.powerKw} kW</div>}
              <div className="grid gap-4 sm:grid-cols-2"><PowerFields minimum maxPower={editing?.maxPowerKw} minPower={editing?.minPowerKw} ratedPower={selected?.powerKw} /><FormField name="priority" label="Priority" type="number" min="0" step="1" defaultValue={editing?.priority ?? 1} required /><FormField name="priority_weight" label="Priority weight" type="number" min="0.001" step="any" defaultValue={editing?.priorityWeight ?? 1} required /><DlmStatusField active={editing?.active ?? true} /></div>
              <p className="text-xs leading-relaxed text-muted-foreground">Saving updates the DLM configuration. Use Apply to send these changes to the chargers.</p>
            </fieldset>}
        </div>
        <DialogFooter className="mx-0 mb-0 shrink-0 px-6 py-4"><Button type="button" variant="outline" disabled={saving} onClick={() => changeOpen(false)}>Cancel</Button><Button type="submit" disabled={saving || loading || Boolean(lookupError) || !selected} aria-busy={saving}>{saving && <Loader2 aria-hidden="true" className="animate-spin motion-reduce:animate-none" />}{saving ? "Saving…" : editing ? "Save Limits" : "Assign Connector"}</Button></DialogFooter>
      </form>
    </DialogContent>
  </Dialog>;
}