"use client";

import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Building2, Loader2, ArrowLeft, Check } from "lucide-react";
import { useToast } from "@/components/ui/toast";

const benefits = [
  "AI-powered buyer matching",
  "Automated email & SMS outreach",
  "Buyer portal with NDA signing",
  "Real-time engagement tracking",
];

export default function SignupPage() {
  const router = useRouter();
  const { addToast } = useToast();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    name: "",
    company: "",
    email: "",
    password: "",
  });
  const [error, setError] = useState("");

  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    if (formData.password.length < 6) {
      setError("Password must be at least 6 characters.");
      setLoading(false);
      return;
    }

    // Demo mode: simulate signup
    await new Promise((resolve) => setTimeout(resolve, 1000));
    addToast({ type: "success", title: "Account Created!", description: "Welcome to CREdispo. Let's set up your first deal." });
    router.push("/dashboard");
  };

  return (
    <div className="min-h-screen flex bg-gradient-to-br from-navy-50 to-white">
      {/* Left panel - Benefits */}
      <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-navy-900 via-navy-800 to-navy-950 p-12 flex-col justify-center relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "radial-gradient(circle at 30% 50%, rgba(251, 191, 36, 0.2) 0%, transparent 50%)",
            }}
          />
        </div>

        <div className="relative z-10 max-w-md">
          <Link href="/" className="flex items-center gap-2 mb-12">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-navy-700">
              <Building2 className="h-5 w-5 text-gold-400" />
            </div>
            <span className="text-2xl font-bold text-white">
              CRE<span className="text-gold-400">dispo</span>
            </span>
          </Link>

          <h2 className="text-3xl font-bold text-white mb-4">
            Start closing deals
            <br />
            <span className="text-gold-400">faster today.</span>
          </h2>

          <p className="text-navy-300 mb-8 leading-relaxed">
            Join 500+ CRE professionals who&apos;ve automated their disposition workflow with CREdispo.
          </p>

          <div className="space-y-4">
            {benefits.map((benefit) => (
              <div key={benefit} className="flex items-center gap-3">
                <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gold-500/20">
                  <Check className="h-3.5 w-3.5 text-gold-400" />
                </div>
                <span className="text-sm text-navy-200">{benefit}</span>
              </div>
            ))}
          </div>

          <div className="mt-12 p-4 rounded-xl bg-white/5 border border-white/10">
            <p className="text-sm text-navy-300 italic">
              &ldquo;CREdispo cut our disposition time from weeks to days. The matching algorithm is 
              incredibly accurate.&rdquo;
            </p>
            <p className="text-xs text-gold-400 mt-2 font-medium">
              — Sarah Chen, VP Acquisitions, Pacific Capital
            </p>
          </div>
        </div>
      </div>

      {/* Right panel - Form */}
      <div className="flex-1 flex items-center justify-center p-4 sm:p-8">
        <div className="w-full max-w-md">
          <Link
            href="/"
            className="inline-flex items-center gap-1 text-sm text-navy-500 hover:text-navy-700 mb-8 transition-colors"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to home
          </Link>

          <Card className="border-navy-100 shadow-lg">
            <CardHeader className="text-center pb-2">
              <div className="flex justify-center mb-4 lg:hidden">
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-navy-800">
                  <Building2 className="h-6 w-6 text-gold-400" />
                </div>
              </div>
              <CardTitle className="text-2xl">Create your account</CardTitle>
              <CardDescription>Start your 14-day free trial — no credit card required</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                {error && (
                  <div className="rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
                    {error}
                  </div>
                )}

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="name">Full Name *</Label>
                    <Input
                      id="name"
                      placeholder="John Doe"
                      value={formData.name}
                      onChange={(e) => handleChange("name", e.target.value)}
                      className="mt-1.5"
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="company">Company</Label>
                    <Input
                      id="company"
                      placeholder="Doe Brokerage"
                      value={formData.company}
                      onChange={(e) => handleChange("company", e.target.value)}
                      className="mt-1.5"
                    />
                  </div>
                </div>

                <div>
                  <Label htmlFor="email">Email *</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="john@brokerage.com"
                    value={formData.email}
                    onChange={(e) => handleChange("email", e.target.value)}
                    className="mt-1.5"
                    required
                  />
                </div>

                <div>
                  <Label htmlFor="password">Password *</Label>
                  <Input
                    id="password"
                    type="password"
                    placeholder="Min 6 characters"
                    value={formData.password}
                    onChange={(e) => handleChange("password", e.target.value)}
                    className="mt-1.5"
                    required
                    minLength={6}
                  />
                </div>

                <Button type="submit" variant="gold" className="w-full" size="lg" disabled={loading}>
                  {loading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Creating account...
                    </>
                  ) : (
                    "Start Free Trial"
                  )}
                </Button>

                <p className="text-xs text-center text-navy-400">
                  By signing up, you agree to our Terms of Service and Privacy Policy.
                </p>

                <div className="text-center">
                  <p className="text-sm text-navy-500">
                    Already have an account?{" "}
                    <Link href="/login" className="font-medium text-gold-600 hover:text-gold-700">
                      Log in
                    </Link>
                  </p>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
