"use client";

import { useEffect, useState } from "react";
import { Toaster } from "@/components/ui/sonner";
import {
  AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";
import { useFeedbackStore } from "./feedback-store";

// Mounted once in the root layout: toasts plus the shared confirm dialog used by confirmAction().
export default function FeedbackHost() {
  const confirmRequest = useFeedbackStore((state) => state.confirmRequest);

  return <>
    <Toaster position="top-right" richColors closeButton />
    <ConfirmDialog request={confirmRequest} />
  </>;
}

function ConfirmDialog({ request }) {
  const settleConfirm = useFeedbackStore((state) => state.settleConfirm);
  const [reason, setReason] = useState("");
  const [touched, setTouched] = useState(false);
  const reasonConfig = request?.reason;
  const minLength = reasonConfig ? (reasonConfig.required === false ? 0 : reasonConfig.minLength || 3) : 0;
  const reasonError = reasonConfig && reason.trim().length < minLength
    ? `Enter at least ${minLength} characters so the history explains this decision.`
    : "";

  useEffect(() => {
    setReason("");
    setTouched(false);
  }, [request]);

  const submit = (event) => {
    event.preventDefault();
    setTouched(true);
    if (reasonError) return;
    settleConfirm({ reason: reason.trim() });
  };

  return <AlertDialog open={Boolean(request)} onOpenChange={(open) => { if (!open) settleConfirm(null); }}>
    <AlertDialogContent>
      <form onSubmit={submit} className="grid gap-4">
        <AlertDialogHeader>
          <AlertDialogTitle>{request?.title || "Are you sure?"}</AlertDialogTitle>
          {request?.message && <AlertDialogDescription>{request.message}</AlertDialogDescription>}
        </AlertDialogHeader>
        {reasonConfig && <Field data-invalid={Boolean(touched && reasonError)}>
          <FieldLabel htmlFor="confirm-reason">{reasonConfig.label || "Reason"}</FieldLabel>
          <Textarea id="confirm-reason" autoFocus rows={3} value={reason} onChange={(event) => setReason(event.target.value)} onBlur={() => setTouched(true)} placeholder={reasonConfig.placeholder || ""} aria-invalid={Boolean(touched && reasonError)} />
          {touched && reasonError ? <FieldError>{reasonError}</FieldError> : <FieldDescription>{reasonConfig.helper || "Saved to the record history."}</FieldDescription>}
        </Field>}
        <AlertDialogFooter>
          <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
          <Button type="submit" variant={request?.tone === "danger" ? "destructive" : "default"} autoFocus={!reasonConfig}>{request?.confirmLabel || "Confirm"}</Button>
        </AlertDialogFooter>
      </form>
    </AlertDialogContent>
  </AlertDialog>;
}