"use client";

import { LuFile, LuSave, LuCheck, LuLoader, LuTriangleAlert, LuFileText, LuTag, LuPencil } from "react-icons/lu";
import { useRouter } from "next/navigation";

// --- TIPOS DE DATOS (SIN ANY) ---
type JSONObject = { [key: string]: JSONValue };
type JSONValue = string | number | boolean | null | JSONValue[] | JSONObject;

export interface ManagedFile {
  id: string;
  file: File;
  status: "pending" | "processing" | "completed" | "error" | "saving" | "saved";
  progress: number;
  extractedData?: JSONObject;
  errorMessage?: string;
  savedId?: string;
}

// --- COMPONENTE RESULT CARD ---
interface ResultCardProps {
  file: ManagedFile;
  onDataChange: (id: string, key: string, value: string) => void;
  onSaveData: (id: string) => void;
}

const ResultCard = ({ file, onDataChange, onSaveData }: ResultCardProps) => {
  const getStatusChip = () => {
    switch (file.status) {
      case "completed":
        return (
          <span className="text-xs font-semibold text-primary-foreground bg-primary px-2.5 py-1 rounded-full flex items-center gap-1.5">
            <LuPencil className="h-3 w-3" />
            Listo para guardar
          </span>
        );
      case "saving":
        return (
          <span className="flex items-center gap-1.5 text-xs font-semibold text-text-muted bg-background-alt px-2.5 py-1 rounded-full">
            <LuLoader className="animate-spin h-3 w-3" /> Guardando...
          </span>
        );
      case "saved":
        return (
          <span className="flex items-center gap-1.5 text-xs font-semibold text-success-foreground bg-success-background px-2.5 py-1 rounded-full border border-success-border">
            <LuCheck className="h-3 w-3" /> Guardado
          </span>
        );
      case "error":
        return (
          <span className="flex items-center gap-1.5 text-xs font-semibold text-destructive-foreground bg-destructive-background px-2.5 py-1 rounded-full border border-destructive-border">
            <LuTriangleAlert className="h-3 w-3" /> Error
          </span>
        );
      default:
        return null;
    }
  };

  const renderValue = (key: string, value: JSONValue) => {
    const isCurrency = key.toLowerCase().includes('total') ||
      key.toLowerCase().includes('precio') ||
      key.toLowerCase().includes('monto') ||
      key.toLowerCase().includes('itbis');

    if (typeof value === "string" || typeof value === "number") {
      return (
        <div className="relative">
          {isCurrency && (
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-text-subtle text-sm font-medium">$</span>
          )}
          <input
            type="text"
            value={String(value)}
            onChange={(e) => onDataChange(file.id, key, e.target.value)}
            disabled={file.status === "saving" || file.status === "saved"}
            className={`w-full py-2.5 border border-border-subtle bg-background text-text rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-background-alt disabled:text-text-subtle transition-all focus-ring ${
              isCurrency ? 'pl-8 pr-4' : 'px-4'
            }`}
          />
        </div>
      );
    }

    if (Array.isArray(value)) {
      return (
        <div className="border border-border-subtle rounded-lg bg-background-alt/50 p-3 space-y-2">
          {value.length === 0 ? (
            <p className="text-xs text-text-subtle italic">Sin datos</p>
          ) : (
            value.map((item, idx) => (
              <div
                key={idx}
                className="border border-border-subtle bg-background rounded-lg p-3 text-xs space-y-1"
              >
                <p className="font-semibold text-text">Item {idx + 1}</p>
                {typeof item === "object" && item !== null && !Array.isArray(item) ? (
                  Object.entries(item).map(([subKey, subVal]) => (
                    <div key={subKey} className="flex justify-between gap-2">
                      <span className="text-text-subtle capitalize">
                        {subKey.replace(/_/g, " ")}:
                      </span>
                      <span className="text-text font-medium">
                        {String(subVal ?? "")}
                      </span>
                    </div>
                  ))
                ) : (
                  <span className="text-text">{String(item)}</span>
                )}
              </div>
            ))
          )}
        </div>
      );
    }

    if (typeof value === "object" && value !== null) {
      return (
        <div className="border border-border-subtle bg-background-alt/50 rounded-lg p-3 text-xs space-y-1">
          {Object.entries(value).map(([subKey, subVal]) => (
            <div key={subKey} className="flex justify-between gap-2">
              <span className="text-text-subtle capitalize">
                {subKey.replace(/_/g, " ")}:
              </span>
              <span className="text-text font-medium">{String(subVal ?? "")}</span>
            </div>
          ))}
        </div>
      );
    }

    return <span className="text-text-subtle italic text-sm">Sin valor</span>;
  };

  return (
    <div className="bg-background border border-border-subtle rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow">
      {/* Header de archivo */}
      <div className="flex justify-between items-center mb-6 pb-4 border-b border-border-subtle">
        <div className="flex items-center gap-3 min-w-0">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-faint to-primary-subtle flex items-center justify-center flex-shrink-0">
            <LuFileText className="h-5 w-5 text-primary" />
          </div>
          <p className="text-sm font-semibold text-text truncate">
            {file.file.name}
          </p>
        </div>
        {getStatusChip()}
      </div>

      {file.status === "error" && (
        <div className="mb-4 p-3 bg-destructive-background border border-destructive-border rounded-xl">
          <p className="text-sm text-destructive-foreground flex items-start gap-2">
            <LuTriangleAlert className="h-4 w-4 flex-shrink-0 mt-0.5" />
            {file.errorMessage}
          </p>
        </div>
      )}

      {/* Formulario de campos */}
      {file.extractedData && (
        <div className="space-y-4">
          {Object.entries(file.extractedData).map(([key, value]) => (
            <div key={key}>
              <label className="block text-xs font-semibold text-text-muted uppercase tracking-wide mb-2">
                {key.replace(/_/g, " ")}
              </label>
              {renderValue(key, value)}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// --- COMPONENTE PRINCIPAL ---
interface Props {
  files: ManagedFile[];
  onReset: () => void;
  onDataChange: (id: string, key: string, value: string) => void;
  onSaveData: (id: string) => void;
  onSaveAll: () => void;
  selectedCategory: string;
  categories: Array<{ id: string; name: string; icon: string | null; color: string | null }>;
}

export default function Step4ReviewAndSave({
  files,
  onReset,
  onDataChange,
  onSaveData,
  onSaveAll,
  selectedCategory,
  categories,
}: Props) {
  const router = useRouter();

  const unsavedCount = files.filter((f) => f.status === "completed").length;
  const isSavingAny = files.some((f) => f.status === "saving");
  const allSaved = files.every(
    (f) => f.status === "saved" || f.status === "error"
  );

  const category = categories.find((c) => c.id === selectedCategory);

  return (
    <>
      {/* Header */}
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold text-text">Revisar y Guardar</h2>
        <p className="text-text-muted text-sm mt-2 max-w-lg mx-auto">
          {allSaved
            ? "Todos los archivos han sido procesados y guardados exitosamente."
            : `Se extrajeron datos de ${files.length} archivo(s). Revisa, edita si es necesario y guarda.`}
        </p>
      </div>

      {/* Badge de categoría y botón guardar todos */}
      <div className="flex flex-col items-center gap-4 mb-6">
        {category && (
          <div
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold shadow-sm"
            style={{
              backgroundColor: `${category.color}15`,
              color: category.color || '#3B82F6',
              border: `1px solid ${category.color}30`
            }}
          >
            <LuTag className="h-4 w-4" />
            Categoría: {category.name}
          </div>
        )}

        {unsavedCount > 0 && (
          <button
            onClick={onSaveAll}
            disabled={isSavingAny}
            className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-primary-hover text-primary-foreground font-semibold rounded-xl hover:shadow-lg hover:scale-105 disabled:bg-background-alt disabled:text-text-subtle disabled:cursor-not-allowed disabled:hover:scale-100 transition-all duration-200"
          >
            <LuSave className="h-5 w-5" />
            {isSavingAny ? "Guardando..." : `Guardar Todos (${unsavedCount})`}
          </button>
        )}
      </div>

      {/* Lista de archivos con datos */}
      <div className="space-y-4 max-h-[55vh] overflow-y-auto pr-2 custom-scrollbar">
        {files.map((file) => (
          <ResultCard
            key={file.id}
            file={file}
            onDataChange={onDataChange}
            onSaveData={onSaveData}
          />
        ))}
      </div>

      {/* Footer con acciones */}
      <div className="flex flex-col sm:flex-row items-center gap-4 mt-6 pt-6 border-t border-border-subtle">
        <button
          onClick={onReset}
          className="w-full sm:flex-1 py-3 border border-border-subtle rounded-xl hover:bg-background-alt text-sm font-semibold text-text transition-colors focus-ring"
        >
          Escanear Otro
        </button>
        <button
          onClick={() => router.push("/dashboard")}
          className="w-full sm:flex-1 py-3 bg-gradient-to-r from-primary to-primary-hover text-primary-foreground rounded-xl hover:shadow-lg hover:scale-105 text-sm font-semibold transition-all duration-200 focus-ring"
        >
          Finalizar e ir al Dashboard
        </button>
      </div>
    </>
  );
}