import React, { useState } from 'react';
import type { AppState, Battlecard } from '../types';

interface Step7BattlecardsProps {
    appState: AppState | null;
    t: any;
}

const ProfileIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 inline-block" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" /></svg>);
const StrengthsIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 inline-block" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clipRule="evenodd" /></svg>);
const LandmineIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 inline-block" viewBox="0 0 20 20" fill="currentColor"><path d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" /></svg>);
const BulletIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 inline-block" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clipRule="evenodd" /></svg>);

const BattlecardComponent: React.FC<{ battlecard: Battlecard, t: any }> = ({ battlecard, t }) => {
    
    return (
        <div className="bg-light-secondary dark:bg-brand-secondary p-6 rounded-lg shadow-lg relative">
            <div className="space-y-6">
                <div>
                    <h3 className="text-xl font-bold flex items-center mb-2"><ProfileIcon /> {t.profile}</h3>
                    <p className="text-light-subtle dark:text-brand-light pl-7">{battlecard.competitor_profile.focus}</p>
                    <p className="text-light-subtle dark:text-brand-light pl-7 mt-1">{battlecard.competitor_profile.positioning}</p>
                </div>
                <div>
                    <h3 className="text-xl font-bold flex items-center mb-2"><StrengthsIcon /> {t.strengths}</h3>
                    <ul className="list-disc list-inside space-y-1 text-light-subtle dark:text-brand-light pl-7">
                        {(battlecard.strengths_vs_weaknesses || []).map((item, i) => <li key={i}>{item}</li>)}
                    </ul>
                </div>
                <div>
                    <h3 className="text-xl font-bold flex items-center mb-2"><LandmineIcon /> {t.landmines}</h3>
                    <ul className="list-disc list-inside space-y-1 text-light-subtle dark:text-brand-light pl-7">
                        {(battlecard.landmine_questions || []).map((item, i) => <li key={i}>{item}</li>)}
                    </ul>
                </div>
                 <div>
                    <h3 className="text-xl font-bold flex items-center mb-2"><BulletIcon /> {t.silverBullet}</h3>
                    <blockquote className="border-l-4 border-brand-highlight pl-4 ml-7">
                        <p className="text-lg italic text-light-subtle dark:text-brand-light">"{battlecard.silver_bullet}"</p>
                    </blockquote>
                </div>
            </div>
        </div>
    );
}

const Step7_Battlecards: React.FC<Step7BattlecardsProps> = ({ appState, t }) => {
    const [activeTab, setActiveTab] = useState(0);

    if (!appState || !appState.battlecards || appState.battlecards.length === 0) {
        return (
            <div>
                <h2 className="text-2xl font-bold mb-4">{t.title}</h2>
                <p className="text-light-subtle dark:text-brand-light">{t.generating}</p>
            </div>
        );
    }
    
    const { battlecards } = appState;
    const activeBattlecard = battlecards[activeTab];

    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}
            </p>

            <div className="flex border-b border-light-accent dark:border-brand-accent mb-4 overflow-x-auto">
                {battlecards.map((card, index) => (
                    <button
                        key={index}
                        onClick={() => setActiveTab(index)}
                        className={`py-2 px-4 font-semibold text-sm focus:outline-none whitespace-nowrap ${
                            activeTab === index 
                            ? 'border-b-2 border-brand-highlight text-light-text dark:text-white' 
                            : 'text-light-subtle dark:text-brand-light hover:bg-light-accent dark:hover:bg-brand-accent'
                        }`}
                    >
                        {card.competitor_name}
                    </button>
                ))}
            </div>
            
            {activeBattlecard && <BattlecardComponent battlecard={activeBattlecard} t={t.card} />}

        </div>
    );
};

export default Step7_Battlecards;