// app/upload/components/ReviewCard.tsx
"use client";

import { FiCheckCircle, FiAlertCircle, FiSave } from "react-icons/fi";
import { ManagedFile } from "./types";

interface ReviewCardProps {
  file: ManagedFile;
  onDataChange: (id: string, key: string, value: string) => void;
  onSaveData: (id: string) => void;
}

export default function ReviewCard({
  file,
  onDataChange,
  onSaveData,
}: ReviewCardProps) {
  return (
    <div className="bg-background border border-border-subtle rounded-xl shadow-sm p-4 sm:p-6">
      <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-2 mb-4">
        <h3 className="font-semibold text-text truncate">
          {file.file.name}
        </h3>
        {file.status === "saved" && (
          <span className="flex items-center gap-2 text-success text-sm font-medium">
            <FiCheckCircle /> Guardado
          </span>
        )}
      </div>
      {file.status === "error" && (
        <div className="bg-destructive-background text-destructive p-3 rounded-lg flex items-start gap-3">
          <FiAlertCircle className="h-5 w-5 mt-0.5" />
          <p className="text-sm">{file.errorMessage}</p>
        </div>
      )}
      {file.extractedData && (
        <div className="space-y-4 border-t border-border-subtle pt-4">
          {Object.entries(file.extractedData).map(([key, value]) => (
            <div key={key}>
              <label className="block text-sm font-medium text-text-muted mb-1 capitalize">
                {key.replace(/_/g, " ")}
              </label>
              <input
                type="text"
                defaultValue={String(value)}
                onChange={(e) => onDataChange(file.id, key, e.target.value)}
                className="w-full p-2 border border-border-subtle bg-background text-text rounded-lg focus-ring"
              />
            </div>
          ))}
          <div className="flex justify-end pt-2">
            <button
              onClick={() => onSaveData(file.id)}
              disabled={file.status === "saving" || file.status === "saved"}
              className="w-full sm:w-auto flex items-center justify-center gap-2 px-6 py-2.5 bg-primary text-primary-foreground font-semibold rounded-lg hover:bg-primary-hover transition-colors disabled:bg-background-alt disabled:text-text-subtle disabled:cursor-not-allowed"
            >
              <FiSave size={16} />
              {file.status === "saving" ? "Guardando..." : "Guardar Datos"}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}