"use client";

import { CheckCircle2, XCircle, AlertCircle, ArrowUpRight, LayoutDashboard } from "lucide-react";
import type {
  ConditionalRequirement,
  EligibilityOutcome,
  FarmerExplanation,
  ReasonCode,
  ScoringMeta,
  StepResultData,
} from "@/lib/api-types";
import { getFarmerExplanationText } from "@/lib/scoring-reasons";
import { enumLabel, t, type WizardLocale } from "@/lib/i18n/wizard-labels";
import CreditScoreArc from "@/components/scoring/CreditScoreArc";
import ShapFactorsChart from "@/components/scoring/ShapFactorsChart";

interface Props {
  data: Partial<StepResultData> & {
    decision?: EligibilityOutcome;
    score?: number;
    reasonCodes?: ReasonCode[];
    financeCaseId?: string;
    financeCaseStatus?: string;
    conditionalRequirements?: ConditionalRequirement[];
    farmerExplanation?: FarmerExplanation;
    scoringMeta?: ScoringMeta;
  };
  loading: boolean;
  locale?: WizardLocale;
  onSave: (data: StepResultData) => Promise<unknown>;
  onSaveDraft: (data: Partial<StepResultData>) => Promise<unknown>;
  onComplete: () => void;
}

export default function StepResult({ data, onSave, onComplete, loading, locale = "uz" }: Props) {
  const outcome = data?.outcome ?? data?.decision ?? "eligible";
  const score = data?.score ?? 750;
  const reasonCodes = data?.reasonCodes ?? [];
  const financeCaseId = data?.financeCaseId;
  const financeCaseStatus = data?.financeCaseStatus;
  const conditionalRequirements = data?.conditionalRequirements ?? [];
  const scoringMeta = data?.scoringMeta;
  const explanationText = getFarmerExplanationText(
    data?.farmerExplanation ?? scoringMeta?.farmerExplanation,
    locale,
  );

  const handleFinish = async () => {
    await onSave({
      acknowledged: true,
      acknowledgedAt: new Date().toISOString(),
      outcome,
      financeCaseId,
      financeCaseStatus: financeCaseStatus as StepResultData["financeCaseStatus"],
      conditionalRequirements,
    });
    onComplete();
  };

  const isEligible = outcome === "eligible";
  const isConditional = outcome === "conditional";
  const riskPd = scoringMeta?.baselPd;
  const riskRating = scoringMeta?.riskRating;
  const ifrs9Stage = scoringMeta?.ifrs9Stage;
  const cbuClass = scoringMeta?.cbuClass;
  const hasBaselSummary = riskPd != null || riskRating || ifrs9Stage != null || cbuClass != null;

  return (
    <div className="space-y-6 text-center py-4">
      <div className="flex justify-center">
        <div
          className={`w-16 h-16 rounded-full flex items-center justify-center ${
            isEligible ? "bg-green-deep/10" : isConditional ? "bg-amber-100" : "bg-red-100"
          }`}
        >
          {isEligible ? (
            <CheckCircle2 className="w-8 h-8 text-green-deep" />
          ) : isConditional ? (
            <AlertCircle className="w-8 h-8 text-amber-500" />
          ) : (
            <XCircle className="w-8 h-8 text-red-500" />
          )}
        </div>
      </div>

      <div>
        <h2 className="font-onest text-2xl font-semibold text-ink">
          {isEligible
            ? t("result.eligible", locale)
            : isConditional
              ? t("result.conditional", locale)
              : t("result.notEligible", locale)}
        </h2>
        <p className="mt-2 font-inter text-sm text-ink-soft max-w-md mx-auto">
          {isEligible
            ? t("result.eligibleHint", locale)
            : isConditional
              ? t("result.conditionalHint", locale)
              : t("result.notEligibleHint", locale)}
        </p>
      </div>

      <div className="flex flex-col items-center gap-2">
        <CreditScoreArc
          score={score}
          label={t("result.scoreGaugeLabel", locale)}
        />
        <span className="font-inter text-sm text-ink/60">{t("result.creditScore", locale)}</span>
      </div>

      {hasBaselSummary && (
        <div className="flex flex-wrap justify-center gap-2 max-w-sm mx-auto">
          {riskPd != null && (
            <span
              className="inline-flex items-center px-3 py-1 rounded-full bg-surface-elevated border border-border font-inter text-xs text-ink-soft"
              title={t("scoring.baselPd", locale)}
            >
              {t("scoring.baselPd", locale)}: {(riskPd * 100).toFixed(1)}%
            </span>
          )}
          {riskRating && (
            <span
              className="inline-flex items-center px-3 py-1 rounded-full bg-surface-elevated border border-border font-inter text-xs text-ink-soft"
              title={t("scoring.riskRating", locale)}
            >
              {t("scoring.riskRating", locale)}: {riskRating}
            </span>
          )}
          {ifrs9Stage != null && (
            <span
              className="inline-flex items-center px-3 py-1 rounded-full bg-surface-elevated border border-border font-inter text-xs text-ink-soft"
              title={t("scoring.ifrs9Stage", locale)}
            >
              {t("scoring.ifrs9Stage", locale)}: {ifrs9Stage}
            </span>
          )}
          {cbuClass != null && (
            <span
              className="inline-flex items-center px-3 py-1 rounded-full bg-surface-elevated border border-border font-inter text-xs text-ink-soft"
              title={t("scoring.cbuClass", locale)}
            >
              {t("scoring.cbuClass", locale)}: {cbuClass}
            </span>
          )}
        </div>
      )}

      {financeCaseId && (
        <div className="max-w-sm mx-auto rounded-xl border border-border bg-surface p-4 text-left">
          <p className="font-inter text-xs text-muted">{t("result.financeCase", locale)}</p>
          <p className="font-onest text-sm font-semibold text-ink mt-0.5">{financeCaseId}</p>
          {financeCaseStatus && (
            <p className="font-inter text-xs text-green-deep mt-1">
              {t("result.caseStatus", locale)}: {enumLabel("financeCaseStatus", financeCaseStatus, locale)}
            </p>
          )}
        </div>
      )}

      {explanationText && (
        <div className="max-w-sm mx-auto rounded-xl border border-green-deep/15 bg-green-deep/5 p-4 text-left">
          <p className="font-inter text-xs font-medium text-green-deep uppercase tracking-wide mb-2">
            {t("result.farmerExplanation", locale)}
          </p>
          <p className="font-inter text-sm text-ink-soft leading-relaxed">{explanationText}</p>
        </div>
      )}

      {reasonCodes.length > 0 && (
        <div className="text-left max-w-sm mx-auto space-y-2">
          <p className="font-inter text-xs font-medium text-muted uppercase tracking-wide text-center">
            {t("scoring.keyFactors", locale)}
          </p>
          <ShapFactorsChart factors={reasonCodes} locale={locale} maxItems={4} />
        </div>
      )}

      {isConditional && conditionalRequirements.length > 0 && (
        <div className="text-left max-w-sm mx-auto rounded-xl border border-amber-200 bg-amber-50 dark:border-amber-700/30 dark:bg-amber-900/20 p-4 space-y-2">
          <p className="font-inter text-xs font-medium text-amber-800 uppercase tracking-wide">
            {t("result.requirements", locale)}
          </p>
          {conditionalRequirements.map((req, i) => (
            <div key={req.code ?? i}>
              <p className="font-inter text-sm font-medium text-amber-900">{req.label}</p>
              {req.description && (
                <p className="font-inter text-xs text-amber-800/80">{req.description}</p>
              )}
            </div>
          ))}
        </div>
      )}

      <div className="flex flex-col gap-3 max-w-xs mx-auto">
        <a
          href="/farmers/dashboard"
          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 cursor-pointer"
        >
          {t("result.goDashboard", locale)}
          <LayoutDashboard className="w-4 h-4" />
        </a>
        <button
          onClick={handleFinish}
          disabled={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("result.finishing", locale) : t("result.goLogin", locale)}
          <ArrowUpRight className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
}