"use client";

import { useState, useCallback, useMemo } from "react";
import { ArrowUpRight, Loader2, UserRound } from "lucide-react";
import type { ExtractionStatus, StepDocumentsData } from "@/lib/api-types";
import { t, type WizardLocale } from "@/lib/i18n/wizard-labels";
import DocumentDropzone, { type UploadedFile } from "../DocumentDropzone";
import { api } from "@/lib/api-client";
import { useReferenceOptions } from "../hooks/useReferenceOptions";

interface Props {
  data: Partial<StepDocumentsData>;
  loading: boolean;
  locale?: WizardLocale;
  preferredInstitution?: string;
  onSave: (data: StepDocumentsData) => Promise<unknown>;
  onSaveDraft: (data: Partial<StepDocumentsData>) => Promise<unknown>;
  sessionId?: string;
}

function docAppliesToInstitution(
  metadata: Record<string, unknown> | undefined,
  institution?: string,
): boolean {
  const institutions = metadata?.institutions;
  if (Array.isArray(institutions) && institutions.length > 0) {
    if (!institution) return false;
    return institutions.includes(institution);
  }
  return true;
}

export default function StepDocuments({
  data,
  loading,
  locale = "uz",
  preferredInstitution,
  onSave,
  sessionId,
}: Props) {
  const { options: docOptions, loading: optionsLoading } = useReferenceOptions("required_docs", "UZ", {
    locale,
  });

  const docList = useMemo(
    () =>
      docOptions
        .filter((d) => docAppliesToInstitution(d.metadata, preferredInstitution))
        .map((d) => ({
          key: d.value,
          label: d.label,
          optional: !!d.metadata?.optional,
        })),
    [docOptions, preferredInstitution],
  );

  const [files, setFiles] = useState<Record<string, UploadedFile>>(() => {
    const initial: Record<string, UploadedFile> = {};
    if (data?.uploaded) {
      for (const key of Object.keys(data.uploaded)) {
        if (data.uploaded[key]) {
          initial[key] = {
            file: new File([], key),
            status: "done",
            progress: 100,
          };
        }
      }
    }
    return initial;
  });

  const [extractionStatus, setExtractionStatus] = useState<Record<string, string>>(() => {
    if (typeof data?.extractionStatus === "object" && data.extractionStatus !== null) {
      return data.extractionStatus as Record<string, string>;
    }
    return {};
  });
  const [agentAssist, setAgentAssist] = useState(data?.documentAssistMode ?? false);

  const handleSelect = useCallback(
    async (docKey: string, file: File) => {
      setFiles((prev) => ({
        ...prev,
        [docKey]: { file, status: "uploading", progress: 0 },
      }));

      try {
        const progressInterval = setInterval(() => {
          setFiles((prev) => {
            const current = prev[docKey];
            if (!current || current.status !== "uploading") return prev;
            const nextProgress = Math.min(current.progress + 15, 90);
            return { ...prev, [docKey]: { ...current, progress: nextProgress } };
          });
        }, 200);

        await api.documents.upload(sessionId ?? "", docKey, file);

        clearInterval(progressInterval);
        setFiles((prev) => ({
          ...prev,
          [docKey]: { ...prev[docKey]!, status: "done", progress: 100 },
        }));
        setExtractionStatus((prev) => ({ ...prev, [docKey]: "processing" }));

        if (docKey === "bank_statement" || docKey === "tax_receipt") {
          setTimeout(() => {
            setExtractionStatus((prev) => ({ ...prev, [docKey]: "extracted" }));
          }, 3000);
        }
      } catch (err: unknown) {
        const message = err instanceof Error ? err.message : "Upload failed";
        setFiles((prev) => ({
          ...prev,
          [docKey]: {
            ...prev[docKey]!,
            status: "error",
            progress: 0,
            error: message,
          },
        }));
      }
    },
    [sessionId],
  );

  const handleRemove = useCallback((docKey: string) => {
    setFiles((prev) => {
      const next = { ...prev };
      delete next[docKey];
      return next;
    });
    setExtractionStatus((prev) => {
      const next = { ...prev };
      delete next[docKey];
      return next;
    });
  }, []);

  const requiredDocs = docList.filter((d) => !d.optional);
  const uploadedRequired = requiredDocs.filter(
    (d) => files[d.key]?.status === "done",
  ).length;
  const allUploading = Object.values(files).some((f) => f.status === "uploading");

  const handleSave = () => {
    const uploaded: Record<string, boolean> = {};
    for (const [key, f] of Object.entries(files)) {
      uploaded[key] = f.status === "done";
    }
    onSave({
      uploaded,
      extractionStatus: (Object.keys(extractionStatus).length > 0
        ? "processing"
        : data?.extractionStatus) as ExtractionStatus | undefined,
      documentAssistMode: agentAssist || undefined,
    });
  };

  const handleAgentAssist = () => {
    setAgentAssist(true);
    onSave({ documentAssistMode: true, uploaded: data?.uploaded ?? {} });
  };

  return (
    <div className="space-y-5">
      <div>
        <h2 className="font-onest text-2xl font-semibold text-ink">
          {locale === "ru" ? "Пакет документов" : "Hujjatlar to'plami"}
        </h2>
        <p className="mt-1 font-inter text-sm text-ink-soft">
          {locale === "ru"
            ? "Загрузите подтверждающие документы. Список зависит от выбранного банка."
            : "Tasdiqlovchi hujjatlarni yuklang. Ro'yxat tanlangan bankga bog'liq."}
        </p>
        {preferredInstitution && (
          <p className="mt-1 font-inter text-xs text-green-deep">
            {locale === "ru" ? "Банк" : "Bank"}: {preferredInstitution}
          </p>
        )}
      </div>

      {agentAssist && (
        <div className="rounded-xl border border-blue-200 bg-blue-50 px-4 py-3 font-inter text-xs text-blue-800">
          {locale === "ru"
            ? "Запрошена помощь агента с документами — офицер свяжется с вами."
            : "Hujjatlar bo'yicha agent yordami so'raldi — xodim siz bilan bog'lanadi."}
        </div>
      )}

      <div className="space-y-3">
        {docList.map((doc) => (
          <div key={doc.key}>
            <DocumentDropzone
              docKey={doc.key}
              label={doc.label}
              file={files[doc.key] ?? null}
              onSelect={handleSelect}
              onRemove={handleRemove}
            />
            {extractionStatus[doc.key] && (
              <div className="mt-1 ml-2">
                {extractionStatus[doc.key] === "processing" ? (
                  <span className="inline-flex items-center gap-1 font-inter text-xs text-blue-600">
                    <Loader2 className="w-3 h-3 animate-spin" />
                    {locale === "ru" ? "Извлечение данных..." : "Ma'lumot ajratilmoqda..."}
                  </span>
                ) : extractionStatus[doc.key] === "extracted" ? (
                  <span className="inline-flex items-center gap-1 font-inter text-xs text-green-deep">
                    {locale === "ru" ? "Данные извлечены" : "Ma'lumot ajratildi"}
                  </span>
                ) : null}
              </div>
            )}
          </div>
        ))}
      </div>

      <p className="font-inter text-xs text-muted">
        {uploadedRequired} / {requiredDocs.length}{" "}
        {locale === "ru" ? "обязательных документов загружено" : "majburiy hujjat yuklandi"}
      </p>

      <button
        onClick={handleSave}
        disabled={uploadedRequired < requiredDocs.length || loading || allUploading || optionsLoading}
        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"
      >
        {allUploading ? (
          <>
            <Loader2 className="w-4 h-4 animate-spin" />
            {t("common.saving", locale)}
          </>
        ) : loading ? (
          t("common.saving", locale)
        ) : (
          <>
            {t("common.saveContinue", locale)}
            <ArrowUpRight className="w-4 h-4" />
          </>
        )}
      </button>

      <button
        type="button"
        onClick={handleAgentAssist}
        disabled={loading}
        className="w-full flex items-center justify-center gap-2 py-3 rounded-xl border border-border text-ink-soft font-inter text-sm hover:bg-surface-elevated cursor-pointer disabled:opacity-50"
      >
        <UserRound className="w-4 h-4" />
        {locale === "ru" ? "Попросить помощь агента" : "Agent yordamini so'rash"}
      </button>
    </div>
  );
}