import { useState, useEffect } from 'react';
import { screeningGuideApi, type RiskCategoryResponse, type RiskIndicatorResponse } from '../../api/screeningGuideApi';

interface RiskTabProps {
    lang: string;
}

type ViewMode = 'table' | 'card';

const CAT_COLORS: Record<string, string> = {
    'AIS': 'bg-blue-800',
    'Port Calls': 'bg-emerald-800',
    'Associated with Russia': 'bg-red-800',
    'Behavioural Risk': 'bg-amber-800',
    'Safety, Security & Inspections': 'bg-blue-600',
    'Flag Risk': 'bg-purple-800',
    'Owner & Classification': 'bg-teal-700',
};

const CAT_HEX: Record<string, string> = {
    'AIS': '#1e40af',
    'Port Calls': '#065f46',
    'Associated with Russia': '#991b1b',
    'Behavioural Risk': '#92400e',
    'Safety, Security & Inspections': '#1d4ed8',
    'Flag Risk': '#6b21a8',
    'Owner & Classification': '#0f766e',
};

function getCatColor(categoryName: string): string {
    return CAT_COLORS[categoryName] ?? 'bg-slate-700';
}

function getCatHex(categoryName: string): string {
    return CAT_HEX[categoryName] ?? '#374151';
}

interface FlatRow {
    category: string;
    indicator: RiskIndicatorResponse;
}

