'use client';

import ScanFixPanel from './ScanFixPanel';
import { useTranslation } from '../../../i18n/useTranslation';
import type { WorkspaceScanResult } from '../hooks/useI18nScanWorkflow';
import { useModalAnimation } from '../hooks/useModalAnimation';

type LanguageEntry = {
  code: string;
  name: string;
};

type NamespaceScanResult = {
  ns: string;
  total: number;
  translated: number;
  missing: number;
};

type Props = {
  isOpen: boolean;
  onClose: () => void;
  lastScanTime: Date | null;
  workspaceScan: WorkspaceScanResult | null;
  totalKeys: number;
  namespacesCount: number;
  allLanguages: LanguageEntry[];
  activeLang: string;
  scanResults: NamespaceScanResult[];
  scanError: string | null;
  isScanning: boolean;
  isAutoFixing: boolean;
  fixableFiles: string[];
  selectedFiles: string[];
  forceConvertToClient: boolean;
  onToggleFile: (file: string) => void;
  onSelectAll: () => void;
  onClear: () => void;
  onToggleForceConvertToClient: () => void;
  onRunFixSelected: () => void;
};

export default function ScanResultsModal({
  isOpen,
  onClose,
  lastScanTime,
  workspaceScan,
  totalKeys,
  namespacesCount,
  allLanguages,
  activeLang,
  scanResults,
  scanError,
  isScanning,
  isAutoFixing,
  fixableFiles,
  selectedFiles,
  forceConvertToClient,
  onToggleFile,
  onSelectAll,
  onClear,
  onToggleForceConvertToClient,
  onRunFixSelected,
}: Props) {
  const { t } = useTranslation();
  const { isRendered, isVisible } = useModalAnimation(isOpen);

  if (!isRendered) return null;

  const totalTranslated = scanResults.reduce((sum, row) => sum + row.translated, 0);
  const coveragePercent = totalKeys === 0
    ? 100
    : Math.round((totalTranslated / totalKeys) * 100);

  return (
    <div className={`fixed inset-0 z-[9999] flex items-start justify-center pt-14 pb-6 bg-black/50 backdrop-blur-sm transition-opacity duration-200 ${
      isVisible ? 'opacity-100' : 'opacity-0'
    }`}>
      <div className={`mx-3 w-full max-w-[1400px] rounded-3xl border border-slate-200 bg-white shadow-2xl flex flex-col max-h-[calc(100vh-5rem)] overflow-hidden transform transition-all duration-200 ${
        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-2 scale-[0.98]'
      }`}>
        <div className="px-8 pt-6 pb-5 border-b border-slate-200 bg-gradient-to-b from-slate-50 to-white">
          <div className="flex items-start justify-between gap-4">
            <div>
              <h2 className="text-2xl font-bold text-[#1C2B4A]">{t('autofix.kb2217bdf')}</h2>
              <p className="text-sm text-slate-600 mt-1">
                {workspaceScan
                  ? `${workspaceScan.scannedFiles} files across ${workspaceScan.scannedDirectories} directories scanned`
                  : `${totalKeys} keys across ${namespacesCount} namespaces`}
                {lastScanTime && (
                  <span className="ml-2 text-xs text-slate-500">
                    · Scanned {lastScanTime.toLocaleTimeString()}
                  </span>
                )}
              </p>
            </div>
            <button
              onClick={onClose}
              className="text-slate-400 hover:text-slate-700 ml-4 text-xl leading-none"
            >
              ✕
            </button>
          </div>

          <div className="mt-4">
            <div className="flex justify-between text-xs text-slate-500 mb-1">
              <span className="font-medium">Overall coverage ({allLanguages.find((l) => l.code === activeLang)?.name ?? activeLang})</span>
              <span>
                {activeLang === 'en'
                  ? `${totalKeys} / ${totalKeys}`
                  : `${totalTranslated} / ${totalKeys}`
                }
              </span>
            </div>
            <div className="h-2.5 rounded-full bg-slate-100 overflow-hidden">
              <div
                className="h-full rounded-full bg-[#1C2B4A] transition-all"
                style={{ width: activeLang === 'en' ? '100%' : `${coveragePercent}%` }}
              />
            </div>
          </div>

          {workspaceScan && (
            <div className="mt-5 grid grid-cols-2 lg:grid-cols-6 gap-2.5">
              <div className="rounded-xl border border-slate-200 bg-white px-3 py-2.5">
                <p className="text-[11px] uppercase tracking-wide text-slate-500">{t('autofix.k91052e3f')}</p>
                <p className="text-sm font-semibold text-[#1C2B4A]">{workspaceScan.translationCallCount}</p>
              </div>
              <div className="rounded-xl border border-slate-200 bg-white px-3 py-2.5">
                <p className="text-[11px] uppercase tracking-wide text-slate-500">{t('autofix.k90a6e795')}</p>
                <p className="text-sm font-semibold text-[#1C2B4A]">{workspaceScan.uniqueKeyCount}</p>
              </div>
              <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2.5">
                <p className="text-[11px] uppercase tracking-wide text-red-600">{t('autofix.k8cf40180')}</p>
                <p className="text-sm font-semibold text-red-600">{workspaceScan.missingKeys.length}</p>
              </div>
              <div className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2.5">
                <p className="text-[11px] uppercase tracking-wide text-amber-700">{t('autofix.k1bf4ffa4')}</p>
                <p className="text-sm font-semibold text-amber-700">{workspaceScan.untranslatedLiterals.length}</p>
              </div>
              <div className="rounded-xl border border-green-200 bg-green-50 px-3 py-2.5">
                <p className="text-[11px] uppercase tracking-wide text-green-700">{t('autofix.k9b173204')}</p>
                <p className="text-sm font-semibold text-green-700">{workspaceScan.changedFileCount ?? 0}</p>
              </div>
              <div className="rounded-xl border border-indigo-200 bg-indigo-50 px-3 py-2.5">
                <p className="text-[11px] uppercase tracking-wide text-indigo-700">{t('autofix.k60874ea3')}</p>
                <p className="text-sm font-semibold text-indigo-700">{workspaceScan.createdKeyCount ?? 0}</p>
              </div>
            </div>
          )}
        </div>

        <div className="overflow-y-auto flex-1 px-8 py-5">
          {scanError && (
            <div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
              {scanError}
            </div>
          )}

          {isScanning && (
            <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-700">{t('autofix.k0d9c63c5')}</div>
          )}

          {isAutoFixing && (
            <div className="mb-4 rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-sm text-indigo-700">{t('autofix.ka802064d')}</div>
          )}

          <div className="grid grid-cols-1 xl:grid-cols-12 gap-5 items-start">
            <div className="xl:col-span-5 space-y-4">
              <ScanFixPanel
                fixableFiles={fixableFiles}
                selectedFiles={selectedFiles}
                isAutoFixing={isAutoFixing}
                forceConvertToClient={forceConvertToClient}
                onToggleFile={onToggleFile}
                onSelectAll={onSelectAll}
                onClear={onClear}
                onToggleForceConvertToClient={onToggleForceConvertToClient}
                onRunFixSelected={onRunFixSelected}
              />

              {workspaceScan && (workspaceScan.changedFileCount ?? 0) > 0 && (
                <div className="rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
                  Auto-fix updated {(workspaceScan.changedFileCount ?? 0)} files and created {(workspaceScan.createdKeyCount ?? 0)} translation keys.
                </div>
              )}

              {workspaceScan && Array.isArray(workspaceScan.changedFiles) && workspaceScan.changedFiles.length > 0 && (
                <div className="rounded-xl border border-green-200 bg-green-50/50 p-4">
                  <h3 className="text-sm font-semibold text-green-700 mb-2">{t('autofix.k5ad4d864')}</h3>
                  <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
                    {workspaceScan.changedFiles.map((entry) => (
                      <div key={entry.file} className="rounded-md border border-green-100 bg-white px-3 py-2">
                        <p className="font-mono text-xs text-green-800">{entry.file}</p>
                        <p className="text-[11px] text-gray-600 mt-1">
                          {entry.replacements} replacements
                          {entry.addedImport ? ' · import added' : ''}
                          {entry.addedHook ? ' · hook added' : ''}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {workspaceScan && Array.isArray(workspaceScan.skippedFiles) && workspaceScan.skippedFiles.length > 0 && (
                <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
                  <h3 className="text-sm font-semibold text-gray-700 mb-2">{t('autofix.k56a52520')}</h3>
                  <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
                    {workspaceScan.skippedFiles.map((entry) => (
                      <div key={entry.file} className="rounded-md border border-gray-100 bg-white px-3 py-2">
                        <p className="font-mono text-xs text-gray-700">{entry.file}</p>
                        <p className="text-[11px] text-gray-500 mt-1">{entry.reason}</p>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {workspaceScan && Array.isArray(workspaceScan.autoFixDebug) && workspaceScan.autoFixDebug.length > 0 && (
                <div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
                  <h3 className="text-sm font-semibold text-slate-700 mb-2">{t('autofix.kc8034db6')}</h3>
                  <p className="text-xs text-slate-600 mb-3">{t('autofix.k9bd0812b')}</p>
                  <div className="space-y-2 max-h-64 overflow-y-auto pr-1">
                    {workspaceScan.autoFixDebug.slice(0, 200).map((entry) => (
                      <div key={`${entry.file}-${entry.status}-${entry.beforeLiteralCount}-${entry.afterLiteralCount}`} className="rounded-md border border-slate-200 bg-white px-3 py-2">
                        <div className="flex items-center justify-between gap-2">
                          <p className="font-mono text-xs text-slate-800 break-all">{entry.file}</p>
                          <span className={`text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full ${
                            entry.status === 'changed'
                              ? 'bg-green-100 text-green-700'
                              : entry.status === 'skipped'
                                ? 'bg-amber-100 text-amber-700'
                                : 'bg-slate-100 text-slate-700'
                          }`}>
                            {entry.status}
                          </span>
                        </div>
                        <p className="text-[11px] text-slate-600 mt-1">
                          before: {entry.beforeLiteralCount} · text: {entry.textReplacements} · attr: {entry.attrReplacements} · after: {entry.afterLiteralCount}
                        </p>
                        {entry.reason && <p className="text-[11px] text-slate-500 mt-1">{entry.reason}</p>}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            <div className="xl:col-span-7 space-y-4">
              <div className="rounded-xl border border-slate-200 bg-slate-50/40 p-4">
                <h3 className="text-sm font-semibold text-[#1C2B4A] mb-3">{t('autofix.kbe30c353')}</h3>
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-gray-100">
                      <th className="pb-2 text-left font-medium text-gray-500">Namespace</th>
                      <th className="pb-2 text-right font-medium text-gray-500">Keys</th>
                      <th className="pb-2 text-right font-medium text-gray-500">Translated</th>
                      <th className="pb-2 text-right font-medium text-gray-500">Missing</th>
                      <th className="pb-2 text-left pl-4 font-medium text-gray-500">Coverage</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-50">
                    {scanResults.map(({ ns, total, translated, missing }) => {
                      const pct = total === 0 ? 100 : Math.round((translated / total) * 100);
                      return (
                        <tr key={ns} className="hover:bg-gray-50">
                          <td className="py-2 font-mono text-xs text-[#1C2B4A]">{ns}</td>
                          <td className="py-2 text-right text-gray-500">{total}</td>
                          <td className="py-2 text-right text-green-600 font-medium">{translated}</td>
                          <td className={`py-2 text-right font-medium ${missing > 0 ? 'text-red-500' : 'text-gray-400'}`}>
                            {missing}
                          </td>
                          <td className="py-2 pl-4">
                            <div className="flex items-center gap-2">
                              <div className="w-24 h-1.5 rounded-full bg-gray-100 overflow-hidden">
                                <div
                                  className={`h-full rounded-full ${
                                    pct === 100 ? 'bg-green-500' : pct >= 50 ? 'bg-yellow-400' : 'bg-red-400'
                                  }`}
                                  style={{ width: `${pct}%` }}
                                />
                              </div>
                              <span className="text-xs text-gray-500">{pct}%</span>
                            </div>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>

              {workspaceScan && workspaceScan.missingKeys.length > 0 && (
                <div className="rounded-xl border border-red-200 bg-red-50/50 p-4">
                  <h3 className="text-sm font-semibold text-red-700 mb-2">{t('autofix.kae63e46a')}</h3>
                  <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
                    {workspaceScan.missingKeys.map((entry) => (
                      <div key={entry.key} className="rounded-md border border-red-100 bg-white px-3 py-2">
                        <p className="font-mono text-xs text-red-700">{entry.key}</p>
                        <p className="text-[11px] text-gray-500 mt-1">
                          {entry.files.slice(0, 3).join(', ')}
                          {entry.files.length > 3 ? ` (+${entry.files.length - 3} more)` : ''}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {workspaceScan && workspaceScan.untranslatedLiterals.length > 0 && (
                <div className="rounded-xl border border-amber-200 bg-amber-50/50 p-4">
                  <h3 className="text-sm font-semibold text-amber-700 mb-2">{t('autofix.k14eb468b')}</h3>
                  <p className="text-xs text-amber-700/80 mb-3">
                    These literals appear directly in JSX. Replace them with t('...') to make the page translatable.
                  </p>
                  <div className="space-y-2 max-h-56 overflow-y-auto pr-1">
                    {workspaceScan.untranslatedLiterals.slice(0, 80).map((entry) => (
                      <div key={entry.text} className="rounded-md border border-amber-100 bg-white px-3 py-2">
                        <p className="text-xs font-medium text-amber-800">{entry.text}</p>
                        <p className="text-[11px] text-gray-500 mt-1">
                          {entry.files.slice(0, 3).join(', ')}
                          {entry.files.length > 3 ? ` (+${entry.files.length - 3} more)` : ''}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="px-8 py-4 border-t border-slate-200 flex justify-between items-center bg-white">
          <p className="text-xs text-slate-500">
            Scan now checks workspace files (pages, components, hooks, utils) and compares used keys against en.ts.
          </p>
          <button
            onClick={onClose}
            className="rounded-md bg-[#1C2B4A] text-white px-4 py-2 text-sm font-semibold hover:bg-[#1C2B4A]/90"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
}