"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

const consumerDomains = [
  "gmail.com",
  "yahoo.com",
  "hotmail.com",
  "outlook.com",
  "icloud.com",
  "aol.com",
  "proton.me",
  "protonmail.com",
];

type Status = "idle" | "loading" | "success" | "error";

export function RequestForm() {
  const [status, setStatus] = useState<Status>("idle");
  const [error, setError] = useState("");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError("");
    const form = e.currentTarget;
    const data = new FormData(form);
    const name = String(data.get("name") || "").trim();
    const email = String(data.get("email") || "").trim();
    const company = String(data.get("company") || "").trim();
    const role = String(data.get("role") || "").trim();
    const outcomes = String(data.get("outcomes") || "").trim();

    if (!name || !email || !company || !role || !outcomes) {
      setStatus("error");
      setError("Every field is required. Alignment begins with completeness.");
      return;
    }

    const domain = email.split("@")[1]?.toLowerCase();
    if (!domain || !email.includes("@")) {
      setStatus("error");
      setError("Please provide an institutional email.");
      return;
    }
    if (consumerDomains.includes(domain)) {
      setStatus("error");
      setError(
        "Consumer inboxes cannot attest PPoE. Please use your institutional email."
      );
      return;
    }

    setStatus("loading");
    await new Promise((r) => setTimeout(r, 900));
    setStatus("success");
  }

  if (status === "success") {
    return (
      <div className="rounded-3xl border border-fuchsia-400/30 bg-gradient-to-br from-violet-500/20 to-cyan-500/10 p-8">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-primary">
          Request received
        </p>
        <h2 className="mt-3 font-heading text-3xl text-foreground">
          An outcomes partner will be in touch.
        </h2>
        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
          Fit is a mutual decision. If your operating thesis, your lake, and
          our fabric are prepared to compound, we will schedule a working
          session — not a demo.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="space-y-5" noValidate>
      <Field id="name" label="Full name" autoComplete="name" />
      <Field
        id="email"
        label="Institutional email"
        type="email"
        autoComplete="email"
      />
      <Field id="company" label="Institution" autoComplete="organization" />
      <Field id="role" label="Role" placeholder="Chief Transformation Officer" />
      <div className="space-y-2">
        <Label htmlFor="outcomes">
          What outcomes are you looking to operationalize?
        </Label>
        <Textarea
          id="outcomes"
          name="outcomes"
          rows={5}
          className="min-h-28 text-sm"
          placeholder="Be specific about the thesis, not the tools. The fabric will meet you there."
        />
      </div>
      {status === "error" && error ? (
        <p className="text-sm text-destructive" role="alert">
          {error}
        </p>
      ) : null}
      <Button
        type="submit"
        disabled={status === "loading"}
        className="h-11 w-full px-5 sm:w-auto"
      >
        {status === "loading" ? "Attesting request…" : "Request access"}
      </Button>
    </form>
  );
}

function Field({
  id,
  label,
  type = "text",
  autoComplete,
  placeholder,
}: {
  id: string;
  label: string;
  type?: string;
  autoComplete?: string;
  placeholder?: string;
}) {
  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{label}</Label>
      <Input
        id={id}
        name={id}
        type={type}
        autoComplete={autoComplete}
        placeholder={placeholder}
        className="h-10"
      />
    </div>
  );
}