import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
import api from "../../api";
import { useEffect, useState } from "react";

export default function SecurityTimeline() {
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    api.get("/admin/security/anomalies").then(r => {
      const map:any = {};
      r.data.forEach((l:any)=>{
        const h = new Date(l.createdAt).getHours();
        map[h]=(map[h]||0)+1;
      });
      setData(Object.entries(map).map(([h,c])=>({hour:h,count:c})));
    });
  }, []);

  return (
    <div className="bg-zinc-900 p-4 rounded-xl h-72">
      <ResponsiveContainer>
        <LineChart data={data}>
          <XAxis dataKey="hour" />
          <YAxis />
          <Tooltip />
          <Line dataKey="count" stroke="#ef4444" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}