"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";

interface Props {
  projectSlug: string;
  projectName: string;
}

export function InvestorSignup({ projectSlug, projectName }: Props) {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [tier, setTier] = useState("");
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
  const [errorMsg, setErrorMsg] = useState("");

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("sending");
    setErrorMsg("");
    try {
      const resp = await fetch("/api/invest/signup", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ projectSlug, email, name, tier }),
      });
      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || "Failed to sign up");
      setStatus("sent");
    } catch (err) {
      setStatus("error");
      setErrorMsg(err instanceof Error ? err.message : "Unknown error");
    }
  }

  if (status === "sent") {
    return (
      <Card>
        <CardContent className="p-8 text-center">
          <div className="text-4xl mb-3">✓</div>
          <h3 className="text-xl font-semibold">You’re on the list.</h3>
          <p className="mt-2 text-muted-foreground">
            We’ll email <strong>{email}</strong> the moment {projectName}’s Form C is live and the raise opens.
          </p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardContent className="p-6">
        <form onSubmit={onSubmit} className="space-y-3">
          <div className="grid gap-3 md:grid-cols-2">
            <div>
              <label className="text-xs text-muted-foreground">Name</label>
              <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" required />
            </div>
            <div>
              <label className="text-xs text-muted-foreground">Email</label>
              <Input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@example.com"
                required
              />
            </div>
          </div>
          <div>
            <label className="text-xs text-muted-foreground">Interest level (optional)</label>
            <select
              value={tier}
              onChange={(e) => setTier(e.target.value)}
              className="mt-1 w-full h-10 rounded-md border border-input bg-background px-3 text-sm"
            >
              <option value="">No commitment</option>
              <option value="$100-$500">$100–$500</option>
              <option value="$500-$1,000">$500–$1,000</option>
              <option value="$1,000-$5,000">$1,000–$5,000</option>
              <option value="$5,000+">$5,000+</option>
              <option value="Accredited">I’m an accredited investor</option>
            </select>
          </div>
          <Button type="submit" variant="brand" className="w-full" disabled={status === "sending"}>
            {status === "sending" ? "Adding you to the list..." : `Notify me when ${projectName} opens`}
          </Button>
          {errorMsg && (
            <div className="rounded-md border border-destructive/20 bg-destructive/5 p-3 text-xs text-destructive">
              {errorMsg}
            </div>
          )}
          <p className="text-[11px] text-muted-foreground">
            This is interest-collection only, not an offer to sell securities. Investments will be made via a FINRA-registered intermediary per SEC Reg CF rules.
          </p>
        </form>
      </CardContent>
    </Card>
  );
}