"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";
import { DataConsentField } from "@/components/forms/DataConsentField";
import { dataConsent } from "@/content/consent";

export function PartnershipInquiryForm() {
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
  const [error, setError] = useState("");
  const [consent, setConsent] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!consent) {
      setError(dataConsent.errorMessage);
      return;
    }

    setStatus("loading");
    setError("");

    const form = e.currentTarget;
    const data = new FormData(form);

    try {
      const res = await fetch("/api/inquiry", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          intent: "partnership",
          firstName: data.get("firstName"),
          lastName: data.get("lastName"),
          email: data.get("email"),
          company: data.get("company"),
          message: data.get("message") || undefined,
          consent: true,
        }),
      });
      const json = await res.json();
      if (!res.ok || !json.ok) {
        throw new Error(json.error || "Something went wrong");
      }
      setStatus("success");
      form.reset();
      setConsent(false);
    } catch (err) {
      setStatus("error");
      setError(err instanceof Error ? err.message : "Failed to send");
    }
  }

  return (
    <div className="topo-card-surface rounded-2xl bg-white p-6 text-[#1a5c38] shadow-xl md:p-8">
      <h3 className="text-xl font-bold text-foreground">Request Partnership Information</h3>
      <form onSubmit={onSubmit} className="mt-6 space-y-4">
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="firstName">
              First name <span className="text-destructive">*</span>
            </Label>
            <Input id="firstName" name="firstName" required placeholder="Jane" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="lastName">
              Last name <span className="text-destructive">*</span>
            </Label>
            <Input id="lastName" name="lastName" required placeholder="Doe" />
          </div>
        </div>
        <div className="space-y-2">
          <Label htmlFor="partnership-email">
            Email <span className="text-destructive">*</span>
          </Label>
          <Input
            id="partnership-email"
            name="email"
            type="email"
            required
            placeholder="you@company.com"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="company">
            Company name <span className="text-destructive">*</span>
          </Label>
          <Input id="company" name="company" required placeholder="Your organization" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="message">Message (optional)</Label>
          <Textarea
            id="message"
            name="message"
            rows={3}
            placeholder="Tell us about your partnership goals…"
          />
        </div>
        <DataConsentField
          id="partnership-consent"
          checked={consent}
          onCheckedChange={setConsent}
        />
        {error && <p className="text-sm text-destructive">{error}</p>}
        {status === "success" && (
          <p className="text-sm text-[#1a5c38]">
            Thank you! We received your request and will be in touch.
          </p>
        )}
        <Button
          type="submit"
          className="w-full rounded-lg bg-[#ffb300] py-6 text-base font-semibold text-[#0f0404] hover:bg-[#ffb300]/90"
          disabled={status === "loading"}
        >
          {status === "loading" ? "Sending…" : "Next"}
        </Button>
      </form>
    </div>
  );
}