import React from 'react';
import type { CompetitorCandidate } from '../types';
import EvidencePopover from './EvidencePopover';
import { EditableCard } from './EditableCard';

interface Step3CompetitorsProps {
    candidates: CompetitorCandidate[];
    onCandidatesChange: (candidates: CompetitorCandidate[]) => void;
    maxCompetitors: number;
    t: any;
}

const Step3Competitors: React.FC<Step3CompetitorsProps> = ({ candidates, onCandidatesChange, maxCompetitors, t }) => {
    const sortedCandidates = [...candidates].sort((a, b) => b.confidence - a.confidence);

    return (
        <div>
            <h2 className="text-2xl font-bold mb-4">{t.title}</h2>
            <p className="text-light-subtle dark:text-brand-light mb-6">
                {t.subtitle(maxCompetitors)}
            </p>

            <EditableCard<CompetitorCandidate>
                title={t.cardTitle}
                items={sortedCandidates}
                onItemsChange={onCandidatesChange}
                fieldConfigs={[
                    { key: 'name', label: t.nameLabel, type: 'text' },
                    { key: 'url', label: 'URL', type: 'text' },
                    { key: 'why', label: t.whyLabel, type: 'textarea' },
                ]}
                newItemTemplate={{ name: '', url: '', confidence: 0.8, why: '', evidence: [] }}
                renderDisplay={(item, index) => (
                    <div>
                        <div className="flex items-center justify-between">
                            <div className="flex items-center">
                                <strong className={`text-light-text dark:text-white ${index < maxCompetitors ? 'text-green-600 dark:text-green-400' : ''}`}>{item.name}</strong>
                                <a href={item.url} target="_blank" rel="noopener noreferrer" className="ml-2 text-blue-500 dark:text-blue-400 hover:underline text-sm">
                                    {t.visitButton}
                                </a>
                                <EvidencePopover evidence={item.evidence} />
                            </div>
                            <span className="text-xs font-mono bg-light-accent dark:bg-brand-accent text-light-text dark:text-white py-1 px-2 rounded-full">
                                {(item.confidence * 100).toFixed(0)}%
                            </span>
                        </div>
                        <p className="text-light-subtle dark:text-brand-light text-sm mt-1">{item.why}</p>
                        {index === maxCompetitors - 1 && <div className="border-t-2 border-dashed border-red-500 mt-4 pt-2 text-red-500 dark:text-red-400 text-xs text-center font-bold">{t.shortlistBoundary}</div>}
                    </div>
                )}
                 t={t.editableCard}
            />
        </div>
    );
};

export default Step3Competitors;