"use client";

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { ArrowUpRight, Fingerprint, ShieldCheck } from "lucide-react";
import type { IdType, KycAssistMode, StepKycData } from "@/lib/api-types";
import { t, type WizardLocale } from "@/lib/i18n/wizard-labels";
import { useAuth } from "@/components/onboarding/hooks/useAuth";

interface Props {
  data: Partial<StepKycData>;
  loading: boolean;
  locale?: WizardLocale;
  onSave: (data: StepKycData & { wizardDeferred?: boolean; deferredAt?: string }) => Promise<unknown>;
  onSaveDraft: (data: Partial<StepKycData>) => Promise<unknown>;
}

interface KycConfig {
  oneIdEnabled: boolean;
  pilotBypassAllowed: boolean;
}

const PINFL_PATTERN = /^[0-9]{14}$/;

function decodeBase64Url(value: string): string {
  const padded = value.replace(/-/g, "+").replace(/_/g, "/");
  const binary = atob(padded);
  return decodeURIComponent(
    Array.from(binary, (char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`).join(""),
  );
}

function parseKycFromQuery(): Partial<StepKycData> | null {
  if (typeof window === "undefined") return null;
  const params = new URLSearchParams(window.location.search);
  if (params.get("oneid") !== "success" || !params.get("kyc")) return null;
  try {
    return JSON.parse(decodeBase64Url(params.get("kyc")!)) as Partial<StepKycData>;
  } catch {
    return null;
  }
}

function clearOneIdQueryParams() {
  if (typeof window === "undefined") return;
  const url = new URL(window.location.href);
  for (const key of ["oneid", "kyc", "message", "step", "correlationId"]) {
    url.searchParams.delete(key);
  }
  window.history.replaceState({}, "", url.pathname + url.search);
}

export default function StepKyc({ data, loading, locale = "uz", onSave }: Props) {
  const router = useRouter();
  const auth = useAuth();
  const [pinfl, setPinfl] = useState(data?.pinfl ?? data?.nationalId ?? "");
  const [idType, setIdType] = useState<IdType>(data?.idType ?? "national_id");
  const [kycAssistMode, setKycAssistMode] = useState<KycAssistMode>(
    data?.kycAssistMode ?? "self_serve",
  );
  const [config, setConfig] = useState<KycConfig>({
    oneIdEnabled: false,
    pilotBypassAllowed: false,
  });
  const [configLoading, setConfigLoading] = useState(true);
  const [oneIdLoading, setOneIdLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [official, setOfficial] = useState({
    fullNameOfficial: data?.fullNameOfficial ?? "",
    dateOfBirthOfficial: data?.dateOfBirthOfficial ?? "",
    genderOfficial: data?.genderOfficial ?? "",
  });
  const [verified, setVerified] = useState(data?.kycStatus === "verified");
  const [oneIdSessionId, setOneIdSessionId] = useState(data?.oneIdSessionId ?? "");
  const [verifiedAt, setVerifiedAt] = useState(data?.verifiedAt ?? "");

  const isPinflValid = PINFL_PATTERN.test(pinfl);

  useEffect(() => {
    fetch("/api/kyc/oneid/start")
      .then((res) => res.json())
      .then((json: KycConfig) => setConfig(json))
      .catch(() => setConfig({ oneIdEnabled: false, pilotBypassAllowed: false }))
      .finally(() => setConfigLoading(false));
  }, []);

  const applyVerifiedPayload = useCallback((payload: Partial<StepKycData>) => {
    setPinfl(payload.pinfl ?? payload.nationalId ?? "");
    setIdType(payload.idType ?? "national_id");
    setKycAssistMode(payload.kycAssistMode ?? "self_serve");
    setOneIdSessionId(payload.oneIdSessionId ?? "");
    setVerifiedAt(payload.verifiedAt ?? new Date().toISOString());
    setOfficial({
      fullNameOfficial: payload.fullNameOfficial ?? "",
      dateOfBirthOfficial: payload.dateOfBirthOfficial ?? "",
      genderOfficial: payload.genderOfficial ?? "",
    });
    setVerified(payload.kycStatus === "verified");
  }, []);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get("oneid") === "error") {
      setError(params.get("message") ?? "OneID verification failed");
      clearOneIdQueryParams();
      return;
    }

    const callbackPayload = parseKycFromQuery();
    if (callbackPayload) {
      applyVerifiedPayload(callbackPayload);
      clearOneIdQueryParams();
    }
  }, [applyVerifiedPayload]);

  const handleOneIdRedirect = async () => {
    if (!isPinflValid) {
      setError("PINFL must be exactly 14 digits");
      return;
    }

    setOneIdLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/kyc/oneid/start", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ pinfl, kycAssistMode }),
      });
      const json = await res.json();
      if (!res.ok) {
        setError(json?.error?.message ?? "Unable to start OneID verification");
        return;
      }
      if (json.authorizationUrl) {
        window.location.href = json.authorizationUrl;
      }
    } catch {
      setError("Unable to start OneID verification");
    } finally {
      setOneIdLoading(false);
    }
  };

  const handlePilotBypass = async () => {
    if (!isPinflValid) {
      setError("PINFL must be exactly 14 digits");
      return;
    }

    setOneIdLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/kyc/oneid/start", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ pinfl, kycAssistMode, action: "pilot_bypass" }),
      });
      const json = await res.json();
      if (!res.ok) {
        setError(json?.error?.message ?? "Verification failed");
        return;
      }
      if (json.kycPayload) {
        applyVerifiedPayload(json.kycPayload);
      }
    } catch {
      setError("Verification failed");
    } finally {
      setOneIdLoading(false);
    }
  };

  const handleContinue = () => {
    if (!verified || !isPinflValid) return;
    onSave({
      nationalId: pinfl,
      pinfl,
      idType,
      kycAssistMode,
      oneIdSessionId: oneIdSessionId || undefined,
      fullNameOfficial: official.fullNameOfficial || undefined,
      dateOfBirthOfficial: official.dateOfBirthOfficial || undefined,
      genderOfficial: official.genderOfficial
        ? (official.genderOfficial as StepKycData["genderOfficial"])
        : undefined,
      kycStatus: "verified",
      verifiedAt: verifiedAt || new Date().toISOString(),
    });
  };

  const handleFinishLater = async () => {
    if (!verified || !isPinflValid) return;
    await onSave({
      nationalId: pinfl,
      pinfl,
      idType,
      kycAssistMode,
      oneIdSessionId: oneIdSessionId || undefined,
      fullNameOfficial: official.fullNameOfficial || undefined,
      dateOfBirthOfficial: official.dateOfBirthOfficial || undefined,
      genderOfficial: official.genderOfficial
        ? (official.genderOfficial as StepKycData["genderOfficial"])
        : undefined,
      kycStatus: "verified",
      verifiedAt: verifiedAt || new Date().toISOString(),
      wizardDeferred: true,
      deferredAt: new Date().toISOString(),
    });
    await auth.checkAuth();
    router.push("/farmers/login?deferred=1");
  };

  const inputClass =
    "w-full px-4 py-3 rounded-xl border border-border bg-surface font-inter text-sm text-ink placeholder:text-muted/70 focus:outline-none focus:border-green-deep/40 focus:ring-1 focus:ring-green-deep/20 transition-colors";
  const selectClass = `${inputClass} appearance-none cursor-pointer`;
  const readOnlyClass = `${inputClass} bg-surface-elevated cursor-not-allowed`;

  return (
    <div className="space-y-5">
      <div>
        <h2 className="font-onest text-2xl font-semibold text-ink">Identity Verification</h2>
        <p className="mt-1 font-inter text-sm text-ink-soft">
          Enter your PINFL and verify through OneID national registry.
        </p>
      </div>

      {config.pilotBypassAllowed && !config.oneIdEnabled && (
        <div className="rounded-2xl border border-green-deep/15 bg-green-deep/5 p-5 flex items-start gap-3">
          <Fingerprint className="w-5 h-5 text-green-deep mt-0.5 shrink-0" />
          <p className="font-inter text-sm text-ink-soft leading-relaxed">
            Dev mock mode: simplified verification without OneID redirect.
          </p>
        </div>
      )}

      {config.oneIdEnabled && (
        <div className="rounded-2xl border border-green-deep/15 bg-green-deep/5 p-5 flex items-start gap-3">
          <ShieldCheck className="w-5 h-5 text-green-deep mt-0.5 shrink-0" />
          <p className="font-inter text-sm text-ink-soft leading-relaxed">
            Verify your identity via OneID. Official name, date of birth, and gender will be
            prefilled in your farm profile.
          </p>
        </div>
      )}

      {error && (
        <div className="rounded-xl border border-red-200 bg-red-50 dark:border-red-700/30 dark:bg-red-900/20 px-4 py-3 text-sm text-red-700 dark:text-red-400 font-inter">
          {error}
        </div>
      )}

      <div>
        <label htmlFor="idType" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
          ID Document Type
        </label>
        <select
          id="idType"
          value={idType}
          onChange={(e) => setIdType(e.target.value as IdType)}
          disabled={verified}
          className={selectClass}
        >
          <option value="national_id">National ID (OneID / PINFL)</option>
          <option value="passport">Passport</option>
          <option value="biometric_passport">Biometric Passport</option>
        </select>
      </div>

      <div>
        <label htmlFor="pinfl" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
          PINFL
        </label>
        <input
          id="pinfl"
          type="text"
          inputMode="numeric"
          pattern="[0-9]{14}"
          maxLength={14}
          placeholder="14-digit personal ID number"
          value={pinfl}
          onChange={(e) => setPinfl(e.target.value.replace(/\D/g, "").slice(0, 14))}
          disabled={verified}
          className={inputClass}
        />
        {pinfl && !isPinflValid && (
          <p className="mt-1 font-inter text-xs text-red-600">PINFL must be exactly 14 digits</p>
        )}
      </div>

      <div>
        <label htmlFor="kycAssistMode" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
          Verification mode
        </label>
        <select
          id="kycAssistMode"
          value={kycAssistMode}
          onChange={(e) => setKycAssistMode(e.target.value as KycAssistMode)}
          disabled={verified}
          className={selectClass}
        >
          <option value="self_serve">Self-serve (farmer completes alone)</option>
          <option value="agent_assisted">Agent-assisted</option>
        </select>
      </div>

      {verified && (official.fullNameOfficial || official.dateOfBirthOfficial) && (
        <div className="space-y-4 rounded-2xl border border-green-deep/20 bg-green-deep/5 p-5">
          <p className="font-inter text-sm font-medium text-ink">Official registry data</p>
          <div>
            <label htmlFor="fullNameOfficial" className="block font-inter text-xs text-ink/60 mb-1">
              Full name (official)
            </label>
            <input
              id="fullNameOfficial"
              type="text"
              readOnly
              value={official.fullNameOfficial}
              className={readOnlyClass}
            />
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label htmlFor="dateOfBirthOfficial" className="block font-inter text-xs text-ink/60 mb-1">
                Date of birth (official)
              </label>
              <input
                id="dateOfBirthOfficial"
                type="date"
                readOnly
                value={official.dateOfBirthOfficial}
                className={readOnlyClass}
              />
            </div>
            <div>
              <label htmlFor="genderOfficial" className="block font-inter text-xs text-ink/60 mb-1">
                Gender (official)
              </label>
              <input
                id="genderOfficial"
                type="text"
                readOnly
                value={official.genderOfficial}
                className={readOnlyClass}
              />
            </div>
          </div>
        </div>
      )}

      {!verified && !configLoading && !config.oneIdEnabled && !config.pilotBypassAllowed && (
        <div className="rounded-xl border border-amber-200 bg-amber-50 dark:border-amber-700/30 dark:bg-amber-900/20 px-4 py-3 text-sm text-amber-900 dark:border-amber-700/30 dark:bg-amber-900/20 dark:text-amber-300 font-inter">
          Identity verification is not configured. Set <code className="text-xs">ONEID_ENABLED=true</code> or
          run in development mode to use mock verification.
        </div>
      )}

      {!verified && (config.oneIdEnabled || config.pilotBypassAllowed) && (
        <div className="space-y-3">
          {config.oneIdEnabled && (
            <button
              type="button"
              onClick={handleOneIdRedirect}
              disabled={!isPinflValid || oneIdLoading || loading || configLoading}
              className="w-full flex items-center justify-center gap-2 py-3.5 rounded-full bg-green-deep text-white font-inter font-medium text-base hover:bg-green-deep/90 transition-colors disabled:opacity-50 cursor-pointer"
            >
              {oneIdLoading ? "Redirecting to OneID..." : "Verify with OneID"}
              <ArrowUpRight className="w-4 h-4" />
            </button>
          )}

          {config.pilotBypassAllowed && (
            <button
              type="button"
              onClick={handlePilotBypass}
              disabled={!isPinflValid || oneIdLoading || loading || configLoading}
              className="w-full flex items-center justify-center gap-2 py-3.5 rounded-full border border-border bg-surface text-ink font-inter font-medium text-base hover:bg-surface-elevated transition-colors disabled:opacity-50 cursor-pointer"
            >
              {oneIdLoading ? "Verifying..." : "Verify (dev mock)"}
            </button>
          )}
        </div>
      )}

      <button
        onClick={handleContinue}
        disabled={!verified || !isPinflValid || loading}
        className="w-full flex items-center justify-center gap-2 py-3.5 rounded-full bg-green-deep text-white font-inter font-medium text-base hover:bg-green-deep/90 transition-colors disabled:opacity-50 cursor-pointer"
      >
        {loading ? t("common.saving", locale) : t("common.saveContinue", locale)}
        <ArrowUpRight className="w-4 h-4" />
      </button>

      {verified && (
        <div className="space-y-2 pt-1">
          <button
            type="button"
            onClick={handleFinishLater}
            disabled={!isPinflValid || loading}
            className="w-full flex items-center justify-center gap-2 py-3.5 rounded-full border border-border bg-surface text-ink font-inter font-medium text-base hover:bg-surface-elevated transition-colors disabled:opacity-50 cursor-pointer"
          >
            {t("kyc.finishLater", locale)}
          </button>
          <p className="font-inter text-xs text-muted text-center">{t("kyc.finishLaterHint", locale)}</p>
        </div>
      )}
    </div>
  );
}