"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { createClient } from "@/lib/supabase/client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent } from "@/components/ui/card";
import {
  HardHat,
  Keyboard,
  Mic,
  ArrowLeft,
  ArrowRight,
  Loader2,
  CheckCircle2,
  Sparkles,
  MapPin,
  Clock,
  Shield,
  Edit3,
  Wrench,
  Calendar,
  Globe2,
} from "lucide-react";

type Step = "auth" | "method" | "trade" | "experience" | "location" | "availability" | "certs" | "review";

const TRADES = [
  "Labourer",
  "Steel Fixer",
  "Formworker",
  "Carpenter",
  "Electrician",
  "Plumber",
  "Concreter",
  "Bricklayer",
  "Painter",
  "Roofer",
  "Scaffolder",
  "Tiler",
  "Plasterer",
  "Welder",
  "Crane Operator",
  "Excavator Operator",
];

const EXPERIENCE_OPTIONS = [
  { label: "Less than 1 year", value: 0 },
  { label: "1-3 years", value: 2 },
  { label: "3-5 years", value: 4 },
  { label: "5-10 years", value: 7 },
  { label: "10+ years", value: 12 },
];

const AVAILABILITY_OPTIONS = [
  { label: "Full-time", value: "full-time" as const, desc: "Mon-Fri, regular hours" },
  { label: "Casual", value: "casual" as const, desc: "As needed, flexible" },
  { label: "Weekends", value: "weekends" as const, desc: "Saturday & Sunday" },
  { label: "Flexible", value: "flexible" as const, desc: "Any time, any days" },
];

const CERT_OPTIONS = [
  "White Card",
  "Forklift Licence",
  "EWP (Elevated Work Platform)",
  "Working at Heights",
  "First Aid",
  "Traffic Control",
  "Rigging",
  "Dogging",
  "Confined Spaces",
];

interface WorkerData {
  trades: string[];
  experience: number;
  suburb: string;
  availability: "full-time" | "casual" | "weekends" | "flexible";
  certifications: string[];
}

function generateBio(data: WorkerData): string {
  const tradeStr = data.trades.join(" and ");
  const expStr =
    data.experience === 0
      ? "under 1 year"
      : data.experience >= 12
        ? "10+ years"
        : `${data.experience} years`;
  const certStr =
    data.certifications.length > 0
      ? ` Holds ${data.certifications.join(", ")}.`
      : "";

  return `Experienced ${tradeStr.toLowerCase()} with ${expStr} in the construction industry. Based in ${data.suburb}, available for ${data.availability} work.${certStr}`;
}

