import { useCallback, useEffect, useRef, useState } from "react";
import { Check, Loader2, NotebookPen, TriangleAlert } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

const AUTOSAVE_MS = 700;

type Status = "idle" | "saving" | "saved" | "error";

/**
 * Free-form notes on an asset or loan: who else is involved, what was agreed,
 * where the paperwork is. There is no Save button: the text is written a moment
 * after you stop typing, when you click away, and when you leave the page.
 *
 * Give it `key={accountId}` so switching accounts starts from that account's
 * notes instead of carrying the previous text over.
 */
export function AccountNotes({
  value,
  onSave,
  className,
}: {
  value: string | null | undefined;
  onSave: (notes: string) => Promise<void> | void;
  className?: string;
}) {
  const [text, setText] = useState(value ?? "");
  const [status, setStatus] = useState<Status>("idle");
  const saved = useRef(value ?? "");
  const latest = useRef(text);
  const onSaveRef = useRef(onSave);
  onSaveRef.current = onSave;

  const save = useCallback(async (next: string) => {
    if (next === saved.current) return;
    setStatus("saving");
    try {
      await onSaveRef.current(next);
      saved.current = next;
      // Typing may have moved on while this was in flight; that has its own save queued.
      setStatus(latest.current === next ? "saved" : "saving");
    } catch {
      setStatus("error");
    }
  }, []);

  // Write shortly after typing stops.
  useEffect(() => {
    latest.current = text;
    if (text === saved.current) return;
    const timer = setTimeout(() => void save(text), AUTOSAVE_MS);
    return () => clearTimeout(timer);
  }, [text, save]);

  // Leaving the page with unsaved typing still saves it.
  useEffect(
    () => () => {
      if (latest.current !== saved.current) void onSaveRef.current(latest.current);
    },
    []
  );

  return (
    <Card className={cn("border-border/60 flex flex-col", className)}>
      <CardHeader className="pb-2 flex-row items-center justify-between space-y-0">
        <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
          <NotebookPen size={14} strokeWidth={1.5} /> Notes
        </CardTitle>
        <span
          role="status"
          aria-live="polite"
          className={cn(
            "flex items-center gap-1 text-[11px] transition-opacity",
            status === "idle" ? "opacity-0" : "opacity-100",
            status === "error" ? "text-chart-red" : "text-muted-foreground"
          )}
        >
          {status === "saving" && (<><Loader2 size={11} className="animate-spin" /> Saving…</>)}
          {status === "saved" && (<><Check size={11} /> Saved</>)}
          {status === "error" && (<><TriangleAlert size={11} /> Couldn't save, still trying as you type</>)}
        </span>
      </CardHeader>
      <CardContent className="flex-1 flex flex-col pt-0">
        <Textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
          onBlur={() => void save(text)}
          placeholder="Anything worth remembering: who else is involved, what was agreed, where the paperwork is…"
          aria-label="Notes"
          className="min-h-[140px] flex-1 resize-y bg-background text-sm leading-relaxed"
        />
        <p className="mt-2 text-[11px] text-muted-foreground">Saves automatically as you type.</p>
      </CardContent>
    </Card>
  );
}