import type { StockAIAnalysis } from '@/lib/actions/stock-analysis.helpers';

interface StockAIAnalysisCardProps {
    analysis: StockAIAnalysis | null;
}

function getStanceClasses(stance: StockAIAnalysis['stance']) {
    if (stance === 'Bullish') return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300';
    if (stance === 'Bearish') return 'border-rose-500/30 bg-rose-500/10 text-rose-300';
    return 'border-amber-500/30 bg-amber-500/10 text-amber-200';
}

function renderList(title: string, items: string[]) {
    return (
        <div className="rounded-xl border border-gray-800 bg-black/20 p-4">
            <h3 className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-400">{title}</h3>
            {items.length ? (
                <ul className="mt-3 space-y-3">
                    {items.map((item) => (
                        <li key={item} className="flex gap-3 text-sm text-gray-200">
                            <span className="mt-2 h-1.5 w-1.5 rounded-full bg-yellow-400" />
                            <span>{item}</span>
                        </li>
                    ))}
                </ul>
            ) : (
                <p className="mt-3 text-sm text-gray-400">No additional signals generated.</p>
            )}
        </div>
    );
}

export default function StockAIAnalysisCard({ analysis }: StockAIAnalysisCardProps) {
    if (!analysis) {
        return (
            <section className="rounded-2xl border border-gray-800 bg-gray-950/40 p-5 backdrop-blur-sm">
                <p className="text-xs font-semibold uppercase tracking-[0.22em] text-gray-500">AI Stock Analysis</p>
                <h2 className="mt-2 text-xl font-semibold text-white">Professional research note unavailable</h2>
                <p className="mt-3 text-sm leading-6 text-gray-400">
                    The stock dashboard data loaded, but an AI research note could not be generated right now.
                </p>
            </section>
        );
    }

    return (
        <section className="rounded-2xl border border-gray-800 bg-gray-950/40 p-5 backdrop-blur-sm">
            <div className="flex flex-col gap-4">
                <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                    <div>
                        <p className="text-xs font-semibold uppercase tracking-[0.22em] text-gray-500">
                            AI Stock Analysis
                        </p>
                        <h2 className="mt-2 text-xl font-semibold text-white">
                            {analysis.companyName ? `${analysis.companyName} (${analysis.symbol})` : analysis.symbol}
                        </h2>
                        <p className="mt-2 text-sm leading-6 text-gray-300">{analysis.summary}</p>
                    </div>

                    <div className="flex flex-wrap gap-2">
                        <span
                            className={`rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] ${getStanceClasses(analysis.stance)}`}
                        >
                            {analysis.stance}
                        </span>
                        <span className="rounded-full border border-gray-700 bg-black/20 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-gray-200">
                            {analysis.confidence} confidence
                        </span>
                    </div>
                </div>

                <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                    {renderList('Key drivers', analysis.keyDrivers)}
                    {renderList('Risks', analysis.risks)}
                    {renderList('What to watch', analysis.watchItems)}
                </div>

                <p className="text-xs text-gray-500">
                    Educational analysis only. Use it as a synthesis of the dashboard inputs, not as personal
                    financial advice.
                </p>
            </div>
        </section>
    );
}