import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { ArrowLeft, ArrowRight, AlertTriangle, FolderHeart } from "lucide-react";
import MappingRow from "./MappingRow";
import TransactionPreviewPanel from "./TransactionPreviewPanel";
import type {
  MigrationPlan,
  MappingRow as MappingRowType,
} from "../../services/categoryMappingService";

interface StepSimulateProps {
  plan: MigrationPlan;
  unresolved: number;
  selectedRowV2Id: number | null;
  transactionCountByV2Id: Map<number, number>;
  onResolveRow: (v2CategoryId: number, v1TargetId: number, v1TargetName: string) => void;
  onSelectRow: (v2CategoryId: number | null) => void;
  onNext: () => void;
  onBack: () => void;
}

/**
 * Step 2 — Simulate (dry-run): a 3-column table (v2 | confidence | v1 target),
 * a preview side panel per selected row, and a blocking guard on the "next"
 * button until every row is resolved. No DB writes happen here — the plan is
 * mutated in memory via the reducer.
 */
export default function StepSimulate({
  plan,
  unresolved,
  selectedRowV2Id,
  transactionCountByV2Id,
  onResolveRow,
  onSelectRow,
  onNext,
  onBack,
}: StepSimulateProps) {
  const { t } = useTranslation();

  const selectedRow = useMemo<MappingRowType | null>(() => {
    if (selectedRowV2Id === null) return null;
    return (
      plan.rows.find((r) => r.v2CategoryId === selectedRowV2Id) ??
      plan.preserved.find((r) => r.v2CategoryId === selectedRowV2Id) ??
      null
    );
  }, [plan.rows, plan.preserved, selectedRowV2Id]);

  const canContinue = unresolved === 0;

  return (
    <section className="space-y-6">
      <header className="space-y-1">
        <h2 className="text-xl font-semibold">
          {t("categoriesSeed.migration.simulate.title")}
        </h2>
        <p className="text-sm text-[var(--muted-foreground)]">
          {t("categoriesSeed.migration.simulate.subtitle")}
        </p>
      </header>

      {/* Stats summary */}
      <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-5">
        <dl className="grid grid-cols-2 sm:grid-cols-5 gap-4 text-sm">
          <div>
            <dt className="text-xs uppercase text-[var(--muted-foreground)]">
              {t("categoriesSeed.migration.simulate.stats.total")}
            </dt>
            <dd className="text-lg font-semibold">{plan.stats.total}</dd>
          </div>
          <div>
            <dt className="text-xs uppercase text-[var(--muted-foreground)]">
              {t("categoriesSeed.migration.simulate.confidence.high")}
            </dt>
            <dd className="text-lg font-semibold text-green-600 dark:text-green-400">
              {plan.stats.high}
            </dd>
          </div>
          <div>
            <dt className="text-xs uppercase text-[var(--muted-foreground)]">
              {t("categoriesSeed.migration.simulate.confidence.medium")}
            </dt>
            <dd className="text-lg font-semibold text-blue-600 dark:text-blue-400">
              {plan.stats.medium}
            </dd>
          </div>
          <div>
            <dt className="text-xs uppercase text-[var(--muted-foreground)]">
              {t("categoriesSeed.migration.simulate.confidence.low")}
            </dt>
            <dd className="text-lg font-semibold text-orange-600 dark:text-orange-400">
              {plan.stats.low}
            </dd>
          </div>
          <div>
            <dt className="text-xs uppercase text-[var(--muted-foreground)]">
              {t("categoriesSeed.migration.simulate.confidence.none")}
            </dt>
            <dd className="text-lg font-semibold text-red-600 dark:text-red-400">
              {plan.stats.none}
            </dd>
          </div>
        </dl>
      </div>

      {/* Unresolved warning banner */}
      {unresolved > 0 && (
        <div
          role="status"
          className="flex items-start gap-3 rounded-xl border border-orange-300 bg-orange-50 p-4 dark:bg-orange-900/10 dark:border-orange-700"
        >
          <AlertTriangle
            size={18}
            className="mt-0.5 shrink-0 text-orange-600 dark:text-orange-400"
          />
          <p className="text-sm text-orange-900 dark:text-orange-200">
            {t("categoriesSeed.migration.simulate.unresolvedWarning", {
              count: unresolved,
            })}
          </p>
        </div>
      )}

      {/* Header row */}
      <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-3">
        <div
          className="grid grid-cols-12 gap-2 px-3 py-2 text-xs font-semibold uppercase text-[var(--muted-foreground)] border-b border-[var(--border)]"
          aria-hidden="true"
        >
          <div className="col-span-4">
            {t("categoriesSeed.migration.simulate.header.current")}
          </div>
          <div className="col-span-3">
            {t("categoriesSeed.migration.simulate.header.match")}
          </div>
          <div className="col-span-5 text-right">
            {t("categoriesSeed.migration.simulate.header.target")}
          </div>
        </div>

        <ul className="mt-2 space-y-1">
          {plan.rows.map((row) => (
            <li key={row.v2CategoryId}>
              <MappingRow
                row={row}
                isSelected={selectedRowV2Id === row.v2CategoryId}
                onSelect={onSelectRow}
                onResolve={onResolveRow}
                transactionCount={
                  transactionCountByV2Id.get(row.v2CategoryId) ?? 0
                }
              />
            </li>
          ))}
        </ul>
      </div>

      {/* Preserved categories block */}
      {plan.preserved.length > 0 && (
        <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-5 space-y-3">
          <div className="flex items-start gap-3">
            <FolderHeart
              size={18}
              className="mt-0.5 shrink-0 text-[var(--primary)]"
            />
            <div>
              <h3 className="font-semibold">
                {t("categoriesSeed.migration.simulate.preserved.title", {
                  count: plan.preserved.length,
                })}
              </h3>
              <p className="text-sm text-[var(--muted-foreground)]">
                {t("categoriesSeed.migration.simulate.preserved.body")}
              </p>
            </div>
          </div>
          <ul className="text-sm space-y-1">
            {plan.preserved.map((row) => (
              <li
                key={row.v2CategoryId}
                className="px-3 py-1.5 rounded-md bg-[var(--muted)] text-[var(--foreground)]"
              >
                <span className="font-medium">{row.v2CategoryName}</span>
                <span className="text-xs text-[var(--muted-foreground)] ml-2">
                  {t("categoriesSeed.migration.simulate.preserved.txCount", {
                    count: transactionCountByV2Id.get(row.v2CategoryId) ?? 0,
                  })}
                </span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Nav */}
      <div className="flex items-center justify-between">
        <button
          type="button"
          onClick={onBack}
          className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-[var(--border)] hover:bg-[var(--muted)] text-sm"
        >
          <ArrowLeft size={16} />
          {t("categoriesSeed.migration.simulate.back")}
        </button>
        <button
          type="button"
          onClick={onNext}
          disabled={!canContinue}
          className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--primary)] text-white hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50 transition-opacity"
        >
          {t("categoriesSeed.migration.simulate.next")}
          <ArrowRight size={16} />
        </button>
      </div>

      {/* Side panel with tx preview */}
      {selectedRow !== null && (
        <TransactionPreviewPanel
          row={selectedRow}
          onClose={() => onSelectRow(null)}
        />
      )}
    </section>
  );
}