import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from 'recharts';

const AREA_CONFIG = [
  { dataKey: 'inbound',  stroke: '#0056B3', fill: '#0056B344', name: 'Inbound'  },
  { dataKey: 'outbound', stroke: '#E0E0E2', fill: '#E0E0E222', name: 'Outbound' },
  { dataKey: 'blocked',  stroke: '#D72638', fill: '#D7263844', name: 'Blocked'  },
];

const TICK_STYLE = {
  fontFamily: "'JetBrains Mono', monospace",
  fontSize: '0.75rem',
  fill: '#E0E0E266',
};

function CustomTooltip({ active, payload, label }) {
  if (!active || !payload?.length) return null;

  return (
    <div
      style={{
        background: '#1B1B1E',
        border: '1px solid #E0E0E220',
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: '0.75rem',
        padding: '8px 12px',
      }}
    >
      <p style={{ color: '#E0E0E266', marginBottom: 4 }}>{label}</p>
      {payload.map((entry) => (
        <p key={entry.dataKey} style={{ color: entry.stroke }}>
          {entry.name}: {entry.value} Mbps
        </p>
      ))}
    </div>
  );
}

export default function NetworkTraffic({ data }) {
  return (
    <div className="panel h-full flex flex-col">
      {/* Header */}
      <div className="panel-header">
        <span className="dot" />
        <span>Network Traffic</span>
        <span
          className="ml-auto font-mono text-[10px] tracking-widest px-1.5 py-0.5 border border-ap-red/30 text-ap-red"
        >
          24H
        </span>
      </div>

      {/* Chart */}
      <div className="flex-1 min-h-0 p-2">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={data} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
            <CartesianGrid stroke="#E0E0E210" strokeDasharray="3 3" />

            <XAxis
              dataKey="time"
              tick={TICK_STYLE}
              axisLine={{ stroke: '#E0E0E210' }}
              tickLine={{ stroke: '#E0E0E210' }}
            />

            <YAxis
              tick={TICK_STYLE}
              unit=" Mbps"
              axisLine={{ stroke: '#E0E0E210' }}
              tickLine={{ stroke: '#E0E0E210' }}
              width={72}
            />

            <Tooltip content={<CustomTooltip />} cursor={{ stroke: '#E0E0E220' }} />

            <Legend
              verticalAlign="bottom"
              iconType="rect"
              wrapperStyle={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: '0.75rem',
                paddingTop: 8,
              }}
            />

            {AREA_CONFIG.map(({ dataKey, stroke, fill, name }) => (
              <Area
                key={dataKey}
                type="monotone"
                dataKey={dataKey}
                stroke={stroke}
                fill={fill}
                strokeWidth={1.5}
                name={name}
                dot={false}
                activeDot={{ r: 3, strokeWidth: 0, fill: stroke }}
              />
            ))}
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}
