"use client";

import { useState, useEffect, useMemo } from "react";
import { ArrowUpRight, FileText, Plus, Trash2 } from "lucide-react";
import type {
  ExtractedFinancials,
  RepaymentHistory,
  StepFinanceRequestData,
  UseOfFundsEntry,
} from "@/lib/api-types";
import {
  FX_SNAPSHOT_DATE,
  formatUsd,
  formatUzs,
  uzsToUsd,
  UZS_PER_USD,
} from "@/lib/fx-snapshot";
import { enumLabel, t, type WizardLocale } from "@/lib/i18n/wizard-labels";
import { useReferenceOptions } from "../hooks/useReferenceOptions";

const TERM_OPTIONS = [6, 12, 24, 36] as const;

interface Props {
  data: Partial<StepFinanceRequestData>;
  loading: boolean;
  locale?: WizardLocale;
  onSave: (data: StepFinanceRequestData) => Promise<unknown>;
  onSaveDraft: (data: Partial<StepFinanceRequestData>) => Promise<unknown>;
  extractedFinancials?: ExtractedFinancials | null;
  suggestedRevenueUzs?: number;
}

function confidenceBadge(score: number | undefined, locale: WizardLocale) {
  if (score == null) return null;
  const pct = Math.round(score * 100);
  const tone =
    score >= 0.85 ? "bg-green-deep/10 text-green-deep" : score >= 0.6 ? "bg-amber-50 text-amber-700" : "bg-red-50 text-red-600";
  const label =
    score >= 0.85
      ? locale === "ru"
        ? "Высокая"
        : "Yuqori"
      : score >= 0.6
        ? locale === "ru"
          ? "Средняя"
          : "O'rtacha"
        : locale === "ru"
          ? "Низкая"
          : "Past";
  return (
    <span className={`ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-inter font-medium ${tone}`}>
      OCR {label} ({pct}%)
    </span>
  );
}

