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-white p-4 rounded-xl shadow-lg border border-gray-200 flex flex-col justify-between h-28 relative overflow-hidden group hover:border-gray-300 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-500 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-900'}`}>{value}</span>
        {unit && <span className="text-gray-400 text-xs font-bold">{unit}</span>}
      </div>
      {subValue && <div className="text-gray-400 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-100 border-red-500 text-red-600 animate-pulse' : 'bg-gray-100 border-gray-200 text-gray-500'}`}>
    {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-600"
        />
        <MetricCard
          label="Current"
          value={basicInfo ? basicInfo.current.toFixed(2) : '-.--'}
          unit="A"
          icon={<Activity size={20} />}
          color={basicInfo && basicInfo.current > 0 ? "text-green-600" : basicInfo && basicInfo.current < 0 ? "text-red-600" : "text-gray-500"}
          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-600 animate-pulse" : (basicInfo ? "text-green-600" : "text-gray-500")}
          // If Low SOC: Blink Red Value Text, otherwise default white
          valueClassName={isLowSoc ? "text-red-600 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-600"
        />
        <MetricCard
          label="Delta"
          value={deltaVoltage ? (deltaVoltage * 1000).toFixed(0) : '-'}
          unit="mV"
          icon={<AlertTriangle size={20} />}
          color={deltaVoltage > 0.03 ? "text-red-600" : "text-emerald-600"}
        />
        <MetricCard
          label="Cycles"
          value={basicInfo ? basicInfo.cycleCount.toString() : '-'}
          unit=""
          icon={<RotateCw size={20} />}
          color="text-purple-600"
        />
      </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-white rounded-xl border border-gray-200 p-5 shadow-lg flex flex-col gap-6">

            {/* Header */}
            <div className="flex justify-between items-center">
              <h3 className="text-gray-800 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-50 px-3 py-1 rounded-lg border border-gray-200">
                <span className="text-red-400 font-bold">Max: {maxVoltage.toFixed(3)}V</span>
                <div className="w-px bg-gray-300 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="#9ca3af" tick={{ fontSize: 10 }} />
                  <YAxis domain={[minVoltage > 0 ? minVoltage - 0.05 : 2.5, maxVoltage > 0 ? maxVoltage + 0.05 : 4.5]} stroke="#9ca3af" tick={{ fontSize: 10 }} />
                  <Tooltip
                    cursor={{ fill: 'rgba(255,255,255,0.05)' }}
                    contentStyle={{ backgroundColor: '#ffffff', borderColor: '#e5e7eb', color: '#111827' }}
                    itemStyle={{ color: '#3b82f6' }}
                    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-200"></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="#e5e7eb" vertical={false} />
                  {/* Hide XAxis ticks as requested */}
                  <XAxis dataKey="time" hide />
                  <YAxis domain={['auto', 'auto']} stroke="#9ca3af" tick={{ fontSize: 10 }} width={40} />
                  <Tooltip
                    contentStyle={{ backgroundColor: '#ffffff', borderColor: '#e5e7eb', color: '#111827' }}
                    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-white rounded-xl border border-gray-200 p-5 shadow-lg">
              <h3 className="text-gray-700 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-white rounded-xl border border-gray-200 p-5 shadow-lg">
              <h3 className="text-gray-700 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-100 p-2 rounded-lg border border-gray-200 min-w-[60px]">
                    <span className="text-xs text-gray-500">NTC {i + 1}</span>
                    <span className="text-lg font-mono font-bold text-gray-800">{t.toFixed(1)}°C</span>
                  </div>
                )) : (
                  // Placeholder
                  <div className="flex flex-col items-center bg-gray-100 p-2 rounded-lg border border-gray-200 min-w-[60px]">
                    <span className="text-xs text-gray-600">NTC 1</span>
                    <span className="text-lg font-mono font-bold text-gray-400">--.-°C</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Right Column: Controls & Capacity */}
        <div className="space-y-6">

          {/* MOSFET Control */}
          <div className="bg-white rounded-xl border border-gray-200 p-5 shadow-lg">
            <h3 className="text-gray-800 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-white rounded-xl border border-gray-200 p-5 shadow-lg">
            <h3 className="text-gray-800 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-200">
                <span className="text-gray-500 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-200">
                <span className="text-gray-500 text-sm">Remaining Cap</span>
                <span className="font-mono text-green-600">{basicInfo ? basicInfo.remainingCapacity.toFixed(2) : '-.--'} Ah</span>
              </div>
              <div className="flex justify-between items-center pb-2 border-b border-gray-200">
                <span className="text-gray-500 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-500 text-sm">Device Ver</span>
                <span className="font-mono text-xs text-blue-600">{hwVersion || '--'}</span>
              </div>
            </div>
          </div>

          {/* Logger */}
          <div className="bg-white rounded-xl border border-gray-200 p-5 shadow-lg">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-gray-800 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-100 text-gray-400 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;