/**
 * Payroll Jurisdiction Onboarding Step
 *
 * Used during organisation creation to set up the payroll tax jurisdiction.
 * Three modes:
 *   1. Native (AU, US, GB, CA, NZ, SG) — "Supported" badge + jurisdiction-specific fields
 *   2. EU countries — "Manual tax rate" mode with note about progressive support
 *   3. Other countries — same manual flat rate flow
 */

"use client";

import React, { useState, useMemo } from "react";
import { Check, ChevronDown, Search, BadgeCheck, AlertTriangle, Settings2 } from "lucide-react";
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 {
  NATIVE_COUNTRIES,
  EU_COUNTRIES,
  US_STATES,
  type CountryOption,
} from "@/lib/payroll-settings-types";

// ── Currency map for display ─────────────────────────────────

const COUNTRY_CURRENCY: Record<string, string> = {
  AU: "AUD", US: "USD", GB: "GBP", CA: "CAD", NZ: "NZD", SG: "SGD",
  DE: "EUR", FR: "EUR", ES: "EUR", IT: "EUR", IE: "EUR", NL: "EUR",
  BE: "EUR", AT: "EUR", PT: "EUR", FI: "EUR", SE: "SEK", DK: "DKK",
  NO: "NOK", PL: "PLN",
};

// ── Country Dropdown with search ─────────────────────────────