export default function WorkerSignupPage() {
  const [step, setStep] = useState<Step>("auth");
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [loading, setLoading] = useState(true);

  // Auth state
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [authError, setAuthError] = useState<string | null>(null);
  const [authLoading, setAuthLoading] = useState(false);

  // Worker data
  const [selectedTrades, setSelectedTrades] = useState<string[]>([]);
  const [experience, setExperience] = useState<number | null>(null);
  const [suburb, setSuburb] = useState("");
  const [availability, setAvailability] = useState<WorkerData["availability"] | null>(null);
  const [certifications, setCertifications] = useState<string[]>([]);

  const [saving, setSaving] = useState(false);

  const router = useRouter();
  const supabase = createClient();

  useEffect(() => {
    async function checkAuth() {
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (user) {
        setIsAuthenticated(true);
        setStep("method");
      }
      setLoading(false);
    }
    checkAuth();
  }, [supabase.auth]);

  async function handleAuth(e: React.FormEvent) {
    e.preventDefault();
    setAuthLoading(true);
    setAuthError(null);

    const { error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        data: { type: "worker" },
        emailRedirectTo: `${window.location.origin}/auth/callback`,
      },
    });

    if (error) {
      if (error.message.includes("already registered")) {
        const { error: loginError } = await supabase.auth.signInWithPassword({
          email,
          password,
        });
        if (loginError) {
          setAuthError(loginError.message);
          setAuthLoading(false);
          return;
        }
        // If login successful, check if email is verified
        const { data: { user } } = await supabase.auth.getUser();
        if (user && !user.email_confirmed_at) {
          // Email not verified, redirect to verification page
          router.push("/auth/verify-email");
          return;
        }
      } else {
        setAuthError(error.message);
        setAuthLoading(false);
        return;
      }
    }

    // Check if email verification is required
    const { data: { user } } = await supabase.auth.getUser();
    if (user && !user.email_confirmed_at) {
      // Email not verified, redirect to verification page
      router.push("/auth/verify-email");
      return;
    }

    setIsAuthenticated(true);
    setStep("method");
    setAuthLoading(false);
  }

  function toggleTrade(trade: string) {
    setSelectedTrades((prev) =>
      prev.includes(trade) ? prev.filter((t) => t !== trade) : [...prev, trade]
    );
  }

  function toggleCert(cert: string) {
    setCertifications((prev) =>
      prev.includes(cert) ? prev.filter((c) => c !== cert) : [...prev, cert]
    );
  }

  async function handleConfirm() {
    if (!availability || experience === null) return;
    setSaving(true);

    const {
      data: { user },
    } = await supabase.auth.getUser();
    if (!user) return;

    const workerData: WorkerData = {
      trades: selectedTrades,
      experience,
      suburb,
      availability,
      certifications,
    };

    const bio = generateBio(workerData);

    await supabase.from("profiles").update({
      name: user.email?.split("@")[0] ?? "",
      suburb,
      onboarding_completed: true,
    }).eq("id", user.id);

    await supabase.from("worker_profiles").insert({
      profile_id: user.id,
      trades: selectedTrades,
      experience_years: experience,
      availability,
      certifications,
      bio,
      ai_extracted: {
        source: "typed_answers",
        created_at: new Date().toISOString(),
      },
    });

    router.push("/dashboard");
    router.refresh();
  }

  const workerData: WorkerData | null =
    selectedTrades.length > 0 && experience !== null && suburb && availability
      ? { trades: selectedTrades, experience, suburb, availability, certifications }
      : null;

  const stepOrder: Step[] = ["auth", "method", "trade", "experience", "location", "availability", "certs", "review"];
  const activeSteps = isAuthenticated ? stepOrder.slice(1) : stepOrder;
  const currentIndex = activeSteps.indexOf(step);
  const totalSteps = activeSteps.length;

  if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur">
        <div className="mx-auto flex h-14 max-w-screen-xl items-center justify-between px-4">
          <Link href="/" className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
              <HardHat className="h-5 w-5 text-primary-foreground" />
            </div>
            <span className="text-xl font-bold tracking-tight">RateRight</span>
          </Link>
        </div>
      </header>

      <main className="mx-auto max-w-screen-sm px-4 py-6">
        {/* Progress bar */}
        <div className="flex gap-1.5">
          {Array.from({ length: totalSteps }, (_, i) => (
            <div
              key={i}
              className={`h-1.5 flex-1 rounded-full transition-colors ${
                i <= currentIndex ? "bg-primary" : "bg-muted"
              }`}
            />
          ))}
        </div>

        {/* Step: Auth */}
        {step === "auth" && (
          <div className="mt-8">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground">
                <HardHat className="h-5 w-5" />
              </div>
              <div>
                <h1 className="text-xl font-bold">Create your account</h1>
                <p className="text-sm text-muted-foreground">
                  Always free for workers
                </p>
              </div>
            </div>

            <form onSubmit={handleAuth} className="mt-6 space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="you@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  autoComplete="email"
                  className="h-12 text-base"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input
                  id="password"
                  type="password"
                  placeholder="Create a password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  minLength={6}
                  autoComplete="new-password"
                  className="h-12 text-base"
                />
              </div>

              {authError && (
                <p className="text-sm text-destructive">{authError}</p>
              )}

              <Button
                type="submit"
                className="h-12 w-full gap-2 text-base font-semibold"
                disabled={authLoading}
              >
                {authLoading ? (
                  <>
                    <Loader2 className="h-5 w-5 animate-spin" />
                    Creating account...
                  </>
                ) : (
                  <>
                    Continue
                    <ArrowRight className="h-5 w-5" />
                  </>
                )}
              </Button>
            </form>

            <p className="mt-4 text-center text-sm text-muted-foreground">
              Already have an account?{" "}
              <Link
                href="/auth/login"
                className="text-primary underline hover:no-underline"
              >
                Sign in
              </Link>
            </p>
          </div>
        )}

        {/* Step: Choose method */}
        {step === "method" && (
          <div className="mt-8">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground">
                <HardHat className="h-5 w-5" />
              </div>
              <div>
                <h1 className="text-xl font-bold">Build your profile</h1>
                <p className="text-sm text-muted-foreground">
                  How do you want to get started?
                </p>
              </div>
            </div>

            <div className="mt-6 space-y-3">
              <button
                onClick={() => setStep("trade")}
                className="flex w-full items-center gap-4 rounded-xl border-2 border-primary bg-primary/5 p-5 text-left transition-colors hover:bg-primary/10"
              >
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground">
                  <Keyboard className="h-6 w-6" />
                </div>
                <div>
                  <p className="text-base font-semibold">Type my answers</p>
                  <p className="text-sm text-muted-foreground">
                    5 quick questions, under 2 minutes
                  </p>
                </div>
                <ArrowRight className="ml-auto h-5 w-5 text-primary" />
              </button>

              <button
                disabled
                className="flex w-full items-center gap-4 rounded-xl border-2 border-muted p-5 text-left opacity-50"
              >
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground">
                  <Mic className="h-6 w-6" />
                </div>
                <div>
                  <p className="text-base font-semibold">Send a voice note</p>
                  <p className="text-sm text-muted-foreground">
                    Coming soon — speak and AI builds your profile
                  </p>
                </div>
              </button>
            </div>
          </div>
        )}

        {/* Step: Select trade */}
        {step === "trade" && (
          <div className="mt-8">
            <StepHeader
              icon={<Wrench className="h-5 w-5" />}
              title="What's your trade?"
              subtitle="Select one or more"
            />

            <div className="mt-6 grid grid-cols-2 gap-2">
              {TRADES.map((trade) => (
                <button
                  key={trade}
                  onClick={() => toggleTrade(trade)}
                  className={`rounded-xl border-2 px-4 py-3 text-left text-sm font-medium transition-colors ${
                    selectedTrades.includes(trade)
                      ? "border-primary bg-primary/10 text-primary"
                      : "border-border hover:border-primary/50"
                  }`}
                >
                  {trade}
                </button>
              ))}
            </div>

            <div className="mt-6 flex gap-3">
              <Button
                variant="outline"
                onClick={() => setStep("method")}
                className="h-12"
              >
                <ArrowLeft className="h-5 w-5" />
              </Button>
              <Button
                onClick={() => setStep("experience")}
                disabled={selectedTrades.length === 0}
                className="h-12 flex-1 gap-2 text-base font-semibold"
              >
                Continue
                <ArrowRight className="h-5 w-5" />
              </Button>
            </div>
          </div>
        )}

        {/* Step: Experience */}
        {step === "experience" && (
          <div className="mt-8">
            <StepHeader
              icon={<Clock className="h-5 w-5" />}
              title="How much experience?"
              subtitle="In construction overall"
            />

            <div className="mt-6 space-y-2">
              {EXPERIENCE_OPTIONS.map((opt) => (
                <button
                  key={opt.value}
                  onClick={() => {
                    setExperience(opt.value);
                    setStep("location");
                  }}
                  className={`flex w-full items-center justify-between rounded-xl border-2 px-5 py-4 text-left text-base font-medium transition-colors ${
                    experience === opt.value
                      ? "border-primary bg-primary/10 text-primary"
                      : "border-border hover:border-primary/50"
                  }`}
                >
                  {opt.label}
                  <ArrowRight className="h-4 w-4 text-muted-foreground" />
                </button>
              ))}
            </div>

            <button
              onClick={() => setStep("trade")}
              className="mt-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
            >
              <ArrowLeft className="h-4 w-4" />
              Back
            </button>
          </div>
        )}

        {/* Step: Location */}
        {step === "location" && (
          <div className="mt-8">
            <StepHeader
              icon={<MapPin className="h-5 w-5" />}
              title="Where are you based?"
              subtitle="Your suburb or area"
            />

            <form
              onSubmit={(e) => {
                e.preventDefault();
                if (suburb.trim()) setStep("availability");
              }}
              className="mt-6 space-y-4"
            >
              <Input
                placeholder="e.g. Parramatta, Blacktown, Liverpool"
                value={suburb}
                onChange={(e) => setSuburb(e.target.value)}
                required
                autoFocus
                className="h-12 text-base"
              />
              <p className="text-xs text-muted-foreground">
                We&apos;ll match you to jobs near this location.
              </p>

              <div className="flex gap-3">
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => setStep("experience")}
                  className="h-12"
                >
                  <ArrowLeft className="h-5 w-5" />
                </Button>
                <Button
                  type="submit"
                  disabled={!suburb.trim()}
                  className="h-12 flex-1 gap-2 text-base font-semibold"
                >
                  Continue
                  <ArrowRight className="h-5 w-5" />
                </Button>
              </div>
            </form>
          </div>
        )}

        {/* Step: Availability */}
        {step === "availability" && (
          <div className="mt-8">
            <StepHeader
              icon={<Calendar className="h-5 w-5" />}
              title="Your availability?"
              subtitle="When can you work?"
            />

            <div className="mt-6 space-y-2">
              {AVAILABILITY_OPTIONS.map((opt) => (
                <button
                  key={opt.value}
                  onClick={() => {
                    setAvailability(opt.value);
                    setStep("certs");
                  }}
                  className={`flex w-full items-center justify-between rounded-xl border-2 px-5 py-4 text-left transition-colors ${
                    availability === opt.value
                      ? "border-primary bg-primary/10"
                      : "border-border hover:border-primary/50"
                  }`}
                >
                  <div>
                    <p className={`text-base font-medium ${availability === opt.value ? "text-primary" : ""}`}>
                      {opt.label}
                    </p>
                    <p className="text-sm text-muted-foreground">{opt.desc}</p>
                  </div>
                  <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" />
                </button>
              ))}
            </div>

            <button
              onClick={() => setStep("location")}
              className="mt-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
            >
              <ArrowLeft className="h-4 w-4" />
              Back
            </button>
          </div>
        )}

        {/* Step: Certifications */}
        {step === "certs" && (
          <div className="mt-8">
            <StepHeader
              icon={<Shield className="h-5 w-5" />}
              title="Your certifications"
              subtitle="Select all that apply (optional)"
            />

            <div className="mt-6 space-y-2">
              {CERT_OPTIONS.map((cert) => (
                <button
                  key={cert}
                  onClick={() => toggleCert(cert)}
                  className={`flex w-full items-center gap-3 rounded-xl border-2 px-5 py-3.5 text-left text-sm font-medium transition-colors ${
                    certifications.includes(cert)
                      ? "border-primary bg-primary/10 text-primary"
                      : "border-border hover:border-primary/50"
                  }`}
                >
                  <div
                    className={`flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 ${
                      certifications.includes(cert)
                        ? "border-primary bg-primary text-primary-foreground"
                        : "border-muted-foreground"
                    }`}
                  >
                    {certifications.includes(cert) && (
                      <CheckCircle2 className="h-3.5 w-3.5" />
                    )}
                  </div>
                  {cert}
                </button>
              ))}
            </div>

            <div className="mt-6 flex gap-3">
              <Button
                variant="outline"
                onClick={() => setStep("availability")}
                className="h-12"
              >
                <ArrowLeft className="h-5 w-5" />
              </Button>
              <Button
                onClick={() => setStep("review")}
                className="h-12 flex-1 gap-2 text-base font-semibold"
              >
                Review my profile
                <ArrowRight className="h-5 w-5" />
              </Button>
            </div>
          </div>
        )}

        {/* Step: Review */}
        {step === "review" && workerData && (
          <div className="mt-8">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground">
                <CheckCircle2 className="h-5 w-5" />
              </div>
              <div>
                <h1 className="text-xl font-bold">Your profile</h1>
                <p className="text-sm text-muted-foreground">
                  Review and confirm
                </p>
              </div>
            </div>

            <Card className="mt-6">
              <CardContent className="space-y-4 pt-6">
                <ReviewField
                  icon={<Wrench className="h-4 w-4" />}
                  label="Trade"
                  value={workerData.trades.join(", ")}
                  onEdit={() => setStep("trade")}
                />
                <ReviewField
                  icon={<Clock className="h-4 w-4" />}
                  label="Experience"
                  value={
                    workerData.experience === 0
                      ? "Less than 1 year"
                      : workerData.experience >= 12
                        ? "10+ years"
                        : `${workerData.experience} years`
                  }
                  onEdit={() => setStep("experience")}
                />
                <ReviewField
                  icon={<MapPin className="h-4 w-4" />}
                  label="Location"
                  value={workerData.suburb}
                  onEdit={() => setStep("location")}
                />
                <ReviewField
                  icon={<Calendar className="h-4 w-4" />}
                  label="Availability"
                  value={
                    AVAILABILITY_OPTIONS.find(
                      (o) => o.value === workerData.availability
                    )?.label ?? workerData.availability
                  }
                  onEdit={() => setStep("availability")}
                />
                <ReviewField
                  icon={<Shield className="h-4 w-4" />}
                  label="Certifications"
                  value={
                    workerData.certifications.length > 0
                      ? workerData.certifications.join(", ")
                      : "None added"
                  }
                  onEdit={() => setStep("certs")}
                />
              </CardContent>
            </Card>

            {/* AI-generated bio */}
            <div className="mt-4 rounded-lg border border-primary/20 bg-primary/5 px-4 py-3">
              <div className="flex items-start gap-2">
                <Sparkles className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                <div>
                  <p className="text-xs font-medium text-primary">
                    AI-generated bio
                  </p>
                  <p className="mt-1 text-sm text-muted-foreground">
                    {generateBio(workerData)}
                  </p>
                </div>
              </div>
            </div>

            <Button
              onClick={handleConfirm}
              className="mt-6 h-14 w-full gap-2 text-base font-semibold"
              disabled={saving}
            >
              {saving ? (
                <>
                  <Loader2 className="h-5 w-5 animate-spin" />
                  Creating profile...
                </>
              ) : (
                <>
                  <CheckCircle2 className="h-5 w-5" />
                  Looks good — create my profile
                </>
              )}
            </Button>

            <button
              onClick={() => setStep("certs")}
              className="mt-4 flex w-full items-center justify-center gap-1 text-sm text-muted-foreground hover:text-foreground"
            >
              <ArrowLeft className="h-4 w-4" />
              Go back
            </button>
          </div>
        )}
      </main>
    </div>
  );
}

function StepHeader({
  icon,
  title,
  subtitle,
}: {
  icon: React.ReactNode;
  title: string;
  subtitle: string;
}) {
  return (
    <div className="flex items-center gap-3">
      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground">
        {icon}
      </div>
      <div>
        <h1 className="text-xl font-bold">{title}</h1>
        <p className="text-sm text-muted-foreground">{subtitle}</p>
      </div>
    </div>
  );
}

function ReviewField({
  icon,
  label,
  value,
  onEdit,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  onEdit: () => void;
}) {
  return (
    <button
      onClick={onEdit}
      className="flex w-full items-start gap-3 rounded-lg p-2 text-left transition-colors hover:bg-muted"
    >
      <div className="mt-0.5 shrink-0 text-muted-foreground">{icon}</div>
      <div className="min-w-0 flex-1">
        <p className="text-xs text-muted-foreground">{label}</p>
        <p className="text-sm font-medium">{value}</p>
      </div>
      <Edit3 className="mt-1 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
    </button>
  );
}