import { Arrow } from "../../lib/primitives.jsx";

const ROLES = [
  { value: "smb",        label: "Small business owner",  hint: "I run a shop, salon, studio, café…" },
  { value: "freelancer", label: "Freelancer / agency",   hint: "I build tools for clients" },
  { value: "ideaperson", label: "I just have an idea",   hint: "First-time builder, no code" },
];

const SOURCES = ["Reddit", "Twitter / X", "TikTok", "YouTube", "A friend", "Google", "Something else"];

export default function BetaForm({ form, setForm, submitting, onSubmit }) {
  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const valid = /\S+@\S+\.\S+/.test(form.email) && form.build.trim().length > 4;

  const handle = (e) => {
    e.preventDefault();
    if (!valid || submitting) return;
    onSubmit();
  };

  return (
    <form onSubmit={handle} noValidate
          className="relative flex flex-col gap-7 py-9 px-5 sm:px-11 rounded-[22px] border border-hairline backdrop-blur-xl"
          style={{
            background: "linear-gradient(180deg, oklch(0.20 0.009 60 / 0.6), oklch(0.17 0.008 60 / 0.6))",
            boxShadow: "0 30px 80px -20px oklch(0 0 0 / 0.6)",
          }}>
      <span aria-hidden="true" className="absolute top-0 left-0 right-0 h-px opacity-60"
            style={{ background: "linear-gradient(90deg, transparent, var(--c-accent), transparent)" }} />

      <Field num="01" title="What's your email?" hint="So we can send you the invite when it's your turn.">
        <input
          type="email" required
          className="f-input" placeholder="you@somewhere.com" autoComplete="email"
          value={form.email} onChange={(e) => update("email", e.target.value)}
        />
      </Field>

      <Field num="02" title="What should we call you?" hint="Optional, but nice to know.">
        <input
          type="text" className="f-input" placeholder="First name or handle" autoComplete="given-name"
          value={form.name} onChange={(e) => update("name", e.target.value)}
        />
      </Field>

      <Field num="03" title="What's the first thing you want to build?"
             hint="Free-form. The vibe matters more than the spec." required>
        <div className="rounded-xl border border-hairline overflow-hidden transition-all"
             style={{ background: "oklch(0.16 0.008 60 / 0.8)" }}>
          <textarea
            rows={4}
            placeholder="A booking site for my dog grooming business with reminders, payments and a wait list…"
            className="w-full border-0 bg-transparent text-fg text-[16px] leading-[1.5] py-3.5 px-4 pb-2.5 outline-none resize-y min-h-[110px] placeholder:text-fg-faint"
            value={form.build} onChange={(e) => update("build", e.target.value)}
          />
          <div className="flex items-center justify-between px-3.5 py-2.5 border-t border-hairline font-mono text-[11px] text-fg-faint tracking-[0.02em]">
            <span className="text-accent">{form.build.length > 0 ? `${form.build.length} chars` : "go wild"}</span>
            <span>⌘ + Enter to submit the form</span>
          </div>
        </div>
      </Field>

      <Field num="04" title="Which one are you?">
        <div className="grid grid-cols-1 gap-2">
          {ROLES.map((r) => (
            <button key={r.value} type="button"
              className={[
                "relative text-left py-3.5 pr-12 pl-4 rounded-xl border flex flex-col gap-0.5 transition-all",
                form.role === r.value
                  ? "border-accent bg-[oklch(0.20_0.04_35/0.4)] shadow-[0_0_0_3px_oklch(0.74_0.175_35/0.1)]"
                  : "border-hairline hover:border-hairline-2",
              ].join(" ")}
              style={{ background: form.role !== r.value ? "oklch(0.16 0.008 60 / 0.6)" : undefined }}
              onClick={() => update("role", r.value)}
            >
              <span className="text-[15px] font-medium text-fg">{r.label}</span>
              <span className="text-[13px] text-fg-mute">{r.hint}</span>
              <span className={[
                "absolute top-1/2 right-4 -translate-y-1/2 w-5 h-5 rounded-full grid place-items-center transition-all",
                form.role === r.value
                  ? "bg-accent border-accent text-accent-fg"
                  : "border-[1.5px] border-hairline-2 bg-transparent",
              ].join(" ")}>
                <svg width="12" height="12" viewBox="0 0 14 14" fill="none"
                     className={form.role === r.value ? "opacity-100" : "opacity-0"}>
                  <path d="M3 7.2 5.8 10 11 4.2" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
            </button>
          ))}
        </div>
      </Field>

      <Field num="05" title="How'd you hear about us?" hint="Optional. Helps us know what's working.">
        <div className="flex flex-wrap gap-2">
          {SOURCES.map((s) => (
            <button key={s} type="button"
              onClick={() => update("source", form.source === s ? "" : s)}
              className={[
                "px-3.5 py-2 rounded-full border text-[13px] transition-colors",
                form.source === s
                  ? "border-accent bg-[oklch(0.20_0.04_35/0.4)] text-fg"
                  : "border-hairline bg-[oklch(0.16_0.008_60/0.6)] text-fg-dim hover:border-hairline-2 hover:text-fg",
              ].join(" ")}
            >{s}</button>
          ))}
        </div>
      </Field>

      <div className="flex flex-col items-center gap-3.5 mt-2">
        <button type="submit" disabled={!valid || submitting}
                className="btn btn-primary w-full max-w-[320px] h-14 text-base">
          {submitting ? (<><Spinner /> Sending…</>) : (<>Request my invite <Arrow /></>)}
        </button>
        <p className="font-mono text-[11px] text-fg-faint tracking-[0.03em] text-center text-balance">
          No credit card · No spam, just one email when you're in · Unsubscribe anytime
        </p>
      </div>

      {/* Component-level CSS for the field inputs (Tailwind doesn't cover the
          custom focus glow shadow cleanly). */}
      <style>{`
        .f-input {
          width: 100%; box-sizing: border-box;
          padding: 14px 16px;
          background: oklch(0.16 0.008 60 / 0.8);
          border: 1px solid var(--c-hairline);
          border-radius: 12px;
          color: var(--c-fg);
          font: 16px/1.5 'Geist', system-ui, sans-serif;
          outline: none;
          transition: border-color .15s, background .15s, box-shadow .15s;
        }
        .f-input::placeholder { color: var(--c-fg-faint); }
        .f-input:focus,
        form > div > div:focus-within {
          border-color: oklch(0.74 0.175 35 / 0.65);
          background: oklch(0.18 0.009 60 / 0.95);
          box-shadow: 0 0 0 3px oklch(0.74 0.175 35 / 0.15), 0 0 30px -10px var(--c-accent-glow);
        }
      `}</style>
    </form>
  );
}

function Field({ num, title, hint, required, children }) {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-start gap-3.5">
        <span className="font-mono text-[11px] tracking-[0.1em] text-fg-faint px-2 py-1 border border-hairline rounded-md shrink-0 mt-0.5">
          {num}{required && <em className="not-italic text-accent ml-px">*</em>}
        </span>
        <div className="flex-1">
          <div className="text-[17px] font-medium text-fg tracking-[-0.01em]">{title}</div>
          {hint && <div className="mt-0.5 text-[13px] text-fg-mute">{hint}</div>}
        </div>
      </div>
      <div>{children}</div>
    </div>
  );
}

function Spinner() {
  return (
    <span className="w-4 h-4 rounded-full border-2 inline-block"
          style={{
            borderColor: "oklch(0 0 0 / 0.2)",
            borderTopColor: "var(--c-accent-fg)",
            animation: "spin .9s linear infinite",
          }} />
  );
}
