"use client";

import { useState, useCallback, useEffect } from "react";
import { useRouter } from "next/navigation";
import {
  Check, Plus, X, Loader2, ArrowRight, Building2,
  ArrowLeft, Link as LinkIcon, Hash, Settings2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import { Card, CardContent } from "@/components/ui/card";
import PayrollJurisdictionStep, { type PayrollOnboardingValues } from "@/components/onboarding/PayrollJurisdictionStep";
import {
  setupOrganisation,
  createInvitations,
  joinOrganisationByCode,
} from "@/lib/supabase/employees-actions";
import { savePayrollSettings } from "@/lib/supabase/payroll-settings-actions";
import { NATIVE_COUNTRIES, EU_COUNTRIES } from "@/lib/payroll-settings-types";

const COUNTRIES = [
  { code: "AU", name: "Australia" },
  { code: "US", name: "United States" },
  { code: "GB", name: "United Kingdom" },
  { code: "CA", name: "Canada" },
  { code: "NZ", name: "New Zealand" },
];

type JoinMethod = "invite" | "code";

export default function OnboardingPage() {
  const router = useRouter();
  const [step, setStep] = useState(1);
  const [view, setView] = useState<"create" | "join">("create");
  const [joinMethod, setJoinMethod] = useState<JoinMethod>("invite");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [orgId, setOrgId] = useState<string | null>(null);
  const [joinedOrgName, setJoinedOrgName] = useState<string | null>(null);

  const [companyName, setCompanyName] = useState("");
  const [slug, setSlug] = useState("");
  const [country, setCountry] = useState("AU");
  const [joinCode, setJoinCode] = useState("");
  const [inviteEmail, setInviteEmail] = useState("");
  const [invites, setInvites] = useState<string[]>([]);

  useEffect(() => {
    if (companyName && !slug) {
      setSlug(companyName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""));
    }
  }, [companyName]);

  const addInvite = useCallback(() => {
    if (!inviteEmail.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inviteEmail) || invites.includes(inviteEmail.trim())) return;
    setInvites((p) => [...p, inviteEmail.trim()]);
    setInviteEmail("");
  }, [inviteEmail, invites]);

  const removeInvite = useCallback((i: number) => {
    setInvites((p) => p.filter((_, idx) => idx !== i));
  }, []);

  const handleStep1 = async () => {
    if (!companyName.trim()) { setError("Company name is required"); return; }
    if (!slug.trim()) { setError("Slug is required"); return; }
    setError(null);
    setSaving(true);
    try {
      const result = await setupOrganisation(companyName.trim(), slug.trim(), country);
      if (!result.success || !result.organisationId) { setError(result.error || "Failed to create organisation"); return; }
      setOrgId(result.organisationId);
      setStep(2);
    } catch (e: any) { setError(e.message || "An error occurred"); }
    finally { setSaving(false); }
  };

  const handleStep2 = async () => {
    setError(null);
    setSaving(true);
    try {
      if (invites.length > 0 && orgId) await createInvitations(invites, orgId);
      setStep(3); // Go to payroll jurisdiction step
    } catch (e: any) { setError(e.message || "An error occurred"); }
    finally { setSaving(false); }
  };

  const handlePayrollSettings = async (values: PayrollOnboardingValues) => {
    setError(null);
    setSaving(true);
    try {
      await savePayrollSettings({
        country_code: values.country_code,
        country_name: values.country_name,
        currency: values.currency,
        is_natively_supported: values.is_natively_supported,
        state_code: values.state_code || null,
        state_name: values.state_name || null,
        state_tax_rate: values.state_tax_rate ?? null,
        is_singapore_citizen_or_pr: values.is_singapore_citizen_or_pr ?? null,
        flat_income_tax_rate: values.flat_income_tax_rate ?? null,
        employer_pension_rate: values.employer_pension_rate ?? null,
        employer_tax_rate: values.employer_tax_rate ?? null,
        tax_free_allowance: values.tax_free_allowance ?? null,
      });
      setStep(4);
    } catch (e: any) { setError(e.message || "Failed to save payroll settings"); }
    finally { setSaving(false); }
  };

  const handleJoinByCode = async () => {
    if (!joinCode.trim()) { setError("Join code is required"); return; }
    setError(null);
    setSaving(true);
    try {
      const result = await joinOrganisationByCode(joinCode);
      if (!result.success) { setError(result.error || "Failed to join organisation"); return; }
      setJoinedOrgName(result.orgName || "your organisation");
      setStep(3); // Go to payroll step
    } catch (e: any) { setError(e.message || "An error occurred"); }
    finally { setSaving(false); }
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 flex items-center justify-center p-4">
      <div className="w-full max-w-lg">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-serif font-bold text-gray-900">Vela</h1>
          <p className="text-gray-500 mt-2">Let&apos;s get you set up</p>
        </div>

        <div className="flex items-center gap-3 mb-8">
          {[1, 2, 3, 4].map((s) => (
            <div key={s} className="flex items-center gap-2 flex-1">
              <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold transition-all duration-300 ${s < step ? "bg-[#1D9E75] text-white" : s === step ? "bg-[#1D9E75] text-white scale-110" : "bg-gray-200 text-gray-400"}`}>
                {s < step ? <Check className="w-3.5 h-3.5" /> : s}
              </div>
              <span className={`text-xs font-medium hidden sm:block transition-colors duration-300 ${s === step ? "text-gray-900" : "text-gray-400"}`}>
                {s === 1 ? "Company" : s === 2 ? "Team" : s === 3 ? "Payroll" : "Done"}
              </span>
              {s < 4 && <div className="flex-1 h-px bg-gray-200" />}
            </div>
          ))}
        </div>

        {error && (
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm mb-6">
            {error}
          </div>
        )}

        <Card className="border-0 shadow-sm">
          <CardContent className="p-6">
            {/* STEP 1: Create */}
            {step === 1 && view === "create" && (
              <div className="space-y-4">
                <div>
                  <h2 className="text-xl font-semibold text-gray-900">Set up your workspace</h2>
                  <p className="text-sm text-gray-500 mt-1">Create your own organisation or join an existing one</p>
                </div>

                <div className="relative">
                  <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-gray-200" /></div>
                  <div className="relative flex justify-center"><span className="bg-white px-3 text-xs text-gray-400">or create your own</span></div>
                </div>

                <div className="space-y-3">
                  <div>
                    <Label htmlFor="companyName">Company Name</Label>
                    <Input id="companyName" value={companyName} onChange={(e) => setCompanyName(e.target.value)} className="mt-1" placeholder="Acme Corp" />
                  </div>
                  <div>
                    <Label htmlFor="slug">Slug</Label>
                    <Input id="slug" value={slug} onChange={(e) => setSlug(e.target.value)} className="mt-1" placeholder="acme-corp" />
                    <p className="text-xs text-gray-400 mt-1">This will be your workspace URL</p>
                  </div>
                  <div>
                    <Label htmlFor="country">Country</Label>
                    <Select id="country" value={country} onChange={(e) => setCountry(e.target.value)} className="mt-1">
                      {COUNTRIES.map((c) => <option key={c.code} value={c.code}>{c.name}</option>)}
                    </Select>
                    <p className="text-xs text-gray-400 mt-1">Used for payroll jurisdiction</p>
                  </div>
                  <Button onClick={handleStep1} disabled={saving} className="w-full bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 mt-2 cursor-pointer">
                    {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <ArrowRight className="w-4 h-4" />}
                    {saving ? "Creating..." : "Create Organisation"}
                  </Button>
                  <p className="text-xs text-gray-400 text-center">
                    Already have a workspace?{" "}
                    <button onClick={() => setView("join")} className="text-[#1D9E75] hover:underline cursor-pointer font-medium">
                      Join one instead
                    </button>
                  </p>
                </div>
              </div>
            )}

            {/* STEP 1: Join */}
            {step === 1 && view === "join" && (
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <button onClick={() => setView("create")} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
                    <ArrowLeft className="w-4 h-4 text-gray-400" />
                  </button>
                  <div>
                    <h2 className="text-lg font-semibold text-gray-900">Join a workspace</h2>
                    <p className="text-sm text-gray-500 mt-0.5">Use a join code to join an existing team</p>
                  </div>
                </div>

                <div className="space-y-3">
                  <div>
                    <Label htmlFor="joinCode">Join Code</Label>
                    <Input id="joinCode" value={joinCode} onChange={(e) => setJoinCode(e.target.value.toUpperCase().replace(/[^A-Z0-9-]/g, ""))} className="mt-1 font-mono text-lg tracking-wider text-center" placeholder="FIN-XXXXXX" maxLength={10} />
                    <p className="text-xs text-gray-400 mt-1">Enter the code your admin shared with you</p>
                  </div>
                  <Button onClick={handleJoinByCode} disabled={saving || joinCode.length < 4} className="w-full bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer disabled:opacity-50">
                    {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <ArrowRight className="w-4 h-4" />}
                    {saving ? "Joining..." : "Join Workspace"}
                  </Button>
                </div>
              </div>
            )}

            {/* STEP 2: Invite Team */}
            {step === 2 && (
              <div className="space-y-4">
                <div>
                  <h2 className="text-xl font-semibold text-gray-900">Invite your team</h2>
                  <p className="text-sm text-gray-500 mt-1">Add colleagues by email (optional)</p>
                </div>
                <div className="flex gap-2">
                  <Input value={inviteEmail} onChange={(e) => setInviteEmail(e.target.value)} onKeyDown={(e) => e.key === "Enter" && addInvite()} placeholder="colleague@company.com" className="flex-1" />
                  <Button type="button" onClick={addInvite} variant="outline" size="sm" className="cursor-pointer"><Plus className="w-4 h-4" /></Button>
                </div>
                {invites.length > 0 && (
                  <div className="space-y-2 max-h-40 overflow-y-auto">
                    {invites.map((email, i) => (
                      <div key={i} className="flex items-center justify-between bg-gray-50 rounded-lg px-3 py-2">
                        <span className="text-sm text-gray-700">{email}</span>
                        <button onClick={() => removeInvite(i)} className="text-gray-400 hover:text-red-500 transition-colors cursor-pointer p-1"><X className="w-4 h-4" /></button>
                      </div>
                    ))}
                  </div>
                )}
                <div className="flex gap-3 mt-4">
                  <Button variant="outline" onClick={() => setStep(3)} className="flex-1 cursor-pointer">Skip for now</Button>
                  <Button onClick={handleStep2} disabled={saving} className="flex-1 bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
                    {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <ArrowRight className="w-4 h-4" />}
                    Continue
                  </Button>
                </div>
              </div>
            )}

            {/* STEP 3: Payroll Jurisdiction */}
            {step === 3 && (
              <PayrollJurisdictionStep
                onComplete={handlePayrollSettings}
                onBack={() => setStep(2)}
                isLoading={saving}
              />
            )}

            {/* STEP 4: Done */}
            {step === 4 && (
              <div className="space-y-6 text-center">
                <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto">
                  <Check className="w-8 h-8 text-emerald-600" />
                </div>
                <div>
                  <h2 className="text-xl font-semibold text-gray-900">You&apos;re all set!</h2>
                  <p className="text-sm text-gray-500 mt-2">
                    {joinedOrgName ? `Welcome to ${joinedOrgName} on Vela!` : companyName ? `Welcome to Vela, ${companyName}!` : "Welcome to Vela!"}
                  </p>
                </div>
                <Button onClick={() => router.push("/home")} className="w-full bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
                  Go to Home
                </Button>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}