export default function RiskTab({ lang }: RiskTabProps) {
    const [categories, setCategories] = useState<RiskCategoryResponse[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [selectedCategory, setSelectedCategory] = useState('전체');
    const [viewMode, setViewMode] = useState<ViewMode>('table');

    useEffect(() => {
        setLoading(true);
        setError(null);
        screeningGuideApi
            .getRiskIndicators(lang)
            .then((res) => setCategories(res.data ?? []))
            .catch((err: Error) => setError(err.message))
            .finally(() => setLoading(false));
    }, [lang]);

    const flatRows: FlatRow[] = categories.flatMap((cat) =>
        cat.indicators.map((ind) => ({ category: cat.categoryName, indicator: ind })),
    );

    const filtered: FlatRow[] =
        selectedCategory === '전체'
            ? flatRows
            : flatRows.filter((r) => r.category === selectedCategory);

    function downloadCSV() {
        const bom = '\uFEFF';
        const headers = [
            '카테고리',
            '필드키',
            '필드명',
            '설명',
            'RED 조건',
            'AMBER 조건',
            'GREEN 조건',
            '데이터 타입',
            '이력 관리 참고사항',
        ];
        const rows = flatRows.map((r) =>
            [
                r.category,
                r.indicator.fieldKey,
                r.indicator.fieldName,
                r.indicator.description,
                r.indicator.conditionRed,
                r.indicator.conditionAmber,
                r.indicator.conditionGreen,
                r.indicator.dataType,
                r.indicator.collectionNote,
            ]
                .map((v) => `"${(v ?? '').replace(/"/g, '""')}"`)
                .join(','),
        );
        const csv = bom + [headers.join(','), ...rows].join('\n');
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = 'MIRS_Risk_Indicators.csv';
        a.click();
    }

    if (loading) {
        return (
            <div className="flex items-center justify-center py-20 text-wing-muted">
                <div className="text-center">
                    <div className="text-2xl mb-2">⏳</div>
                    <div className="text-sm">데이터를 불러오는 중...</div>
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="bg-red-50 border border-red-300 rounded-xl p-6 text-red-800 text-sm">
                <strong>데이터 로딩 실패:</strong> {error}
            </div>
        );
    }

    return (
        <div className="space-y-4">
            {/* 카테고리 요약 카드 */}
            <div className="grid grid-cols-4 gap-3 lg:grid-cols-7">
                {categories.map((cat) => {
                    const isActive = selectedCategory === cat.categoryName;
                    const hex = getCatHex(cat.categoryName);
                    return (
                        <button
                            key={cat.categoryCode}
                            onClick={() =>
                                setSelectedCategory(isActive ? '전체' : cat.categoryName)
                            }
                            className="rounded-lg p-3 text-center cursor-pointer transition-all border-2"
                            style={{
                                background: isActive ? hex : undefined,
                                borderColor: isActive ? hex : undefined,
                            }}
                        >
                            <div
                                className={`text-xl font-bold ${isActive ? 'text-white' : 'text-wing-text'}`}
                            >
                                {cat.indicators.length}
                            </div>
                            <div
                                className={`text-xs font-semibold leading-tight mt-1 ${isActive ? 'text-white' : 'text-wing-muted'}`}
                            >
                                {cat.categoryName}
                            </div>
                        </button>
                    );
                })}
            </div>

            {/* 컨트롤 바 */}
            <div className="flex items-center gap-3 flex-wrap">
                <button
                    onClick={() => setSelectedCategory('전체')}
                    className={`px-4 py-1.5 rounded-full text-xs font-bold transition-colors border ${
                        selectedCategory === '전체'
                            ? 'bg-slate-900 text-white border-slate-900'
                            : 'bg-wing-card text-wing-muted border-wing-border hover:text-wing-text'
                    }`}
                >
                    전체 ({flatRows.length})
                </button>
                <div className="flex-1" />
                <span className="text-xs text-wing-muted">
                    표시:{' '}
                    <strong className="text-wing-text">{filtered.length}</strong>개 항목
                </span>
                <button
                    onClick={() => setViewMode(viewMode === 'table' ? 'card' : 'table')}
                    className="px-3 py-1.5 rounded-lg border border-wing-border bg-wing-card text-wing-muted text-xs font-semibold hover:text-wing-text transition-colors"
                >
                    {viewMode === 'table' ? '📋 카드 보기' : '📊 테이블 보기'}
                </button>
                <button
                    onClick={downloadCSV}
                    className="px-4 py-1.5 rounded-lg bg-green-600 text-white text-xs font-bold hover:bg-green-700 transition-colors"
                >
                    ⬇ CSV 다운로드
                </button>
            </div>

            {/* 테이블 뷰 */}
            {viewMode === 'table' && (
                <div className="bg-wing-surface rounded-xl shadow-md overflow-hidden">
                    <div className="overflow-x-auto">
                        <table className="w-full text-xs border-collapse">
                            <thead>
                                <tr className="bg-slate-900 text-white">
                                    {[
                                        '카테고리',
                                        '필드명',
                                        '설명',
                                        '🔴 RED',
                                        '🟡 AMBER',
                                        '🟢 GREEN',
                                        '데이터 타입',
                                        '이력 관리 참고',
                                    ].map((h) => (
                                        <th
                                            key={h}
                                            className="px-3 py-2.5 text-left font-semibold whitespace-nowrap"
                                        >
                                            {h}
                                        </th>
                                    ))}
                                </tr>
                            </thead>
                            <tbody>
                                {filtered.map((row, i) => {
                                    const showCat =
                                        i === 0 ||
                                        filtered[i - 1].category !== row.category;
                                    const hex = getCatHex(row.category);
                                    return (
                                        <tr
                                            key={`${row.indicator.indicatorId}-${i}`}
                                            className="border-b border-wing-border align-top even:bg-wing-card"
                                        >
                                            <td className="px-3 py-2.5 min-w-[110px]">
                                                {showCat && (
                                                    <span
                                                        className="inline-block text-white rounded px-2 py-0.5 text-[10px] font-bold"
                                                        style={{ background: hex }}
                                                    >
                                                        {row.category}
                                                    </span>
                                                )}
                                            </td>
                                            <td className="px-3 py-2.5 min-w-[160px]">
                                                <div className="font-bold text-wing-text">
                                                    {row.indicator.fieldName}
                                                </div>
                                                <div className="text-wing-muted text-[10px] mt-0.5">
                                                    {row.indicator.fieldKey}
                                                </div>
                                            </td>
                                            <td className="px-3 py-2.5 min-w-[220px] leading-relaxed text-wing-text">
                                                {row.indicator.description}
                                            </td>
                                            <td className="px-3 py-2.5 min-w-[130px]">
                                                <div className="bg-red-50 border border-red-300 rounded px-2 py-1 text-red-800">
                                                    {row.indicator.conditionRed}
                                                </div>
                                            </td>
                                            <td className="px-3 py-2.5 min-w-[130px]">
                                                <div className="bg-amber-50 border border-amber-300 rounded px-2 py-1 text-amber-800">
                                                    {row.indicator.conditionAmber}
                                                </div>
                                            </td>
                                            <td className="px-3 py-2.5 min-w-[130px]">
                                                <div className="bg-green-50 border border-green-300 rounded px-2 py-1 text-green-800">
                                                    {row.indicator.conditionGreen}
                                                </div>
                                            </td>
                                            <td className="px-3 py-2.5 min-w-[110px] text-wing-muted">
                                                {row.indicator.dataType}
                                            </td>
                                            <td className="px-3 py-2.5 min-w-[200px] text-blue-600 leading-relaxed">
                                                {row.indicator.collectionNote &&
                                                    `💡 ${row.indicator.collectionNote}`}
                                            </td>
                                        </tr>
                                    );
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            )}

            {/* 카드 뷰 */}
            {viewMode === 'card' && (
                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                    {filtered.map((row, i) => {
                        const hex = getCatHex(row.category);
                        const colorClass = getCatColor(row.category);
                        return (
                            <div
                                key={`${row.indicator.indicatorId}-${i}`}
                                className="bg-wing-surface rounded-xl shadow-md overflow-hidden"
                            >
                                <div
                                    className={`${colorClass} px-4 py-2.5 flex justify-between items-center`}
                                    style={{ background: hex }}
                                >
                                    <span className="text-white text-[10px] font-bold">
                                        {row.category}
                                    </span>
                                    <span className="text-white/75 text-[10px]">
                                        {row.indicator.dataType}
                                    </span>
                                </div>
                                <div className="p-4">
                                    <div className="font-bold text-sm text-wing-text mb-0.5">
                                        {row.indicator.fieldName}
                                    </div>
                                    <div className="text-[10px] text-wing-muted mb-3">
                                        {row.indicator.fieldKey}
                                    </div>
                                    <div className="text-xs text-wing-text leading-relaxed mb-3">
                                        {row.indicator.description}
                                    </div>
                                    <div className="grid grid-cols-3 gap-2 mb-3">
                                        <div className="bg-red-50 rounded-lg p-2">
                                            <div className="text-[10px] font-bold text-red-800 mb-1">
                                                🔴 RED
                                            </div>
                                            <div className="text-[11px] text-red-800">
                                                {row.indicator.conditionRed}
                                            </div>
                                        </div>
                                        <div className="bg-amber-50 rounded-lg p-2">
                                            <div className="text-[10px] font-bold text-amber-800 mb-1">
                                                🟡 AMBER
                                            </div>
                                            <div className="text-[11px] text-amber-800">
                                                {row.indicator.conditionAmber}
                                            </div>
                                        </div>
                                        <div className="bg-green-50 rounded-lg p-2">
                                            <div className="text-[10px] font-bold text-green-800 mb-1">
                                                🟢 GREEN
                                            </div>
                                            <div className="text-[11px] text-green-800">
                                                {row.indicator.conditionGreen}
                                            </div>
                                        </div>
                                    </div>
                                    {row.indicator.collectionNote && (
                                        <div className="bg-blue-50 rounded-lg p-3 text-[11px] text-blue-700 leading-relaxed">
                                            💡 {row.indicator.collectionNote}
                                        </div>
                                    )}
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
}