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

const interests = [
  "Grant inquiry",
  "Donate / Patreon",
  "Culture center",
  "Talent / Bill of Rights",
  "Lillith Saturday",
  "Investor / family office",
  "Curriculum license",
  "Other",
];

const STORAGE_KEY = "perlas-inquiries";

export function InquiryForm({ defaultInterest }: { defaultInterest?: string }) {
  const [sent, setSent] = useState(false);

  function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    const record = {
      at: new Date().toISOString(),
      name: String(data.get("name") ?? ""),
      email: String(data.get("email") ?? ""),
      org: String(data.get("org") ?? ""),
      interest: String(data.get("interest") ?? ""),
      message: String(data.get("message") ?? ""),
    };
    try {
      const prev = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]") as unknown[];
      localStorage.setItem(STORAGE_KEY, JSON.stringify([record, ...prev].slice(0, 40)));
    } catch {
      /* ignore quota */
    }
    setSent(true);
  }

  if (sent) {
    return (
      <div className="border border-line px-6 py-10">
        <p className="font-display text-kicker font-medium uppercase tracking-wide text-muted">
          Transmission received
        </p>
        <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
          We have the note.
        </h2>
        <p className="mt-4 max-w-md text-body text-muted">
          Desks do not write back. A person will. If this is a Saturday hold, keep
          the date until you hear.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="grid gap-6">
      <Field label="Name" name="name" required autoComplete="name" />
      <Field label="Email" name="email" type="email" required autoComplete="email" />
      <Field label="Organization" name="org" autoComplete="organization" />
      <label className="grid gap-2">
        <span className="font-display text-xs font-medium uppercase tracking-wide text-muted">
          Interest
        </span>
        <select
          name="interest"
          defaultValue={defaultInterest ?? interests[0]}
          className="h-11 border border-line bg-bg px-3 font-display text-sm uppercase tracking-wide text-fg outline-none focus:border-fg"
        >
          {interests.map((opt) => (
            <option key={opt} value={opt}>
              {opt}
            </option>
          ))}
          {grants.map((g) => (
            <option key={g.program} value={g.program}>
              {g.program}
            </option>
          ))}
        </select>
      </label>
      <label className="grid gap-2">
        <span className="font-display text-xs font-medium uppercase tracking-wide text-muted">
          Message
        </span>
        <textarea
          name="message"
          required
          rows={6}
          className="border border-line bg-bg px-3 py-3 text-sm leading-body text-fg outline-none focus:border-fg"
        />
      </label>
      <OutlineButton type="submit">Send</OutlineButton>
    </form>
  );
}

function Field({
  label,
  name,
  type = "text",
  required,
  autoComplete,
}: {
  label: string;
  name: string;
  type?: string;
  required?: boolean;
  autoComplete?: string;
}) {
  return (
    <label className="grid gap-2">
      <span className="font-display text-xs font-medium uppercase tracking-wide text-muted">
        {label}
      </span>
      <input
        name={name}
        type={type}
        required={required}
        autoComplete={autoComplete}
        className="h-11 border border-line bg-bg px-3 font-display text-sm tracking-wide text-fg outline-none focus:border-fg"
      />
    </label>
  );
}