import { Copy, Download, AlertTriangle } from "lucide-react";
import { ReactNode } from "react";

interface EntityMapping {
  originalValue: string;
  anonymizedValue: string;
  entityType: string;
  startIndex: number;
  endIndex: number;
}

interface ResultPreviewComponentProps {
  outputText: string;
  copyToClipboard: () => void;
  downloadText: () => void;
  highlightEntities: (text: string, mappings?: EntityMapping[]) => ReactNode;
  entityMappings?: EntityMapping[];
}

export const ResultPreviewComponent = ({
  outputText,
  copyToClipboard,
  downloadText,
  highlightEntities,
  entityMappings,
}: ResultPreviewComponentProps) => {
  if (!outputText) return null;

  return (
    <div className="mt-8 space-y-4">
      <div className="flex items-center justify-between border-b border-[#f7ab6e] border-opacity-30 pb-2">
        <h3 className="text-lg font-medium text-[#092727]">
          Document anonymisé
        </h3>
        <div className="flex items-center gap-2">
          <button
            onClick={copyToClipboard}
            disabled={!outputText}
            className="p-2 text-[#092727] hover:text-[#f7ab6e] disabled:opacity-50"
            title="Copier"
          >
            <Copy className="h-4 w-4" />
          </button>

          <button
            onClick={downloadText}
            disabled={!outputText}
            className="bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-300 flex items-center space-x-2"
            title="Télécharger"
          >
            <Download className="h-4 w-4" />
            <span>Télécharger</span>
          </button>
        </div>
      </div>

      <div className="border border-[#f7ab6e] border-opacity-30 rounded-lg bg-white min-h-[400px] flex flex-col">
        <div className="flex-1 p-4 overflow-hidden">
          <div className="h-full min-h-[300px] text-[#092727] whitespace-pre-wrap overflow-y-auto">
            <div className="leading-relaxed">
              {highlightEntities(outputText, entityMappings)}
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-[#f7ab6e] border-opacity-30">
          <div className="flex items-start gap-2 p-2 bg-[#f7ab6e] bg-opacity-10 rounded-md">
            <AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
            <p className="text-sm text-[#092727]">
              Vérifiez le résultat pour vous assurer que toutes les informations
              privées sont supprimées et éviter une divulgation accidentelle.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};