"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { useAuth } from "@/context/AuthContext";

export default function SignupPage() {
  const router = useRouter();
  const { signup } = useAuth();
  const [error, setError] = useState("");
  const [clientType, setClientType] = useState<"individual" | "business">("individual");

  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <div className="container mx-auto px-4 py-16 lg:px-8">
        <form
          onSubmit={async (event) => {
            event.preventDefault();
            setError("");
            const formData = new FormData(event.currentTarget);

            const payload = {
              username: String(formData.get("username") || ""),
              first_name: String(formData.get("first_name") || ""),
              last_name: String(formData.get("last_name") || ""),
              email: String(formData.get("email") || ""),
              phone: String(formData.get("phone") || ""),
              password: String(formData.get("password") || ""),
              client_type: clientType,
              company_name: clientType === "business" ? String(formData.get("company_name") || "") : null,
              tax_id: clientType === "business" ? String(formData.get("tax_id") || "") : null,
              preferred_contact_method: String(formData.get("preferred_contact_method") || "phone") as "phone" | "email" | "sms",
              billing_address: {
                line1: String(formData.get("billing_line1") || ""),
                line2: String(formData.get("billing_line2") || ""),
                city: String(formData.get("billing_city") || ""),
                state: String(formData.get("billing_state") || ""),
                postal_code: String(formData.get("billing_postal_code") || ""),
                country: String(formData.get("billing_country") || "IN"),
              },
              shipping_address: {
                line1: String(formData.get("shipping_line1") || ""),
                line2: String(formData.get("shipping_line2") || ""),
                city: String(formData.get("shipping_city") || ""),
                state: String(formData.get("shipping_state") || ""),
                postal_code: String(formData.get("shipping_postal_code") || ""),
                country: String(formData.get("shipping_country") || "IN"),
              },
            };

            const createdUser = await signup(payload);
            if (!createdUser) {
              setError("Signup failed. Check fields or use another email/username.");
              return;
            }
            router.push("/");
          }}
          className="mx-auto max-w-4xl rounded-xl border border-border bg-card p-6"
        >
          <h1 className="text-2xl font-bold">Create Account</h1>
          <p className="mt-2 text-xs text-muted-foreground">Register new customer with profile and addresses.</p>

          <div className="mt-5 grid gap-3 sm:grid-cols-2">
            <input name="username" required placeholder="Username" className="rounded border border-border bg-background px-3 py-2 text-sm" />
            <input name="email" type="email" required placeholder="Email" className="rounded border border-border bg-background px-3 py-2 text-sm" />
            <input name="first_name" required placeholder="First Name" className="rounded border border-border bg-background px-3 py-2 text-sm" />
            <input name="last_name" required placeholder="Last Name" className="rounded border border-border bg-background px-3 py-2 text-sm" />
            <input name="phone" required placeholder="Phone" className="rounded border border-border bg-background px-3 py-2 text-sm" />
            <input name="password" type="password" required placeholder="Password" className="rounded border border-border bg-background px-3 py-2 text-sm" />
          </div>

          <div className="mt-4 grid gap-3 sm:grid-cols-3">
            <select value={clientType} onChange={(e) => setClientType(e.target.value as "individual" | "business")} className="rounded border border-border bg-background px-3 py-2 text-sm">
              <option value="individual">Individual</option>
              <option value="business">Business</option>
            </select>
            <select name="preferred_contact_method" defaultValue="phone" className="rounded border border-border bg-background px-3 py-2 text-sm">
              <option value="phone">Phone</option>
              <option value="email">Email</option>
              <option value="sms">SMS</option>
            </select>
            <div />
            {clientType === "business" && (
              <>
                <input name="company_name" placeholder="Company Name" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                <input name="tax_id" placeholder="Tax ID" className="rounded border border-border bg-background px-3 py-2 text-sm" />
              </>
            )}
          </div>

          <div className="mt-6 grid gap-6 lg:grid-cols-2">
            <div>
              <h2 className="mb-3 text-sm font-semibold">Billing Address</h2>
              <div className="grid gap-3">
                <input name="billing_line1" required placeholder="Line 1" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                <input name="billing_line2" placeholder="Line 2" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                <div className="grid gap-3 sm:grid-cols-2">
                  <input name="billing_city" required placeholder="City" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                  <input name="billing_state" required placeholder="State" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                </div>
                <div className="grid gap-3 sm:grid-cols-2">
                  <input name="billing_postal_code" required placeholder="Postal Code" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                  <input name="billing_country" defaultValue="IN" required placeholder="Country" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                </div>
              </div>
            </div>
            <div>
              <h2 className="mb-3 text-sm font-semibold">Shipping Address</h2>
              <div className="grid gap-3">
                <input name="shipping_line1" required placeholder="Line 1" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                <input name="shipping_line2" placeholder="Line 2" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                <div className="grid gap-3 sm:grid-cols-2">
                  <input name="shipping_city" required placeholder="City" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                  <input name="shipping_state" required placeholder="State" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                </div>
                <div className="grid gap-3 sm:grid-cols-2">
                  <input name="shipping_postal_code" required placeholder="Postal Code" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                  <input name="shipping_country" defaultValue="IN" required placeholder="Country" className="rounded border border-border bg-background px-3 py-2 text-sm" />
                </div>
              </div>
            </div>
          </div>

          {error && <p className="mt-4 text-xs text-destructive">{error}</p>}

          <div className="mt-6 flex items-center gap-4">
            <button className="rounded-lg bg-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground">
              Sign Up
            </button>
            <Link href="/login" className="text-sm text-accent hover:underline">
              Already have an account? Login
            </Link>
          </div>
        </form>
      </div>
      <Footer />
    </div>
  );
}