import { useEffect, useRef, useState } from "react";
import { AlertCircle } from "lucide-react";
import { Alert, AlertDescription } from "../../../components/ui/alert.tsx";
import { Button } from "../../../components/ui/button.tsx";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../../components/ui/dialog.tsx";
import { Input } from "../../../components/ui/input.tsx";
import { Label } from "../../../components/ui/label.tsx";
import { SelectControl } from "../../../components/ui/select-control.tsx";
import { Textarea } from "../../../components/ui/textarea.tsx";
import { ToggleGroupControl, ToggleGroupControlOption } from "../../../components/ui/toggle-group-control.tsx";
import {
  newOperationId, useRecordsService,
  type RecordsBasis, type RecordsDirection, type RecordsRequest, type RecordsScope,
} from "../../../services/RecordsService.tsx";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import { isSaveRetired, useSaveScope } from "../../../utils/saveOperation";
import { actionAttempt, type ActionAttempt } from "../../../utils/referralRequestScope";
import { SCOPE_LABEL, basisOptions } from "./recordsWords.ts";

const BLANK = { name: "", organization: "", fax: "", email: "", dueAt: "", note: "" };

interface Props {
  // The practice this opening belongs to; its create is sent under it and nowhere else.
  organizationId?: string;
  // Whether this viewer may work records now; losing it retires a create under way for good.
  mayWork: boolean;
  onClose: () => void;
  onCreated: (request: RecordsRequest) => void;
}

// One operation id per request being typed, reused on a retry, so a lost answer cannot make two. Each opening is its
// own mount; an answer that arrives after it closed or its owner changed publishes nothing.
const NewRecordsRequestDialog = ({ organizationId, mayWork, onClose, onCreated }: Props) => {
  const { createRequest } = useRecordsService();
  const [direction, setDirection] = useState<RecordsDirection>("incoming");
  const [form, setForm] = useState(BLANK);
  const [scope, setScope] = useState<RecordsScope>("practice");
  const [basis, setBasis] = useState<RecordsBasis["kind"] | "">("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string>();
  const operation = useRef<string>();
  const live = useRef(true);
  // The create is admitted before it is prepared and again just before it is sent; closing this opening, or a change of
  // practice or viewer, cancels it, so a create held on a token or proof wait is never sent.
  const lives = useSaveScope(organizationId);
  const mayWorkNow = useRef(mayWork);
  mayWorkNow.current = mayWork;
  const attempts = useRef(new Set<ActionAttempt>());
  useEffect(() => {
    if (mayWork) return;
    attempts.current.forEach((attempt) => attempt.retire());
    attempts.current.clear();
  }, [mayWork]);
  useEffect(() => {
    live.current = true;
    return () => { live.current = false; };
  }, []);

  const field = (key: keyof typeof BLANK) => (event: { target: { value: string } }) =>
    setForm((held) => ({ ...held, [key]: event.target.value }));

  const close = () => {
    if (busy) return;
    setForm(BLANK); setScope("practice"); setBasis(""); setError(undefined); setDirection("incoming");
    operation.current = undefined;
    onClose();
  };

  const needsNote = basis === "other";
  const ready = form.name.trim().length > 0 && (!needsNote || form.note.trim().length > 0);

  const submit = async () => {
    setBusy(true);
    setError(undefined);
    operation.current = operation.current ?? newOperationId();
    const text = (value: string) => value.trim() || undefined;
    const life = lives.start();
    const attempt = actionAttempt({ admit: life.admit, signal: life.transport.signal, organizationId }, () => mayWorkNow.current);
    attempts.current.add(attempt);
    attempt.signal.addEventListener("abort", () => attempts.current.delete(attempt), { once: true });
    try {
      const answer = await createRequest(operation.current, {
        direction,
        counterpart: { name: form.name.trim(), organization: text(form.organization), fax: text(form.fax), email: text(form.email) },
        ...(direction === "incoming" ? { scope } : {}),
        ...(direction === "incoming" && basis ? { basis: { kind: basis, note: text(form.note) } } : {}),
        ...(text(form.dueAt) ? { dueAt: form.dueAt } : {}),
      }, attempt);
      if (!live.current) return;
      operation.current = undefined;
      setBusy(false);
      onCreated(answer.request);
      close();
    } catch (failure) {
      if (!live.current) return;
      if (isSaveRetired(failure)) {
        setBusy(false);
        return;
      }
      console.error("Error creating a records request:", failure);
      setError(relayServerFailure(failure, "The request could not be saved. Try again; it will not be logged twice."));
      setBusy(false);
    }
  };

  return (
    <Dialog open onOpenChange={(next) => { if (!next) close(); }}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>New records request</DialogTitle>
          <DialogDescription>Log a request for records held here, or ask another practice for theirs.</DialogDescription>
        </DialogHeader>
        <div className="records-form">
          {error && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}
          <ToggleGroupControl label="This request" value={direction} isBlock disabled={busy}
            onChange={(value) => setDirection(value === "outgoing" ? "outgoing" : "incoming")}>
            <ToggleGroupControlOption value="incoming" label="Asks us for records" />
            <ToggleGroupControlOption value="outgoing" label="Asks someone else" />
          </ToggleGroupControl>

          <div className="records-field">
            <Label htmlFor="records-name">{direction === "incoming" ? "Who is asking *" : "Who we are asking *"}</Label>
            <Input id="records-name" value={form.name} disabled={busy} onChange={field("name")} />
          </div>
          <div className="records-row-fields">
            <div className="records-field">
              <Label htmlFor="records-org">Organization</Label>
              <Input id="records-org" value={form.organization} disabled={busy} onChange={field("organization")} />
            </div>
            <div className="records-field">
              <Label htmlFor="records-fax">Fax</Label>
              <Input id="records-fax" value={form.fax} disabled={busy} inputMode="tel" onChange={field("fax")} />
            </div>
          </div>
          <div className="records-row-fields">
            <div className="records-field">
              <Label htmlFor="records-email">Email</Label>
              <Input id="records-email" value={form.email} disabled={busy} inputMode="email" onChange={field("email")} />
            </div>
            <div className="records-field">
              <Label htmlFor="records-due">Due</Label>
              <Input id="records-due" type="date" value={form.dueAt} disabled={busy} onChange={field("dueAt")} />
            </div>
          </div>

          {direction === "incoming" && (
            <>
              <ToggleGroupControl label="Which records" value={scope} isBlock disabled={busy}
                onChange={(value) => setScope(value === "all" ? "all" : "practice")}>
                <ToggleGroupControlOption value="practice" label={SCOPE_LABEL.practice} />
                <ToggleGroupControlOption value="all" label={SCOPE_LABEL.all} />
              </ToggleGroupControl>
              <SelectControl label="Basis for release" value={basis} disabled={busy}
                options={basisOptions(undefined)}
                onChange={(value) => setBasis(value as RecordsBasis["kind"] | "")} />
              {needsNote && (
                <div className="records-field">
                  <Label htmlFor="records-note">Explain the basis *</Label>
                  <Textarea id="records-note" value={form.note} disabled={busy} onChange={field("note")} />
                </div>
              )}
            </>
          )}
        </div>
        <DialogFooter>
          <Button className="btn btn-blue" disabled={!ready || busy || !mayWork} onClick={() => void submit()}>
            {busy ? "Saving" : "Save request"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default NewRecordsRequestDialog;