export default function StepFinanceRequest({
  data,
  loading,
  locale = "uz",
  onSave,
  extractedFinancials,
  suggestedRevenueUzs,
}: Props) {
  const { options: purposes, loading: optionsLoading } = useReferenceOptions("finance_purposes", "UZ", {
    locale,
  });
  const { options: institutions } = useReferenceOptions("finance_institutions", "UZ", { locale });

  const [form, setForm] = useState({
    purpose: data?.purpose ?? "",
    preferredInstitution: data?.preferredInstitution ?? "",
    amountUzs: data?.amountUzs?.toString() ?? "",
    termMonths: data?.termMonths ?? 12,
    existingLoansUzs: data?.existingLoansUzs?.toString() ?? "",
    monthlyIncomeUzs: data?.monthlyIncomeUzs?.toString() ?? "",
    monthlyExpensesUzs: data?.monthlyExpensesUzs?.toString() ?? "",
    expectedRevenueUzs:
      data?.expectedRevenueUzs?.toString() ?? suggestedRevenueUzs?.toString() ?? "",
    repaymentHistory: (data?.repaymentHistory ?? "none") as RepaymentHistory,
  });
  const [useOfFunds, setUseOfFunds] = useState<UseOfFundsEntry[]>(
    data?.useOfFundsBreakdown?.length
      ? data.useOfFundsBreakdown
      : [{ category: "", amountUzs: 0 }],
  );
  const [prefilled, setPrefilled] = useState(false);

  const confidence = extractedFinancials?.confidence;

  useEffect(() => {
    if (extractedFinancials && !prefilled) {
      setForm((prev) => ({
        ...prev,
        monthlyIncomeUzs:
          extractedFinancials.monthlyIncomeUzs?.toString() ?? prev.monthlyIncomeUzs,
        existingLoansUzs:
          extractedFinancials.existingLoansUzs?.toString() ?? prev.existingLoansUzs,
      }));
      setPrefilled(true);
    }
  }, [extractedFinancials, prefilled]);

  const amountUsd = useMemo(() => {
    const uzs = Number(form.amountUzs);
    return uzs > 0 ? uzsToUsd(uzs) : 0;
  }, [form.amountUzs]);

  const update = (field: string, value: string | number) =>
    setForm((prev) => ({ ...prev, [field]: value }));

  const updateFund = (index: number, field: keyof UseOfFundsEntry, value: string) => {
    setUseOfFunds((prev) =>
      prev.map((row, i) =>
        i === index
          ? {
              ...row,
              [field]: field === "amountUzs" ? Number(value) || 0 : value,
            }
          : row,
      ),
    );
  };

  const isValid =
    form.purpose &&
    form.amountUzs &&
    Number(form.amountUzs) >= 500_000 &&
    form.termMonths > 0;

  const handleSave = () => {
    const breakdown = useOfFunds.filter((r) => r.category && r.amountUzs > 0);
    onSave({
      purpose: form.purpose,
      preferredInstitution: form.preferredInstitution || undefined,
      amountUzs: Number(form.amountUzs),
      amountUsd,
      termMonths: form.termMonths,
      monthlyIncomeUzs: Number(form.monthlyIncomeUzs) || 0,
      existingLoansUzs: Number(form.existingLoansUzs) || 0,
      monthlyExpensesUzs: Number(form.monthlyExpensesUzs) || undefined,
      expectedRevenueUzs: Number(form.expectedRevenueUzs) || undefined,
      useOfFundsBreakdown: breakdown.length > 0 ? breakdown : undefined,
      repaymentHistory: form.repaymentHistory,
    });
  };

  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`;

  return (
    <div className="space-y-5">
      <div>
        <h2 className="font-onest text-2xl font-semibold text-ink">{t("finance.title", locale)}</h2>
        <p className="mt-1 font-inter text-sm text-ink-soft">{t("finance.subtitle", locale)}</p>
      </div>

      {prefilled && (
        <div className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-green-deep/15 bg-green-deep/5">
          <FileText className="w-4 h-4 text-green-deep shrink-0" />
          <p className="font-inter text-xs text-green-deep">{t("finance.prefilled", locale)}</p>
        </div>
      )}

      <div>
        <label htmlFor="purpose" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
          {t("finance.purpose", locale)}
        </label>
        <select
          id="purpose"
          value={form.purpose}
          onChange={(e) => update("purpose", e.target.value)}
          className={selectClass}
        >
          <option value="" disabled>{t("common.select", locale)}</option>
          {purposes.map((p) => (
            <option key={p.value} value={p.value}>{p.label}</option>
          ))}
        </select>
      </div>

      {institutions.length > 0 && (
        <div>
          <label htmlFor="preferredInstitution" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {locale === "ru" ? "Предпочитаемый банк" : "Afzal ko'rilgan bank"}
          </label>
          <select
            id="preferredInstitution"
            value={form.preferredInstitution}
            onChange={(e) => update("preferredInstitution", e.target.value)}
            className={selectClass}
          >
            <option value="">{t("common.select", locale)}</option>
            {institutions.map((inst) => (
              <option key={inst.value} value={inst.value}>{inst.label}</option>
            ))}
          </select>
        </div>
      )}

      <div>
        <label htmlFor="amountUzs" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
          {t("finance.amountUzs", locale)}
        </label>
        <input
          id="amountUzs"
          type="number"
          min="500000"
          step="100000"
          placeholder="5000000"
          value={form.amountUzs}
          onChange={(e) => update("amountUzs", e.target.value)}
          className={inputClass}
        />
        {amountUsd > 0 && (
          <p className="mt-1.5 font-inter text-xs text-muted">
            ≈ {formatUsd(amountUsd)} · {t("finance.fxSnapshot", locale)} ({FX_SNAPSHOT_DATE}): 1 USD = {formatUzs(UZS_PER_USD)} so&apos;m
          </p>
        )}
      </div>

      <div>
        <span className="block font-inter text-sm font-medium text-ink-soft mb-2">
          {t("finance.termMonths", locale)}
        </span>
        <div className="flex flex-wrap gap-2">
          {TERM_OPTIONS.map((months) => (
            <button
              key={months}
              type="button"
              onClick={() => update("termMonths", months)}
              className={`px-4 py-2 rounded-full font-inter text-sm font-medium transition-colors cursor-pointer ${
                form.termMonths === months
                  ? "bg-green-deep text-white"
                  : "border border-border text-ink-soft hover:border-green-deep/30"
              }`}
            >
              {months} {locale === "ru" ? "мес." : "oy"}
            </button>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label htmlFor="existingLoansUzs" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {t("finance.existingLoansUzs", locale)}
            {prefilled && form.existingLoansUzs && (
              <span className="ml-1 text-green-deep text-[10px] font-normal">{t("finance.autoFilled", locale)}</span>
            )}
            {confidenceBadge(confidence?.existingLoansUzs, locale)}
          </label>
          <input
            id="existingLoansUzs"
            type="number"
            min="0"
            placeholder="0"
            value={form.existingLoansUzs}
            onChange={(e) => update("existingLoansUzs", e.target.value)}
            className={inputClass}
          />
        </div>
        <div>
          <label htmlFor="monthlyIncomeUzs" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {t("finance.monthlyIncomeUzs", locale)}
            {prefilled && form.monthlyIncomeUzs && (
              <span className="ml-1 text-green-deep text-[10px] font-normal">{t("finance.autoFilled", locale)}</span>
            )}
            {confidenceBadge(confidence?.monthlyIncomeUzs, locale)}
          </label>
          <input
            id="monthlyIncomeUzs"
            type="number"
            min="0"
            placeholder="10000000"
            value={form.monthlyIncomeUzs}
            onChange={(e) => update("monthlyIncomeUzs", e.target.value)}
            className={inputClass}
          />
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label htmlFor="monthlyExpensesUzs" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {locale === "ru" ? "Ежемесячные расходы (сум)" : "Oylik xarajatlar (so'm)"}
          </label>
          <input
            id="monthlyExpensesUzs"
            type="number"
            min="0"
            value={form.monthlyExpensesUzs}
            onChange={(e) => update("monthlyExpensesUzs", e.target.value)}
            className={inputClass}
          />
        </div>
        <div>
          <label htmlFor="expectedRevenueUzs" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {locale === "ru" ? "Ожидаемый доход (сум)" : "Kutilayotgan daromad (so'm)"}
          </label>
          <input
            id="expectedRevenueUzs"
            type="number"
            min="0"
            value={form.expectedRevenueUzs}
            onChange={(e) => update("expectedRevenueUzs", e.target.value)}
            className={inputClass}
          />
        </div>
      </div>

      <div className="space-y-2">
        <span className="block font-inter text-sm font-medium text-ink-soft">
          {locale === "ru" ? "Распределение средств" : "Mablag' taqsimoti"}
        </span>
        {useOfFunds.map((row, i) => (
          <div key={i} className="flex gap-2 items-start">
            <input
              type="text"
              placeholder={locale === "ru" ? "Категория" : "Kategoriya"}
              value={row.category}
              onChange={(e) => updateFund(i, "category", e.target.value)}
              className={`${inputClass} flex-1`}
            />
            <input
              type="number"
              min="0"
              placeholder="0"
              value={row.amountUzs || ""}
              onChange={(e) => updateFund(i, "amountUzs", e.target.value)}
              className={`${inputClass} w-32`}
            />
            {useOfFunds.length > 1 && (
              <button type="button" onClick={() => setUseOfFunds((p) => p.filter((_, idx) => idx !== i))} className="text-red-400 pt-3 cursor-pointer">
                <Trash2 className="w-4 h-4" />
              </button>
            )}
          </div>
        ))}
        <button
          type="button"
          onClick={() => setUseOfFunds((p) => [...p, { category: "", amountUzs: 0 }])}
          className="flex items-center gap-1 text-xs font-inter text-green-deep cursor-pointer"
        >
          <Plus className="w-3 h-3" /> {t("common.addAnother", locale)}
        </button>
      </div>

      <div>
        <label htmlFor="repaymentHistory" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
          {t("finance.repaymentHistory", locale)}
        </label>
        <select
          id="repaymentHistory"
          value={form.repaymentHistory}
          onChange={(e) => update("repaymentHistory", e.target.value)}
          className={selectClass}
        >
          {(["none", "good", "fair", "poor"] as const).map((rh) => (
            <option key={rh} value={rh}>{enumLabel("repaymentHistory", rh, locale)}</option>
          ))}
        </select>
      </div>

      <button
        onClick={handleSave}
        disabled={!isValid || loading || 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"
      >
        {loading ? t("common.saving", locale) : t("common.saveContinue", locale)}
        <ArrowUpRight className="w-4 h-4" />
      </button>
    </div>
  );
}