'use client';
import { useState } from 'react';
import { AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';

const monthlyData = [
  { month: 'Sep', hired: 12, resigned: 3, onLeave: 28 },
  { month: 'Oct', hired: 18, resigned: 5, onLeave: 35 },
  { month: 'Nov', hired: 9, resigned: 2, onLeave: 42 },
  { month: 'Dec', hired: 6, resigned: 8, onLeave: 55 },
  { month: 'Jan', hired: 22, resigned: 4, onLeave: 38 },
  { month: 'Feb', hired: 15, resigned: 6, onLeave: 47 },
  { month: 'Mar', hired: 19, resigned: 3, onLeave: 44 },
];

const deptData = [
  { dept: 'Finance', employees: 145, target: 150 },
  { dept: 'Operations', employees: 312, target: 300 },
  { dept: 'ICT', employees: 89, target: 100 },
  { dept: 'HR', employees: 54, target: 60 },
  { dept: 'Legal', employees: 38, target: 40 },
  { dept: 'Admin', employees: 210, target: 200 },
];

const tabs = ['Monthly Trends', 'Department Headcount', 'Leave Analytics'];

export default function DashboardCharts() {
  const [activeTab, setActiveTab] = useState(0);
  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
      <div className="flex items-center justify-between mb-4">
        <div className="flex gap-1 bg-gray-100 rounded-lg p-1">
          {tabs.map((t, i) => (
            <button key={t} onClick={() => setActiveTab(i)}
              className="px-3 py-1.5 rounded-md text-sm font-medium transition-all cursor-pointer whitespace-nowrap"
              style={activeTab === i ? { background: '#b828a0', color: 'white' } : { color: '#6B7280' }}>
              {t}
            </button>
          ))}
        </div>
        <select className="text-sm border border-gray-200 rounded-lg px-3 py-1.5 text-gray-600 outline-none pr-8">
          <option>Last 7 months</option>
          <option>Last 12 months</option>
          <option>This Year</option>
        </select>
      </div>
      {activeTab === 0 && (
        <ResponsiveContainer width="100%" height={280}>
          <AreaChart data={monthlyData}>
            <defs>
              <linearGradient id="leave" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#b828a0" stopOpacity={0.3} />
                <stop offset="95%" stopColor="#b828a0" stopOpacity={0} />
              </linearGradient>
              <linearGradient id="resigned" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#F59E0B" stopOpacity={0.3} />
                <stop offset="95%" stopColor="#F59E0B" stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
            <XAxis dataKey="month" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            <Area type="monotone" dataKey="onLeave" stroke="#b828a0" fill="url(#leave)" name="On Leave" />
            <Area type="monotone" dataKey="resigned" stroke="#EF4444" fill="none" name="Resigned" strokeDasharray="4 4" />
          </AreaChart>
        </ResponsiveContainer>
      )}
      {activeTab === 1 && (
        <ResponsiveContainer width="100%" height={280}>
          <BarChart data={deptData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
            <XAxis dataKey="dept" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            <Bar dataKey="employees" fill="#b828a0" name="Current" radius={[4, 4, 0, 0]} />
            <Bar dataKey="target" fill="#f0a8e6" name="Target" radius={[4, 4, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
      )}
      {activeTab === 2 && (
        <ResponsiveContainer width="100%" height={280}>
          <AreaChart data={monthlyData}>
            <defs>
              <linearGradient id="leaveGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#b828a0" stopOpacity={0.4} />
                <stop offset="95%" stopColor="#b828a0" stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
            <XAxis dataKey="month" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Area type="monotone" dataKey="onLeave" stroke="#b828a0" fill="url(#leaveGrad)" name="Employees on Leave" />
          </AreaChart>
        </ResponsiveContainer>
      )}
    </div>
  );
}