function CountryDropdown({
  value,
  onChange,
  disabled,
}: {
  value: string;
  onChange: (code: string) => void;
  disabled?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");
  const searchInputRef = React.useRef<HTMLInputElement>(null);

  const allCountries: CountryOption[] = useMemo(() => {
    // Merge native + EU + a catch-all for other countries
    const seen = new Set<string>();
    const merged: CountryOption[] = [];

    for (const c of [...NATIVE_COUNTRIES, ...EU_COUNTRIES]) {
      if (!seen.has(c.code)) {
        seen.add(c.code);
        merged.push(c);
      }
    }

    return merged;
  }, []);

  const filtered = useMemo(() => {
    if (!search) return allCountries;
    const q = search.toLowerCase();
    return allCountries.filter(
      (c) => c.name.toLowerCase().includes(q) || c.code.toLowerCase().includes(q)
    );
  }, [search, allCountries]);

  const selected = allCountries.find((c) => c.code === value);

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => { setOpen(!open); setSearch(""); }}
        disabled={disabled}
        className="w-full flex items-center justify-between px-3 py-2.5 text-left border border-gray-200 rounded-lg hover:border-gray-300 transition-colors bg-white disabled:bg-gray-50 disabled:cursor-not-allowed"
      >
        {selected ? (
          <div className="flex items-center gap-2">
            <span className="text-sm font-medium text-gray-900">{selected.name}</span>
            {selected.mode === "native" && (
              <BadgeCheck className="w-4 h-4 text-[#1D9E75]" />
            )}
          </div>
        ) : (
          <span className="text-sm text-gray-400">Select your country...</span>
        )}
        <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform ${open ? "rotate-180" : ""}`} />
      </button>

      {open && (
        <div className="absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
          <div className="p-2 border-b border-gray-100">
            <div className="relative">
              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
              <input
                ref={searchInputRef}
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search countries..."
                className="w-full pl-8 pr-3 py-1.5 text-sm border-0 focus:outline-none"
                autoFocus
              />
            </div>
          </div>

          <div className="max-h-60 overflow-y-auto">
            {/* Native supported section */}
            {filtered.filter((c) => c.mode === "native").length > 0 && (
              <div>
                <div className="px-3 py-1.5 text-[11px] font-semibold text-gray-400 uppercase tracking-wider bg-gray-50">
                  Fully supported
                </div>
                {filtered
                  .filter((c) => c.mode === "native")
                  .map((c) => (
                    <button
                      key={c.code}
                      type="button"
                      onClick={() => { onChange(c.code); setOpen(false); setSearch(""); }}
                      className={`w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-gray-50 transition-colors ${
                        value === c.code ? "bg-teal-50" : ""
                      }`}
                    >
                      <div>
                        <div className="flex items-center gap-2">
                          <span className="text-sm text-gray-900">{c.name}</span>
                          <span className="text-[10px] text-gray-400 font-mono">{c.code}</span>
                        </div>
                        {c.badge && (
                          <div className="text-[11px] text-[#1D9E75] mt-0.5">{c.badge}</div>
                        )}
                      </div>
                      {value === c.code && <Check className="w-4 h-4 text-[#1D9E75] flex-shrink-0" />}
                    </button>
                  ))}
              </div>
            )}

            {/* EU section */}
            {filtered.filter((c) => c.mode === "eu").length > 0 && (
              <div>
                <div className="px-3 py-1.5 text-[11px] font-semibold text-gray-400 uppercase tracking-wider bg-gray-50">
                  Manual configuration
                </div>
                {filtered
                  .filter((c) => c.mode === "eu")
                  .map((c) => (
                    <button
                      key={c.code}
                      type="button"
                      onClick={() => { onChange(c.code); setOpen(false); setSearch(""); }}
                      className={`w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-gray-50 transition-colors ${
                        value === c.code ? "bg-teal-50" : ""
                      }`}
                    >
                      <div className="flex items-center gap-2">
                        <span className="text-sm text-gray-900">{c.name}</span>
                        <span className="text-[10px] text-gray-400 font-mono">{c.code}</span>
                      </div>
                      {value === c.code && <Check className="w-4 h-4 text-[#1D9E75] flex-shrink-0" />}
                    </button>
                  ))}
              </div>
            )}

            {filtered.length === 0 && (
              <div className="px-3 py-6 text-center text-sm text-gray-400">
                No countries found
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// ── Main Form Component ──────────────────────────────────────

export interface PayrollOnboardingValues {
  country_code: string;
  country_name: string;
  currency: string;
  is_natively_supported: boolean;
  state_code?: string;
  state_name?: string;
  state_tax_rate?: number;
  is_singapore_citizen_or_pr?: boolean;
  flat_income_tax_rate?: number;
  employer_pension_rate?: number;
  employer_tax_rate?: number;
  tax_free_allowance?: number;
}

interface PayrollJurisdictionStepProps {
  onComplete: (values: PayrollOnboardingValues) => void;
  onBack?: () => void;
  isLoading?: boolean;
}

export default function PayrollJurisdictionStep({
  onComplete,
  onBack,
  isLoading,
}: PayrollJurisdictionStepProps) {
  const [countryCode, setCountryCode] = useState("");
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);

  // Form state
  const [stateCode, setStateCode] = useState("");
  const [stateName, setStateName] = useState("");
  const [stateTaxRate, setStateTaxRate] = useState(0);
  const [isSgCitizenOrPr, setIsSgCitizenOrPr] = useState(true);
  const [flatTaxRate, setFlatTaxRate] = useState("0.2");
  const [employerPensionRate, setEmployerPensionRate] = useState("0");
  const [employerTaxRate, setEmployerTaxRate] = useState("0");
  const [taxFreeAllowance, setTaxFreeAllowance] = useState("0");

  const isNative = NATIVE_COUNTRIES.some((c) => c.code === countryCode);
  const isUS = countryCode === "US";
  const isSG = countryCode === "SG";

  const usState = US_STATES.find((s) => s.code === stateCode);

  const handleCountrySelect = (code: string) => {
    setCountryCode(code);
    // Reset US state when country changes
    if (code !== "US") {
      setStateCode("");
      setStateName("");
      setStateTaxRate(0);
    }
  };

  const handleSubmit = () => {
    setFormError(null);

    if (!countryCode) {
      setFormError("Please select a country");
      return;
    }

    if (isUS && !stateCode) {
      setFormError("Please select a state");
      return;
    }

    if (!isNative) {
      const rate = parseFloat(flatTaxRate);
      if (isNaN(rate) || rate < 0 || rate > 1) {
        setFormError("Income tax rate must be between 0 and 1 (e.g. 0.25 for 25%)");
        return;
      }
    }

    const country = NATIVE_COUNTRIES.find((c) => c.code === countryCode)
      ?? EU_COUNTRIES.find((c) => c.code === countryCode);

    onComplete({
      country_code: countryCode,
      country_name: country?.name ?? countryCode,
      currency: COUNTRY_CURRENCY[countryCode] ?? "USD",
      is_natively_supported: isNative,
      state_code: isUS ? stateCode : undefined,
      state_name: isUS ? stateName : undefined,
      state_tax_rate: isUS ? stateTaxRate : undefined,
      is_singapore_citizen_or_pr: isSG ? isSgCitizenOrPr : undefined,
      flat_income_tax_rate: !isNative ? parseFloat(flatTaxRate) : undefined,
      employer_pension_rate: !isNative ? parseFloat(employerPensionRate) || 0 : undefined,
      employer_tax_rate: !isNative ? parseFloat(employerTaxRate) || 0 : undefined,
      tax_free_allowance: !isNative ? parseFloat(taxFreeAllowance) || 0 : undefined,
    });
  };

  const selectedCountry = NATIVE_COUNTRIES.find((c) => c.code === countryCode)
    ?? EU_COUNTRIES.find((c) => c.code === countryCode);

  return (
    <Card className="border-0 shadow-sm">
      <CardContent className="p-6">
        <div className="flex items-center gap-2 mb-1">
          <Settings2 className="w-5 h-5 text-[#1D9E75]" />
          <h2 className="text-lg font-semibold text-gray-900">Payroll Jurisdiction</h2>
        </div>
        <p className="text-sm text-gray-500 mb-6">
          Where is your organisation based? We'll configure the correct tax rules.
        </p>

        <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }} className="space-y-5">
          {/* Country selector */}
          <div>
            <Label>Country *</Label>
            <div className="mt-1">
              <CountryDropdown
                value={countryCode}
                onChange={handleCountrySelect}
              />
            </div>
          </div>

          {/* Native supported: jurisdiction-specific fields */}
          {isNative && (
            <div className="p-4 bg-teal-50 border border-teal-200 rounded-lg space-y-4">
              <div className="flex items-center gap-2">
                <BadgeCheck className="w-4 h-4 text-[#1D9E75]" />
                <span className="text-sm font-medium text-teal-800">
                  Fully supported — {selectedCountry?.name}
                </span>
              </div>
              {selectedCountry?.badge && (
                <p className="text-xs text-teal-600">{selectedCountry.badge}</p>
              )}

              {/* US: state selector */}
              {isUS && (
                <div>
                  <Label htmlFor="us_state">State *</Label>
                  <select
                    value={stateCode}
                    onChange={(e) => {
                      setStateCode(e.target.value);
                      const s = US_STATES.find((st) => st.code === e.target.value);
                      if (s) {
                        setStateName(s.name);
                        setStateTaxRate(s.defaultTaxRate);
                      }
                    }}
                    className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                  >
                    <option value="">Select a state</option>
                    {US_STATES.map((s) => (
                      <option key={s.code} value={s.code}>
                        {s.name} {s.hasStateTax ? "" : "(no state income tax)"}
                      </option>
                    ))}
                  </select>

                  {usState && (
                    <div className="mt-2 p-2 bg-white rounded border border-teal-100">
                      <div className="flex items-center justify-between text-xs">
                        <span className="text-gray-500">State income tax rate (auto-filled)</span>
                        <span className="font-mono font-medium text-gray-900">
                          {usState.hasStateTax ? `${(usState.defaultTaxRate * 100).toFixed(2)}%` : "None"}
                        </span>
                      </div>
                    </div>
                  )}

                  {!usState && stateCode && (
                    <div className="mt-2 text-xs text-amber-600">
                      State tax rate will be set automatically.
                    </div>
                  )}
                </div>
              )}

              {/* Singapore: employee type */}
              {isSG && (
                <div>
                  <Label>Employee Type *</Label>
                  <div className="mt-2 space-y-2">
                    <label className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                      <input
                        type="radio"
                        checked={isSgCitizenOrPr === true}
                        onChange={() => setIsSgCitizenOrPr(true)}
                        className="accent-[#1D9E75]"
                      />
                      <div>
                        <span className="text-sm font-medium text-gray-900">
                          Singapore Citizen / PR
                        </span>
                        <p className="text-xs text-gray-500">CPF contributions apply (20% employee, 17% employer)</p>
                      </div>
                    </label>
                    <label className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                      <input
                        type="radio"
                        checked={isSgCitizenOrPr === false}
                        onChange={() => setIsSgCitizenOrPr(false)}
                        className="accent-[#1D9E75]"
                      />
                      <div>
                        <span className="text-sm font-medium text-gray-900">
                          Foreign Employee (EP / S Pass)
                        </span>
                        <p className="text-xs text-gray-500">No CPF contributions required</p>
                      </div>
                    </label>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Manual mode: EU + other countries */}
          {(countryCode && !isNative) && (
            <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg space-y-4">
              <div className="flex items-start gap-2">
                <AlertTriangle className="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" />
                <div>
                  <span className="text-sm font-medium text-amber-800">
                    Manual tax configuration
                  </span>
                  <p className="text-xs text-amber-600 mt-0.5">
                    {selectedCountry?.name} is not yet fully supported. Enter your local tax rates below.
                    Vela will add full support progressively based on demand.
                  </p>
                </div>
              </div>

              <div className="space-y-3">
                <div>
                  <Label htmlFor="flat_income_tax_rate">
                    Income Tax Withholding Rate *
                  </Label>
                  <div className="relative mt-1">
                    <input
                      value={flatTaxRate}
                      onChange={(e) => setFlatTaxRate(e.target.value)}
                      type="number"
                      step="0.01"
                      min="0"
                      max="1"
                      placeholder="0.25"
                      className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm pr-10 focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                    />
                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-400">
                      %
                    </span>
                  </div>
                  <p className="text-[11px] text-gray-400 mt-1">
                    Enter as decimal: 0.25 = 25%, 0.30 = 30%
                  </p>
                </div>

                <button
                  type="button"
                  onClick={() => setShowAdvanced(!showAdvanced)}
                  className="text-xs text-[#1D9E75] hover:underline font-medium cursor-pointer"
                >
                  {showAdvanced ? "Hide" : "Show"} optional fields (employer contributions, allowances)
                </button>

                {showAdvanced && (
                  <div className="space-y-3 pt-2 border-t border-amber-200">
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <Label htmlFor="employer_pension_rate">Employer Pension Rate</Label>
                        <div className="relative mt-1">
                          <input
                            value={employerPensionRate}
                            onChange={(e) => setEmployerPensionRate(e.target.value)}
                            type="number"
                            step="0.01"
                            min="0"
                            max="1"
                            placeholder="0"
                            className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm pr-10 focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                          />
                          <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-400">%</span>
                        </div>
                      </div>
                      <div>
                        <Label htmlFor="employer_tax_rate">Employer Tax Rate</Label>
                        <div className="relative mt-1">
                          <input
                            value={employerTaxRate}
                            onChange={(e) => setEmployerTaxRate(e.target.value)}
                            type="number"
                            step="0.01"
                            min="0"
                            max="1"
                            placeholder="0"
                            className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm pr-10 focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                          />
                          <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-400">%</span>
                        </div>
                      </div>
                    </div>
                    <div>
                      <Label htmlFor="tax_free_allowance">Tax-Free Allowance (Annual)</Label>
                      <input
                        value={taxFreeAllowance}
                        onChange={(e) => setTaxFreeAllowance(e.target.value)}
                        type="number"
                        min="0"
                        placeholder="0"
                        className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                      />
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Error display */}
          {formError && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
              {formError}
            </div>
          )}

          {/* Actions */}
          <div className="flex items-center justify-between pt-4 border-t border-gray-100">
            {onBack ? (
              <Button type="button" variant="outline" onClick={onBack} className="cursor-pointer">
                Back
              </Button>
            ) : (
              <div />
            )}
            <Button
              type="submit"
              disabled={!countryCode || isLoading}
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer disabled:opacity-50"
            >
              {isLoading ? (
                <>
                  <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  Saving...
                </>
              ) : (
                <>
                  Continue
                  <ChevronDown className="w-4 h-4 -rotate-90" />
                </>
              )}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}