import { useEffect, useState } from 'react';
import { Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { RichText } from '../RichText';

/**
 * Writing the words in a Free Text component.
 *
 * ── Why a dialog and not in-place on the page ──
 *
 * Editing inside the frame is the obvious idea and it is a much bigger one: the editor's toolbar would
 * have to live in a document the site owns, the site's own typography would fight it, and every
 * keystroke would cross into another document. The dialog is where the plugin already has a working
 * editor, and it costs a modal instead of a rewrite.
 *
 * It is a real limitation and worth naming: what you type is not laid out in the page until you save.
 * The preview reloads immediately after, so the loop is short — but it is a loop rather than direct
 * manipulation, and direct manipulation is what a page builder eventually wants.
 */
export const FreeTextDialog = ({
  open,
  busy,
  initial,
  onCancel,
  onSave,
}: {
  open: boolean;
  busy: boolean;
  /** What is stored today. Empty for a component that was only just added. */
  initial: string;
  onCancel: () => void;
  onSave: (html: string) => void;
}) => {
  const [html, setHtml] = useState(initial);

  // Reset from the stored value on every open, so a cancelled edit is genuinely cancelled rather than
  // waiting in the box for the next time somebody opens it.
  useEffect(() => {
    if (open) setHtml(initial);
  }, [open, initial]);

  return (
    <Dialog open={open} onOpenChange={(next) => !next && onCancel()}>
      <DialogContent className="sm:max-w-3xl">
        <DialogHeader>
          <DialogTitle>Text</DialogTitle>
        </DialogHeader>

        {/* Keyed on `initial`, so opening a DIFFERENT component rebuilds the editor rather than
            reusing one still holding the last component's document. */}
        <div className="min-h-0 max-h-[60vh] overflow-auto">
          <RichText key={initial} value={html} onChange={setHtml} placeholder="Write something." />
        </div>

        <DialogFooter>
          <Button variant="ghost" onClick={onCancel} disabled={busy}>
            Cancel
          </Button>
          {/* No disabled-when-empty here, unlike the section name: empty text is a legitimate thing to
              save. Somebody clearing a paragraph is deleting its words, not abandoning the edit. */}
          <Button onClick={() => onSave(html)} disabled={busy}>
            {busy && <Loader2 className="size-3.5 animate-spin" />}
            Save text
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};