"use client";

import * as React from "react";
import Link from "next/link";
import { Breadcrumb } from "@/components/patterns/Breadcrumb";
import { Input } from "@/components/ui/Input";
import { Textarea } from "@/components/ui/Textarea";
import { RadioGroup } from "@/components/ui/Radio";
import { Button } from "@/components/ui/Button";
import { Alert } from "@/components/ui/Alert";
import { Honeypot } from "@/components/ui/Honeypot";
import { SuccessState } from "@/components/states/SuccessState";
import { Card, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/Card";
import { LinkButton } from "@/components/ui/LinkButton";
import { COMPANY_EMAILS } from "@/lib/email";
import { submitForm } from "@/lib/submit-form";

export default function ContactPage() {
  const [submitted, setSubmitted] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setIsLoading(true);
    setError(null);
    const result = await submitForm("/api/contact", new FormData(e.currentTarget));
    setIsLoading(false);
    if (result.success) {
      setSubmitted(true);
    } else {
      setError(result.error);
    }
  }

  if (submitted) {
    return (
      <div className="container py-16">
        <SuccessState
          title="Message received."
          description="We'll respond via the email address you provided within three business days."
          actionLabel="Return Home"
          actionHref="/"
        />
      </div>
    );
  }

  return (
    <div className="container py-16">
      <Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Contact" }]} />

      <h1 className="mt-6 font-display text-display-md font-normal text-ink">Contact</h1>
      <p className="mt-4 max-w-2xl text-body-lg text-ink-soft">
        For media, partnership, careers, or general inquiries. If you&apos;re an organization raising capital or an
        investor or partner looking to register interest, use the dedicated forms below — they route directly into
        our structured intake process.
      </p>
      <p className="mt-2 max-w-2xl text-body-sm text-slate">
        Prefer email? Reach us directly at{" "}
        <a href={`mailto:${COMPANY_EMAILS.general}`} className="text-primary underline underline-offset-4">
          {COMPANY_EMAILS.general}
        </a>
        .
      </p>

      <h2 className="sr-only">Dedicated Forms</h2>
      <div className="mt-10 grid gap-6 sm:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Raising Capital</CardTitle>
            <CardDescription>Startups, MSMEs, SMEs, NGOs, trusts, and social enterprises.</CardDescription>
          </CardHeader>
          <CardFooter>
            <LinkButton href="/apply/organization" variant="secondary" size="md">
              Apply to Raise
            </LinkButton>
          </CardFooter>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Investing or Partnering</CardTitle>
            <CardDescription>Investors, CSR programs, grant providers, and other funding partners.</CardDescription>
          </CardHeader>
          <CardFooter>
            <LinkButton href="/apply/investor-or-partner" variant="secondary" size="md">
              Apply as an Investor or Partner
            </LinkButton>
          </CardFooter>
        </Card>
      </div>

      <div className="mt-16 max-w-2xl">
        <h2 className="font-display text-h2 font-normal text-ink">Everything Else</h2>
        <p className="mt-3 text-body-md text-ink-soft">
          Media inquiries, partnership questions, careers, or anything else — send us a message and we&apos;ll
          respond via the email address you provide.
        </p>

        {error && (
          <Alert variant="error" title="Couldn't send your message" className="mt-6">
            {error}
          </Alert>
        )}

        <form onSubmit={handleSubmit} className="mt-8 flex flex-col gap-6">
          <Honeypot />
          <Input label="Name" name="name" required placeholder="Your full name" />

          <Input label="Organization" name="organization" placeholder="Optional" />

          <Input label="Email" name="email" type="email" required placeholder="you@organization.com" />

          <RadioGroup
            legend="I am a..."
            name="inquiryType"
            defaultValue="organization"
            options={[
              { value: "organization", label: "Organization" },
              { value: "investor-or-partner", label: "Investor or Partner" },
              { value: "media-or-other", label: "Media / Other" },
            ]}
          />

          <Textarea
            label="Message"
            name="message"
            required
            placeholder="What can we help with?"
          />

          <Button type="submit" variant="primary" size="lg" isLoading={isLoading} className="self-start">
            Send Message
          </Button>
        </form>
      </div>

      <p className="mt-16 max-w-2xl text-body-sm text-ink-soft">
        Prefer to explore first? See{" "}
        <Link href="/how-it-works" className="text-primary underline underline-offset-4">
          How It Works
        </Link>{" "}
        or read our{" "}
        <Link href="/faq" className="text-primary underline underline-offset-4">
          FAQ
        </Link>
        .
      </p>
    </div>
  );
}