import React, { useMemo, useState, useRef, useEffect } from 'react';
import { BMSBasicInfo, BMSCellInfo, ProtectionStatus } from '../types';
import { LineChart, Line, BarChart, Bar, Cell, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid, ReferenceLine } from 'recharts';
import { Activity, Battery, Thermometer, Zap, AlertTriangle, PlayCircle, StopCircle, Download, RotateCw, RefreshCw, Gauge, TrendingUp } from 'lucide-react';

interface DashboardProps {
  basicInfo: BMSBasicInfo | null;
  cellInfo: BMSCellInfo | null;
  hwVersion: string | null;
  onToggleMosfet: (type: 'charge' | 'discharge', currentState: boolean) => void;
}

const COLORS = [
  '#ef4444', '#f97316', '#f59e0b', '#84cc16', '#10b981', 
  '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef', 
  '#f43f5e', '#fbbf24', '#a3e635', '#34d399', '#22d3ee',
  '#94a3b8'
];

// Updated MetricCard to accept valueClassName for custom styling (e.g., blinking)
const MetricCard: React.FC<{ label: string; value: string; unit?: string; icon: React.ReactNode; color?: string; subValue?: string; valueClassName?: string }> = ({ label, value, unit, icon, color = "text-blue-400", subValue, valueClassName }) => (
  <div className="bg-gray-900 p-4 rounded-xl shadow-lg border border-gray-800 flex flex-col justify-between h-28 relative overflow-hidden group hover:border-gray-700 transition-colors">
    <div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity transform scale-150 origin-top-right">
        {React.isValidElement(icon) && React.cloneElement(icon as React.ReactElement<any>, { size: 48 })}
    </div>
    <div className="flex justify-between items-start z-10">
      <span className="text-gray-400 text-xs font-semibold uppercase tracking-wider">{label}</span>
      <div className={`${color} opacity-80`}>{icon}</div>
    </div>
    <div className="z-10 mt-auto">
      <div className="flex items-baseline gap-1">
        <span className={`text-2xl font-bold font-mono tracking-tight ${valueClassName || 'text-gray-100'}`}>{value}</span>
        {unit && <span className="text-gray-500 text-xs font-bold">{unit}</span>}
      </div>
      {subValue && <div className="text-gray-500 text-xs mt-1 font-mono">{subValue}</div>}
    </div>
  </div>
);

const MosfetSwitch: React.FC<{ label: string; active: boolean; onClick: () => void; disabled: boolean }> = ({ label, active, onClick, disabled }) => (
  <button
    onClick={onClick}
    disabled={disabled}
    className={`flex flex-col items-center justify-center p-4 rounded-xl border transition-all duration-200 w-full relative overflow-hidden ${
      disabled ? 'opacity-50 cursor-not-allowed grayscale' : 'hover:scale-[1.02] active:scale-[0.98]'
    } ${
      active 
        ? 'bg-green-900/20 border-green-500/50 text-green-400 shadow-[0_0_15px_rgba(34,197,94,0.1)]' 
        : 'bg-red-900/20 border-red-500/50 text-red-400 shadow-[0_0_15px_rgba(239,68,68,0.1)]'
    }`}
  >
    <div className={`absolute inset-0 opacity-10 ${active ? 'bg-green-500' : 'bg-red-500'}`}></div>
    <span className="font-bold text-2xl mb-1">{active ? 'ON' : 'OFF'}</span>
    <span className="text-xs uppercase tracking-wider font-semibold opacity-80">{label}</span>
  </button>
);

const ProtectionBadge: React.FC<{ label: string; active: boolean }> = ({ label, active }) => (
  <div className={`px-2 py-1 rounded text-[10px] font-bold border transition-colors ${active ? 'bg-red-900/50 border-red-500 text-red-400 animate-pulse' : 'bg-gray-800/50 border-gray-700 text-gray-600'}`}>
    {label}
  </div>
);

