import { useMemo, useState } from "react";
import { OutlineButton } from "@/components/outline-button";
import { grants, taglines } from "@/lib/content";

export function GrantLetter() {
  const [door, setDoor] = useState(grants[0].program);
  const [name, setName] = useState("");
  const [org, setOrg] = useState("");
  const [copied, setCopied] = useState(false);

  const program = grants.find((g) => g.program === door) ?? grants[0];

  const letter = useMemo(() => {
    const who = name.trim() || "[Name]";
    const house = org.trim() || "[Agency / office]";
    return `Dear ${house},

I am writing from the Perlas Foundation in Los Angeles to inquire about a single pilot under ${program.door}.

${taglines.federal}

The named program is ${program.program}. What we actually deliver: ${program.deliver}

We are sequencing EIN and 501(c)(3) determination first, then one pilot grant — not five frontiers. We do not write height, dress size, race, or genetic-fitness language into policy, grants, or bylaws. We do not ask for a weapons catalog or a city charter. Adult artists who choose this house receive safety, pay, files, health access, and a path that does not require a private sponsor.

I would be grateful for the correct program officer and any current notice of funding that matches this work.

Respectfully,
${who}
Perlas Foundation
Los Angeles`;
  }, [name, org, program]);

  async function copy() {
    try {
      await navigator.clipboard.writeText(letter);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1800);
    } catch {
      setCopied(false);
    }
  }

  return (
    <div className="grid gap-10 lg:grid-cols-2">
      <div className="grid gap-5">
        <label className="grid gap-2">
          <span className="font-display text-xs font-medium uppercase tracking-wide text-muted">
            Door
          </span>
          <select
            value={door}
            onChange={(e) => setDoor(e.target.value)}
            className="h-11 border border-line bg-bg px-3 font-display text-sm uppercase tracking-wide outline-none focus:border-fg"
          >
            {grants.map((g) => (
              <option key={g.program} value={g.program}>
                {g.door} — {g.program}
              </option>
            ))}
          </select>
        </label>
        <label className="grid gap-2">
          <span className="font-display text-xs font-medium uppercase tracking-wide text-muted">
            Your name
          </span>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="h-11 border border-line bg-bg px-3 text-sm outline-none focus:border-fg"
          />
        </label>
        <label className="grid gap-2">
          <span className="font-display text-xs font-medium uppercase tracking-wide text-muted">
            Recipient office
          </span>
          <input
            value={org}
            onChange={(e) => setOrg(e.target.value)}
            placeholder="NEA · CA Arts · DOL"
            className="h-11 border border-line bg-bg px-3 text-sm outline-none focus:border-fg"
          />
        </label>
        <OutlineButton onClick={copy}>{copied ? "Copied" : "Copy letter"}</OutlineButton>
      </div>
      <pre className="whitespace-pre-wrap border border-line bg-bg px-5 py-6 font-sans text-sm leading-body text-fg/90">
        {letter}
      </pre>
    </div>
  );
}