import React, { useState, useEffect } from 'react';
import {
    ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip as RechartsTooltip,
    ResponsiveContainer, Label
} from 'recharts';
import {
    FlaskConical, Calendar, Clock, Target, AlertTriangle, Copy,
    Check, TrendingUp, Info, HelpCircle
} from 'lucide-react';
import { Card } from './common/Card';
import { labApi } from '../services/api';
import type { LabKPI, ScatterPoint, OrphanSample } from '../types';

export const LabView: React.FC = () => {
    const [kpi, setKpi] = useState<LabKPI>({
        converted_count: 0,
        avg_velocity: 0,
        conversion_rate: 0,
        orphan_count: 0
    });
    const [scatterData, setScatterData] = useState<ScatterPoint[]>([]);
    const [orphans, setOrphans] = useState<OrphanSample[]>([]);
    const [conversions, setConversions] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [dateRange, setDateRange] = useState<'all' | '12m' | '6m' | '3m'>('all');
    const [useLogScale, setUseLogScale] = useState(false);
    const [copiedId, setCopiedId] = useState<number | null>(null);
    const [viewMode, setViewMode] = useState<'orphans' | 'conversions'>('orphans');

    useEffect(() => {
        loadLabData();
    }, [dateRange]);

    const loadLabData = async () => {
        setLoading(true);
        try {
            let start_date = '';
            const now = new Date();
            if (dateRange === '12m') {
                start_date = new Date(now.setFullYear(now.getFullYear() - 1)).toISOString().split('T')[0];
            } else if (dateRange === '6m') {
                start_date = new Date(now.setMonth(now.getMonth() - 6)).toISOString().split('T')[0];
            } else if (dateRange === '3m') {
                start_date = new Date(now.setMonth(now.getMonth() - 3)).toISOString().split('T')[0];
            }

            const params = start_date ? { start_date } : {};

            const [kpiData, scatterRes, orphanRes, conversionRes] = await Promise.all([
                labApi.getKPI(params),
                labApi.getScatter(params),
                labApi.getOrphans(),
                labApi.getConversions()
            ]);

            setKpi(kpiData);
            setScatterData(scatterRes);
            setOrphans(orphanRes);
            setConversions(conversionRes);
        } catch (error) {
            console.error('Error loading lab data:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleCopy = (orphan: OrphanSample, index: number) => {
        const text = `Customer: ${orphan.customer}\nPart No: ${orphan.pn}\nSent Date: ${orphan.date?.replace(/(\d{4})(\d{2})(\d{2})/, '$1/$2/$3')}\nDays Ago: ${orphan.days_since_sent}`;
        navigator.clipboard.writeText(text);
        setCopiedId(index);
        setTimeout(() => setCopiedId(null), 2000);
    };

    const [selectedGroup, setSelectedGroup] = useState<string | null>(null);

    // Calculate grouping info
    const groupInfo = React.useMemo(() => {
        const counts: Record<string, number> = {};
        orphans.forEach(o => {
            const key = `${o.customer}|${o.pn}`;
            counts[key] = (counts[key] || 0) + 1;
        });
        return counts;
    }, [orphans]);

    if (loading) {
        return (
            <div className="flex items-center justify-center py-20">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
            </div>
        );
    }

    return (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h1 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
                        <FlaskConical className="text-indigo-600" />
                        送樣成效分析戰情室 (Sample Conversion Lab)
                    </h1>
                    <p className="text-slate-500 mt-1">
                        焦點分析：樣品投資報酬率 (ROI) 與 轉換速度 | 邏輯：ERP Code + PN 直接比對
                    </p>
                </div>

                <div className="flex items-center gap-2 bg-white p-1 rounded-lg border border-slate-200 shadow-sm">
                    {(['all', '12m', '6m', '3m'] as const).map((r) => (
                        <button
                            key={r}
                            onClick={() => setDateRange(r)}
                            className={`px-3 py-1.5 text-xs font-bold rounded-md transition-all ${dateRange === r
                                ? 'bg-indigo-600 text-white'
                                : 'text-slate-500 hover:bg-slate-50'
                                }`}
                        >
                            {r === 'all' ? '全部時間' : r === '12m' ? '最近 12 個月' : r === '6m' ? '最近 6 個月' : '最近 3 個月'}
                        </button>
                    ))}
                </div>
            </div>

            {/* KPI Cards */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <Card
                    onClick={() => setViewMode('conversions')}
                    className={`p-6 border-b-4 border-b-blue-500 bg-gradient-to-br from-white to-blue-50/30 cursor-pointer transition-all hover:shadow-md ${viewMode === 'conversions' ? 'ring-2 ring-blue-500 ring-offset-2' : ''}`}
                >
                    <div className="flex justify-between items-start">
                        <div>
                            <div className="text-sm text-slate-500 font-medium mb-1">成功收單總數</div>
                            <div className="text-3xl font-bold text-slate-800">{kpi.converted_count} 筆</div>
                            <div className="text-xs text-blue-600 mt-2 flex items-center gap-1 font-bold">
                                <Check size={12} />
                                Converted Samples
                            </div>
                        </div>
                        <div className="p-3 bg-blue-100 text-blue-600 rounded-xl">
                            <TrendingUp size={24} />
                        </div>
                    </div>
                </Card>

                <Card className="p-6 border-b-4 border-b-indigo-500 bg-gradient-to-br from-white to-indigo-50/30">
                    <div className="flex justify-between items-start">
                        <div>
                            <div className="text-sm text-slate-500 font-medium mb-1">平均轉換速度</div>
                            <div className="text-3xl font-bold text-slate-800">{kpi.avg_velocity} 天</div>
                            <div className="text-xs text-indigo-600 mt-2 flex items-center gap-1 font-bold">
                                <Clock size={12} />
                                Conversion Velocity
                            </div>
                        </div>
                        <div className="p-3 bg-indigo-100 text-indigo-600 rounded-xl">
                            <Clock size={24} />
                        </div>
                    </div>
                </Card>

                <Card className="p-6 border-b-4 border-b-emerald-500 bg-gradient-to-br from-white to-emerald-50/30">
                    <div className="flex justify-between items-start">
                        <div>
                            <div className="text-sm text-slate-500 font-medium mb-1">整體轉換倍率 (ROI)</div>
                            <div className="text-3xl font-bold text-slate-800">{kpi.conversion_rate}%</div>
                            <div className="text-xs text-emerald-600 mt-2 flex items-center gap-1 font-bold">
                                <Target size={12} />
                                Sample to Order Ratio
                            </div>
                        </div>
                        <div className="p-3 bg-emerald-100 text-emerald-600 rounded-xl">
                            <FlaskConical size={24} />
                        </div>
                    </div>
                </Card>

                <Card
                    onClick={() => setViewMode('orphans')}
                    className={`p-6 border-b-4 border-b-rose-500 bg-gradient-to-br from-white to-rose-50/30 cursor-pointer transition-all hover:shadow-md ${viewMode === 'orphans' ? 'ring-2 ring-rose-500 ring-offset-2' : ''}`}
                >
                    <div className="flex justify-between items-start">
                        <div>
                            <div className="text-sm text-slate-500 font-medium mb-1">無訂單樣品總數</div>
                            <div className="text-3xl font-bold text-rose-600">{kpi.orphan_count} 筆</div>
                            <div className="text-xs text-rose-400 mt-2 flex items-center gap-1 font-bold">
                                <AlertTriangle size={12} />
                                Wait-time &gt; 90 Days
                            </div>
                        </div>
                        <div className="p-3 bg-rose-100 text-rose-600 rounded-xl">
                            <AlertTriangle size={24} />
                        </div>
                    </div>
                </Card>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Scatter Matrix */}
                <Card className="lg:col-span-2 p-6 overflow-hidden relative">
                    <div className="flex justify-between items-center mb-6">
                        <h3 className="font-bold text-slate-700 flex items-center gap-2">
                            <FlaskConical size={18} className="text-indigo-500" />
                            送樣量與訂單量分佈矩陣 (Sample ROI Matrix)
                        </h3>
                        <div className="flex items-center gap-2">
                            <label className="text-xs text-slate-500 font-medium">Log Scale</label>
                            <button
                                onClick={() => setUseLogScale(!useLogScale)}
                                className={`w-10 h-5 rounded-full transition-colors relative ${useLogScale ? 'bg-indigo-600' : 'bg-slate-200'}`}
                            >
                                <div className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${useLogScale ? 'left-6' : 'left-1'}`} />
                            </button>
                        </div>
                    </div>

                    <div className="h-[400px] w-full">
                        <ResponsiveContainer width="100%" height="100%">
                            <ScatterChart
                                margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
                                onClick={(data: any) => {
                                    if (data && data.activePayload && data.activePayload[0]) {
                                        const point = data.activePayload[0].payload as ScatterPoint;
                                        if (point.order_qty > 0) {
                                            setViewMode('conversions');
                                        } else {
                                            setViewMode('orphans');
                                        }
                                    }
                                }}
                            >
                                <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                                <XAxis
                                    type="number"
                                    dataKey="sample_qty"
                                    name="Sample Qty"
                                    scale={useLogScale ? "log" : "linear"}
                                    domain={useLogScale ? ['auto', 'auto'] : [0, 'auto']}
                                >
                                    <Label value="樣品端 (Samples Sent)" offset={-10} position="insideBottom" style={{ fontSize: '12px', fill: '#64748b', fontWeight: 600 }} />
                                </XAxis>
                                <YAxis
                                    type="number"
                                    dataKey="order_qty"
                                    name="Order Qty"
                                    scale={useLogScale ? "log" : "linear"}
                                    domain={useLogScale ? ['auto', 'auto'] : [0, 'auto']}
                                >
                                    <Label value="訂單端 (Orders Received)" angle={-90} position="insideLeft" style={{ fontSize: '12px', fill: '#64748b', fontWeight: 600 }} />
                                </YAxis>
                                <ZAxis type="number" range={[60, 400]} />
                                <RechartsTooltip
                                    cursor={{ strokeDasharray: '3 3' }}
                                    content={({ active, payload }) => {
                                        if (active && payload && payload.length) {
                                            const data = payload[0].payload as ScatterPoint;
                                            return (
                                                <div className="bg-white border border-slate-200 p-3 rounded-lg shadow-xl outline-none ring-0">
                                                    <p className="font-bold text-slate-800">{data.customer}</p>
                                                    <p className="text-xs text-indigo-600 font-mono mb-2">{data.pn}</p>
                                                    <div className="space-y-1 border-t border-slate-100 pt-2">
                                                        <p className="text-xs flex justify-between gap-4">
                                                            <span className="text-slate-500">送樣量:</span>
                                                            <span className="font-bold">{data.sample_qty.toLocaleString()}</span>
                                                        </p>
                                                        <p className="text-xs flex justify-between gap-4">
                                                            <span className="text-slate-500">訂單量:</span>
                                                            <span className="font-bold text-emerald-600">{data.order_qty.toLocaleString()}</span>
                                                        </p>
                                                        <p className="text-[10px] text-slate-400 mt-2 italic">
                                                            {data.order_qty > data.sample_qty ? '✨ 高效轉換 (High ROI)' : data.order_qty > 0 ? '穩定轉換' : '尚無訂單 (No-Order)'}
                                                        </p>
                                                    </div>
                                                </div>
                                            );
                                        }
                                        return null;
                                    }}
                                />
                                <Scatter
                                    name="Projects"
                                    data={scatterData}
                                    fill="#6366f1"
                                    fillOpacity={0.6}
                                    stroke="#4338ca"
                                    strokeWidth={1}
                                    cursor="pointer"
                                />
                            </ScatterChart>
                        </ResponsiveContainer>
                    </div>

                    <div className="absolute top-20 right-10 flex flex-col gap-2 text-[10px]">
                        <div className="flex items-center gap-2">
                            <div className="w-2 h-2 rounded-full bg-indigo-500 opacity-60"></div>
                            <span className="text-slate-500">案件資料 (Customer/PN Group)</span>
                        </div>
                    </div>
                </Card>

                {/* Insight Card */}
                <Card className="p-6 bg-slate-900 text-white flex flex-col justify-between">
                    <div>
                        <h3 className="font-bold text-slate-100 mb-4 flex items-center gap-2">
                            <Info size={18} className="text-indigo-400" />
                            戰情室洞察 (Lab Insights)
                        </h3>
                        <div className="space-y-4">
                            <div className="p-3 bg-slate-800/50 rounded-lg border border-slate-700">
                                <p className="text-xs text-slate-400 mb-1">高效轉換客戶</p>
                                <p className="text-sm font-medium">識別散佈圖中「左上角」點位，代表投入少量樣品即獲得大量訂單。</p>
                            </div>
                            <div className="p-3 bg-slate-800/50 rounded-lg border border-slate-700">
                                <p className="text-xs text-slate-400 mb-1">風險警示</p>
                                <p className="text-sm font-medium">右下角點位代表送樣頻繁但轉換效率低，需檢視應用場景或產品適配度。</p>
                            </div>
                        </div>
                    </div>
                    <div className="mt-8 p-4 bg-indigo-600/20 rounded-xl border border-indigo-500/30">
                        <p className="text-[11px] text-indigo-300 leading-relaxed italic">
                            "本模組直接比對 ERP 編號，確保不因專案名稱模糊而漏失任何實際營收數據。"
                        </p>
                    </div>
                </Card>
            </div>

            {/* Dynamic Table Section */}
            <Card className="overflow-hidden">
                <div className={`px-6 py-4 border-b flex justify-between items-center ${viewMode === 'conversions' ? 'bg-blue-50 border-blue-200' : 'bg-rose-50 border-rose-200'}`}>
                    <h3 className={`font-bold flex items-center gap-2 ${viewMode === 'conversions' ? 'text-blue-700' : 'text-rose-700'}`}>
                        {viewMode === 'conversions' ? (
                            <>
                                <Check size={18} />
                                Successful Conversions List
                            </>
                        ) : (
                            <>
                                <AlertTriangle size={18} />
                                No-Order Sample Alert Table
                            </>
                        )}
                    </h3>
                    <div className="flex items-center gap-4">
                        {viewMode === 'orphans' && (
                            <div className="text-[10px] text-slate-400 flex items-center gap-2">
                                <span className="flex items-center gap-1"><span className="w-2 h-2 bg-indigo-600 rounded-full"></span> 重複送樣 (Repeated)</span>
                            </div>
                        )}
                        <div className="text-[10px] text-slate-400 font-medium">
                            {viewMode === 'conversions' ? `共 ${conversions.length} 筆成功轉換` : `共 ${orphans.length} 筆待追蹤案件`}
                        </div>
                    </div>
                </div>

                <div className="overflow-x-auto">
                    <table className="w-full text-sm text-left">
                        <thead className="bg-white text-slate-500 border-b border-slate-200">
                            <tr>
                                <th className="px-6 py-3">客戶名稱</th>
                                <th className="px-6 py-3">產品料號 (Part No)</th>
                                {viewMode === 'conversions' ? (
                                    <>
                                        <th className="px-6 py-3">送樣資訊 (Date/Qty)</th>
                                        <th className="px-6 py-3">首張訂單 (Date/Qty)</th>
                                        <th className="px-6 py-3 text-center">轉換天數</th>
                                    </>
                                ) : (
                                    <>
                                        <th className="px-6 py-3">送樣日期</th>
                                        <th className="px-6 py-3 text-center">滯留天數</th>
                                        <th className="px-6 py-3 text-center">狀態</th>
                                        <th className="px-6 py-3 text-right">操作</th>
                                    </>
                                )}
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100">
                            {viewMode === 'conversions' ? (
                                conversions.map((row, i) => (
                                    <tr key={i} className="hover:bg-slate-50">
                                        <td className="px-6 py-4 font-medium text-slate-800">{row.customer}</td>
                                        <td className="px-6 py-4 font-mono text-xs text-slate-600">{row.pn}</td>
                                        <td className="px-6 py-4">
                                            <div className="flex flex-col">
                                                <span className="text-slate-500 text-xs">{row.sample_date?.replace(/(\d{4})(\d{2})(\d{2})/, '$1/$2/$3')}</span>
                                                <span className="font-bold text-slate-700">{row.sample_qty} pcs</span>
                                            </div>
                                        </td>
                                        <td className="px-6 py-4">
                                            <div className="flex flex-col">
                                                <span className="text-slate-500 text-xs">{row.order_date?.replace(/(\d{4})(\d{2})(\d{2})/, '$1/$2/$3')}</span>
                                                <span className="font-bold text-emerald-600">{row.order_qty.toLocaleString()} pcs</span>
                                            </div>
                                        </td>
                                        <td className="px-6 py-4 text-center">
                                            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
                                                {row.days_to_convert} 天
                                            </span>
                                        </td>
                                    </tr>
                                ))
                            ) : (
                                orphans.map((row, i) => {
                                    const groupKey = `${row.customer}|${row.pn}`;
                                    const isRepeated = (groupInfo[groupKey] || 0) > 1;
                                    const isSelected = selectedGroup === groupKey;

                                    return (
                                        <tr
                                            key={i}
                                            onClick={() => setSelectedGroup(isSelected ? null : groupKey)}
                                            className={`
                                        transition-all cursor-pointer border-l-4
                                        ${isSelected ? 'bg-indigo-50 border-l-indigo-500 shadow-inner' : 'hover:bg-slate-50 border-l-transparent'}
                                    `}
                                        >
                                            <td className="px-6 py-4">
                                                <div className={`font-medium ${isRepeated ? 'text-indigo-700' : 'text-slate-800'}`}>
                                                    {row.customer}
                                                    {isRepeated && (
                                                        <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] bg-indigo-100 text-indigo-700 font-bold">
                                                            x{groupInfo[groupKey]}
                                                        </span>
                                                    )}
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 font-mono text-xs text-slate-600">
                                                {row.pn}
                                            </td>
                                            <td className="px-6 py-4 text-slate-500">{row.date?.replace(/(\d{4})(\d{2})(\d{2})/, '$1/$2/$3')}</td>
                                            <td className="px-6 py-4 text-center">
                                                <span className={`font-bold ${row.days_since_sent > 180 ? 'text-rose-600' : 'text-amber-600'}`}>
                                                    {row.days_since_sent} 天
                                                </span>
                                            </td>
                                            <td className="px-6 py-4 text-center">
                                                <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${row.days_since_sent > 180 ? 'bg-rose-100 text-rose-700' : 'bg-amber-100 text-amber-700'
                                                    }`}>
                                                    {row.days_since_sent > 180 ? '呆滯庫存 (Dead Stock)' : '需採取行動'}
                                                </span>
                                            </td>
                                            <td className="px-6 py-4 text-right">
                                                <button
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        handleCopy(row, i);
                                                    }}
                                                    className="inline-flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-800 font-medium bg-indigo-50 px-2 py-1 rounded"
                                                >
                                                    {copiedId === i ? <Check size={12} /> : <Copy size={12} />}
                                                    {copiedId === i ? '已複製' : '複製詳情'}
                                                </button>
                                            </td>
                                        </tr>
                                    )
                                })
                            )}

                            {viewMode === 'orphans' && orphans.length === 0 && (
                                <tr>
                                    <td colSpan={6} className="px-6 py-10 text-center text-slate-400">
                                        目前沒有無需跟進的無訂單樣品，所有送樣皆在有效時限內或已轉化。
                                    </td>
                                </tr>
                            )}
                            {viewMode === 'conversions' && conversions.length === 0 && (
                                <tr>
                                    <td colSpan={5} className="px-6 py-10 text-center text-slate-400">
                                        目前沒有成功轉換的紀錄。
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </Card>
        </div>
    );
};