const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, onToggleMosfet }) => {
  const [isRecording, setIsRecording] = useState(false);
  const logDataRef = useRef<any[]>([]);
  const [logCount, setLogCount] = useState(0);
  const [voltageHistory, setVoltageHistory] = useState<any[]>([]);

  // Initialize/Clear history on connect/disconnect
  useEffect(() => {
    if (!cellInfo) {
        setVoltageHistory([]);
    }
  }, [cellInfo === null]);

  // Update Voltage History
  useEffect(() => {
    if (cellInfo) {
      setVoltageHistory(prev => {
         const now = new Date();
         const timeLabel = now.toLocaleTimeString('en-US', { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
         
         const newEntry: any = {
           time: timeLabel,
           ...cellInfo.voltages.reduce((acc, v, i) => ({ ...acc, [`cell${i+1}`]: v }), {})
         };
         
         // Keep approx 60 points (at ~0.5s interval -> ~30s history, user asked for ~1min so increase buffer)
         // If polling is 500ms, 120 points = 60 seconds
         const newHistory = [...prev, newEntry];
         if (newHistory.length > 120) return newHistory.slice(newHistory.length - 120);
         return newHistory;
      });
    }
  }, [cellInfo]);

  // Data logging effect
  useEffect(() => {
    if (isRecording && basicInfo) {
      logDataRef.current.push({
        timestamp: new Date().toISOString(),
        voltage: basicInfo.packVoltage,
        current: basicInfo.current,
        capacity: basicInfo.remainingCapacity,
        rsoc: basicInfo.rsoc,
        maxCell: cellInfo ? Math.max(...cellInfo.voltages) : 0,
        minCell: cellInfo ? Math.min(...cellInfo.voltages) : 0,
        temp1: basicInfo.ntcTemps[0] || 0
      });
      setLogCount(prev => prev + 1);
    }
  }, [basicInfo, isRecording, cellInfo]);

  const toggleRecording = () => {
    if (isRecording) {
      // Stop and download
      const headers = ['Timestamp', 'PackVoltage(V)', 'Current(A)', 'Capacity(Ah)', 'RSOC(%)', 'MaxCell(V)', 'MinCell(V)', 'Temp1(C)'];
      const csvContent = "data:text/csv;charset=utf-8," 
        + headers.join(",") + "\n" 
        + logDataRef.current.map(row => Object.values(row).join(",")).join("\n");
      
      const encodedUri = encodeURI(csvContent);
      const link = document.createElement("a");
      link.setAttribute("href", encodedUri);
      link.setAttribute("download", `bms_log_${new Date().toISOString()}.csv`);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      setIsRecording(false);
      logDataRef.current = [];
      setLogCount(0);
    } else {
      setIsRecording(true);
      logDataRef.current = [];
      setLogCount(0);
    }
  };

  // Safe data extraction (Use defaults if null)
  const voltages = cellInfo?.voltages || [];
  const cellCount = voltages.length;
  const maxVoltage = cellCount > 0 ? Math.max(...voltages) : 0;
  const minVoltage = cellCount > 0 ? Math.min(...voltages) : 0;
  const avgVoltage = cellCount > 0 ? voltages.reduce((a, b) => a + b, 0) / cellCount : 0;
  const deltaVoltage = (maxVoltage - minVoltage);

  const power = basicInfo ? basicInfo.packVoltage * basicInfo.current : 0;
  
  // Data for Bar Chart
  const cellChartData = voltages.map((v, i) => ({
    name: `${i + 1}`,
    voltage: v,
    isMax: v === maxVoltage && maxVoltage > 0,
    isMin: v === minVoltage && minVoltage > 0
  }));

  const protections = basicInfo?.protectionStatus || {
    covp: false, cuvp: false, povp: false, puvp: false,
    chgot: false, chgut: false, dsgot: false, dsgut: false,
    chgoc: false, dsgoc: false, sc: false, afe: false
  };

  const protectionList = [
    { key: 'covp', label: 'COVP' }, { key: 'cuvp', label: 'CUVP' },
    { key: 'povp', label: 'POVP' }, { key: 'puvp', label: 'PUVP' },
    { key: 'chgot', label: 'CHG OT' }, { key: 'chgut', label: 'CHG UT' },
    { key: 'dsgot', label: 'DSG OT' }, { key: 'dsgut', label: 'DSG UT' },
    { key: 'chgoc', label: 'CHG OC' }, { key: 'dsgoc', label: 'DSG OC' },
    { key: 'sc', label: 'SHORT' }, { key: 'afe', label: 'AFE' },
  ];

  // Logic for blinking red when SOC < 30
  const isLowSoc = basicInfo && basicInfo.rsoc < 30;

  return (
    <div className="p-6 space-y-6 overflow-y-auto h-full pb-32">
      
      {/* Top Metrics Row */}
      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4">
        <MetricCard 
          label="Pack Voltage" 
          value={basicInfo ? basicInfo.packVoltage.toFixed(2) : '-.--'} 
          unit="V" 
          icon={<Zap size={20} />} 
          color="text-yellow-400"
        />
        <MetricCard 
          label="Current" 
          value={basicInfo ? basicInfo.current.toFixed(2) : '-.--'} 
          unit="A" 
          icon={<Activity size={20} />} 
          color={basicInfo && basicInfo.current > 0 ? "text-green-400" : basicInfo && basicInfo.current < 0 ? "text-red-400" : "text-gray-400"}
          subValue={power !== 0 ? `${power.toFixed(0)} W` : undefined}
        />
        <MetricCard 
          label="SOC" 
          value={basicInfo ? basicInfo.rsoc.toString() : '--'} 
          unit="%" 
          icon={<Battery size={20} />} 
          // If Low SOC: Blink Red Icon, otherwise green/gray
          color={isLowSoc ? "text-red-500 animate-pulse" : (basicInfo ? "text-green-400" : "text-gray-400")}
          // If Low SOC: Blink Red Value Text, otherwise default white
          valueClassName={isLowSoc ? "text-red-500 animate-pulse" : undefined}
          subValue={basicInfo ? `${basicInfo.remainingCapacity.toFixed(2)} Ah` : undefined}
        />
        <MetricCard 
          label="Avg Cell" 
          value={avgVoltage ? avgVoltage.toFixed(3) : '-.---'} 
          unit="V" 
          icon={<Gauge size={20} />} 
          color="text-blue-400"
        />
        <MetricCard 
          label="Delta" 
          value={deltaVoltage ? (deltaVoltage * 1000).toFixed(0) : '-'} 
          unit="mV" 
          icon={<AlertTriangle size={20} />} 
          color={deltaVoltage > 0.03 ? "text-red-400" : "text-emerald-400"}
        />
        <MetricCard 
          label="Cycles" 
          value={basicInfo ? basicInfo.cycleCount.toString() : '-'} 
          unit="" 
          icon={<RotateCw size={20} />} 
          color="text-purple-400"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* Left Column: Charts & Status */}
        <div className="lg:col-span-2 space-y-6">
            
            {/* Combined Cell Voltage Monitor */}
            <div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg flex flex-col gap-6">
                
                {/* Header */}
                <div className="flex justify-between items-center">
                    <h3 className="text-gray-200 font-bold flex items-center">
                        <Activity className="mr-2 text-blue-500" size={18}/> 
                        Cell Monitor (Instant & Trend)
                    </h3>
                    <div className="flex gap-4 text-xs font-mono bg-gray-950/50 px-3 py-1 rounded-lg border border-gray-800">
                        <span className="text-red-400 font-bold">Max: {maxVoltage.toFixed(3)}V</span>
                        <div className="w-px bg-gray-700 mx-1"></div>
                        <span className="text-blue-400 font-bold">Min: {minVoltage.toFixed(3)}V</span>
                    </div>
                </div>

                {/* 1. Bar Chart (Instant) */}
                <div className="h-40 w-full relative">
                    <div className="absolute top-0 left-0 text-[10px] text-gray-500 font-bold uppercase tracking-wider">Instant Voltage</div>
                    <ResponsiveContainer width="100%" height="100%">
                        <BarChart data={cellChartData} margin={{ top: 15, right: 5, left: -20, bottom: 0 }}>
                            <XAxis dataKey="name" stroke="#4b5563" tick={{fontSize: 10}} />
                            <YAxis domain={[minVoltage > 0 ? minVoltage - 0.05 : 2.5, maxVoltage > 0 ? maxVoltage + 0.05 : 4.5]} stroke="#4b5563" tick={{fontSize: 10}} />
                            <Tooltip 
                                cursor={{fill: 'rgba(255,255,255,0.05)'}}
                                contentStyle={{ backgroundColor: '#111827', borderColor: '#374151', color: '#f3f4f6' }}
                                itemStyle={{ color: '#93c5fd' }}
                                formatter={(value: number) => [value.toFixed(3) + ' V', 'Voltage']}
                            />
                            <ReferenceLine y={avgVoltage} stroke="#10b981" strokeDasharray="3 3" />
                            <Bar dataKey="voltage">
                              {cellChartData.map((entry, index) => (
                                <Cell key={`cell-${index}`} fill={entry.isMax ? '#ef4444' : entry.isMin ? '#3b82f6' : '#6366f1'} />
                              ))}
                            </Bar>
                        </BarChart>
                    </ResponsiveContainer>
                </div>

                <div className="w-full h-px bg-gray-800"></div>

                {/* 2. Line Chart (Trend) */}
                <div className="h-48 w-full relative">
                     <div className="absolute top-0 left-0 text-[10px] text-gray-500 font-bold uppercase tracking-wider flex items-center gap-1">
                        <TrendingUp size={10} /> Voltage History (~1 min)
                     </div>
                    <ResponsiveContainer width="100%" height="100%">
                        <LineChart data={voltageHistory} margin={{ top: 15, right: 10, left: -20, bottom: 0 }}>
                            <CartesianGrid strokeDasharray="3 3" stroke="#374151" vertical={false} />
                            {/* Hide XAxis ticks as requested */}
                            <XAxis dataKey="time" hide />
                            <YAxis domain={['auto', 'auto']} stroke="#6b7280" tick={{fontSize: 10}} width={40} />
                            <Tooltip 
                                contentStyle={{ backgroundColor: '#111827', borderColor: '#374151', color: '#f3f4f6' }}
                                itemStyle={{ padding: 0, fontSize: '11px' }}
                                labelStyle={{ color: '#9ca3af', marginBottom: '0.25rem', fontSize: '11px' }}
                                formatter={(value: number, name: string) => [value.toFixed(3) + ' V', name]}
                            />
                            {/* Dynamically create thin lines for each cell */}
                            {Array.from({ length: cellCount }).map((_, i) => (
                                <Line 
                                    key={`line-${i}`}
                                    type="monotone" 
                                    dataKey={`cell${i+1}`} 
                                    stroke={COLORS[i % COLORS.length]} 
                                    dot={false} 
                                    strokeWidth={1}
                                    isAnimationActive={false}
                                    name={`C${i+1}`}
                                />
                            ))}
                        </LineChart>
                    </ResponsiveContainer>
                </div>
            </div>

            {/* Protections & Temps */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 {/* Protections */}
                <div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
                    <h3 className="text-gray-300 font-bold text-sm mb-4 flex items-center">
                        <AlertTriangle className="mr-2 text-yellow-500" size={16}/> 
                        Protection Status
                    </h3>
                    <div className="grid grid-cols-4 gap-2">
                        {protectionList.map((p) => (
                            // @ts-ignore
                            <ProtectionBadge key={p.key} label={p.label} active={protections[p.key]} />
                        ))}
                    </div>
                </div>

                {/* Temperatures */}
                <div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
                    <h3 className="text-gray-300 font-bold text-sm mb-4 flex items-center">
                        <Thermometer className="mr-2 text-orange-500" size={16}/> 
                        Temperatures
                    </h3>
                    <div className="flex flex-wrap gap-4">
                        {basicInfo && basicInfo.ntcTemps.length > 0 ? basicInfo.ntcTemps.map((t, i) => (
                            <div key={i} className="flex flex-col items-center bg-gray-800/50 p-2 rounded-lg border border-gray-700 min-w-[60px]">
                                <span className="text-xs text-gray-500">NTC {i + 1}</span>
                                <span className="text-lg font-mono font-bold text-gray-200">{t.toFixed(1)}°C</span>
                            </div>
                        )) : (
                            // Placeholder
                             <div className="flex flex-col items-center bg-gray-800/30 p-2 rounded-lg border border-gray-800 min-w-[60px]">
                                <span className="text-xs text-gray-600">NTC 1</span>
                                <span className="text-lg font-mono font-bold text-gray-600">--.-°C</span>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>

        {/* Right Column: Controls & Capacity */}
        <div className="space-y-6">
            
            {/* MOSFET Control */}
            <div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
                <h3 className="text-gray-200 font-bold mb-4 flex items-center">
                    <Zap className="mr-2 text-purple-500" size={18}/> 
                    MOSFET Control
                </h3>
                <div className="flex gap-4">
                    <MosfetSwitch 
                        label="Charge" 
                        active={basicInfo?.mosfetStatus.charge ?? false} 
                        disabled={!basicInfo}
                        onClick={() => onToggleMosfet('charge', basicInfo?.mosfetStatus.charge ?? false)} 
                    />
                    <MosfetSwitch 
                        label="Discharge" 
                        active={basicInfo?.mosfetStatus.discharge ?? false} 
                        disabled={!basicInfo}
                        onClick={() => onToggleMosfet('discharge', basicInfo?.mosfetStatus.discharge ?? false)} 
                    />
                </div>
            </div>

             {/* Capacity Info */}
            <div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
                 <h3 className="text-gray-200 font-bold mb-4 flex items-center">
                    <Battery className="mr-2 text-green-500" size={18}/> 
                    Capacity Info
                </h3>
                <div className="space-y-4">
                    <div className="flex justify-between items-center pb-2 border-b border-gray-800">
                        <span className="text-gray-400 text-sm">Design Capacity</span>
                        <span className="font-mono">{basicInfo ? basicInfo.fullCapacity.toFixed(2) : '-.--'} Ah</span>
                    </div>
                    <div className="flex justify-between items-center pb-2 border-b border-gray-800">
                        <span className="text-gray-400 text-sm">Remaining Cap</span>
                        <span className="font-mono text-green-400">{basicInfo ? basicInfo.remainingCapacity.toFixed(2) : '-.--'} Ah</span>
                    </div>
                     <div className="flex justify-between items-center pb-2 border-b border-gray-800">
                        <span className="text-gray-400 text-sm">Mfg Date</span>
                        <span className="font-mono text-xs">{basicInfo ? basicInfo.productionDate : 'YYYY-MM-DD'}</span>
                    </div>
                    <div className="flex justify-between items-center">
                        <span className="text-gray-400 text-sm">Device Ver</span>
                        <span className="font-mono text-xs text-blue-300">{hwVersion || '--'}</span>
                    </div>
                </div>
            </div>

            {/* Logger */}
            <div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
                <div className="flex justify-between items-center mb-4">
                    <h3 className="text-gray-200 font-bold flex items-center">Data Logger</h3>
                    {isRecording && <span className="text-xs text-red-400 animate-pulse">● REC ({logCount})</span>}
                </div>
                <button
                    onClick={toggleRecording}
                    disabled={!basicInfo}
                    className={`w-full py-3 rounded-xl flex items-center justify-center font-bold transition-all ${
                        !basicInfo ? 'bg-gray-800 text-gray-500 cursor-not-allowed' :
                        isRecording 
                        ? 'bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-900/20' 
                        : 'bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-900/20'
                    }`}
                >
                    {isRecording ? <><StopCircle size={18} className="mr-2"/> Stop & Save CSV</> : <><PlayCircle size={18} className="mr-2"/> Start Recording</>}
                </button>
            </div>

        </div>
      </div>
    </div>
  );
};

export default Dashboard;