'use client';

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell,  } from 'recharts';
import { TrendingUp } from 'lucide-react';

const dailyDispatch = [
  { day: '26 Ags', dispatched: 4, installed: 3 },
  { day: '27 Ags', dispatched: 2, installed: 2 },
  { day: '28 Ags', dispatched: 6, installed: 4 },
  { day: '29 Ags', dispatched: 5, installed: 3 },
  { day: '30 Ags', dispatched: 7, installed: 5 },
  { day: '31 Ags', dispatched: 3, installed: 2 },
  { day: '01 Sep', dispatched: 8, installed: 1 },
];

const ontStatusData = [
  { name: 'Di Teknisi', value: 12, color: '#1d4ed8' },
  { name: 'Terpasang', value: 5, color: '#15803d' },
  { name: 'Dikembalikan', value: 2, color: '#a16207' },
];

const CustomBarTooltip = ({ active, payload, label }: any) => {
  if (!active || !payload?.length) return null;
  return (
    <div className="card-elevated px-3 py-2 text-xs space-y-1">
      <p className="font-semibold text-foreground">{label}</p>
      {payload.map((p: any) => (
        <p key={`tooltip-bar-${p.dataKey}`} style={{ color: p.color }}>
          {p.name}: <span className="font-bold tabular-nums">{p.value} unit</span>
        </p>
      ))}
    </div>
  );
};

const CustomPieTooltip = ({ active, payload }: any) => {
  if (!active || !payload?.length) return null;
  return (
    <div className="card-elevated px-3 py-2 text-xs">
      <p className="font-semibold text-foreground">{payload[0].name}</p>
      <p className="text-muted-foreground">
        <span className="font-bold tabular-nums text-foreground">{payload[0].value}</span> unit
      </p>
    </div>
  );
};

export default function DispatchChart() {
  return (
    <div className="card-elevated h-full flex flex-col">
      <div className="px-5 py-4 border-b border-border">
        <h2 className="text-base font-semibold text-foreground flex items-center gap-2">
          <TrendingUp size={17} className="text-primary" />
          Aktivitas Dispatch (7 Hari Terakhir)
        </h2>
        <p className="text-xs text-muted-foreground mt-0.5">Perbandingan unit keluar vs terpasang per hari</p>
      </div>

      <div className="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-0 divide-y lg:divide-y-0 lg:divide-x divide-border">
        {/* Bar chart */}
        <div className="lg:col-span-2 p-4">
          <ResponsiveContainer width="100%" height={200}>
            <BarChart data={dailyDispatch} barSize={10} barGap={2}>
              <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
              <XAxis
                dataKey="day"
                tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
                axisLine={false}
                tickLine={false}
              />
              <YAxis
                tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
                axisLine={false}
                tickLine={false}
                width={28}
              />
              <Tooltip content={<CustomBarTooltip />} />
              <Bar dataKey="dispatched" name="Dispatch" fill="var(--primary)" radius={[3, 3, 0, 0]} />
              <Bar dataKey="installed" name="Terpasang" fill="var(--accent)" radius={[3, 3, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>

          <div className="flex items-center gap-4 mt-2 justify-center">
            <div className="flex items-center gap-1.5">
              <div className="w-3 h-3 rounded-sm bg-primary" />
              <span className="text-xs text-muted-foreground">Dispatch</span>
            </div>
            <div className="flex items-center gap-1.5">
              <div className="w-3 h-3 rounded-sm bg-accent" />
              <span className="text-xs text-muted-foreground">Terpasang</span>
            </div>
          </div>
        </div>

        {/* Pie chart */}
        <div className="p-4 flex flex-col items-center justify-center">
          <p className="text-xs font-semibold text-muted-foreground mb-2 section-label">Status ONT</p>
          <ResponsiveContainer width="100%" height={140}>
            <PieChart>
              <Pie
                data={ontStatusData}
                cx="50%"
                cy="50%"
                innerRadius={40}
                outerRadius={60}
                paddingAngle={3}
                dataKey="value"
              >
                {ontStatusData.map((entry, index) => (
                  <Cell key={`pie-cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip content={<CustomPieTooltip />} />
            </PieChart>
          </ResponsiveContainer>
          <div className="space-y-1.5 w-full">
            {ontStatusData.map((item) => (
              <div key={`legend-${item.name}`} className="flex items-center justify-between text-xs">
                <div className="flex items-center gap-1.5">
                  <div className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: item.color }} />
                  <span className="text-muted-foreground">{item.name}</span>
                </div>
                <span className="font-bold tabular-nums text-foreground">{item.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}