'use client';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line, PieChart, Pie, Cell } from 'recharts';

const monthlyPayroll = [
  { month: 'Oct 25', amount: 7210000 },
  { month: 'Nov 25', amount: 7329000 },
  { month: 'Dec 25', amount: 8102000 },
  { month: 'Jan 26', amount: 7588400 },
  { month: 'Feb 26', amount: 7610200 },
  { month: 'Mar 26', amount: 7842500 },
];

const deptPayroll = [
  { dept: 'Finance', amount: 1240000 },
  { dept: 'ICT', amount: 980000 },
  { dept: 'HR', amount: 750000 },
  { dept: 'Operations', amount: 1580000 },
  { dept: 'Credit', dept2: 'Credit', amount: 1320000 },
  { dept: 'Legal', amount: 620000 },
  { dept: 'Field Ops', amount: 1350000 },
];

const variableBreakdown = [
  { name: 'Basic Salaries', value: 6240000, color: '#b828a0' },
  { name: 'Housing Allowances', value: 920000, color: '#7c3aed' },
  { name: 'Transport Allowances', value: 340000 , color: '#2563eb' },
  { name: 'Other Allowances', value: 210000, color: '#059669' },
  { name: 'Bonuses', value: 132500, color: '#d97706' },
];

const lwopTrend = [
  { month: 'Oct 25', days: 8, amount: 14200 },
  { month: 'Nov 25', days: 5, amount: 9800 },
  { month: 'Dec 25', days: 12, amount: 22100 },
  { month: 'Jan 26', days: 3, amount: 5600 },
  { month: 'Feb 26', days: 7, amount: 13200 },
  { month: 'Mar 26', days: 4, amount: 7400 },
];

export default function PayrollReportsTab() {
  return (
    <div className="space-y-5">
      <div className="grid grid-cols-4 gap-4">
        {[
          { label: 'Apr 2026 Payroll Estimate', value: 'KES 7,912,000', sub: '+0.9% from March', color: 'text-pink-600' },
          { label: 'Avg Salary (All Staff)', value: 'KES 90,943', sub: 'Based on 87 employees', color: 'text-purple-600' },
          { label: 'Total LWOP Deductions', value: 'KES 7,334', sub: 'April 2026', color: 'text-orange-600' },
          { label: 'Bonus Payments', value: 'KES 37,000', sub: 'April 2026', color: 'text-green-600' },
        ].map((stat, i) => (
          <div key={i} className="bg-white rounded-xl border border-gray-200 p-4">
            <p className="text-xs text-gray-500 mb-1">{stat.label}</p>
            <p className={`text-xl font-bold ${stat.color}`}>{stat.value}</p>
            <p className="text-xs text-gray-400 mt-1">{stat.sub}</p>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-2 gap-5">
        <div className="bg-white rounded-xl border border-gray-200 p-5">
          <h3 className="font-semibold text-gray-800 mb-4">Monthly Payroll Trend (KES)</h3>
          <ResponsiveContainer width="100%" height={220}>
            <LineChart data={monthlyPayroll}>
              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
              <XAxis dataKey="month" tick={{ fontSize: 11 }} />
              <YAxis tick={{ fontSize: 11 }} tickFormatter={v => `${(v/1000000).toFixed(1)}M`} />
              <Tooltip formatter={(v: number) => [`KES ${v.toLocaleString()}`, 'Payroll']} />
              <Line type="monotone" dataKey="amount" stroke="#b828a0" strokeWidth={2.5} dot={{ fill: '#b828a0', r: 4 }} />
            </LineChart>
          </ResponsiveContainer>
        </div>

        <div className="bg-white rounded-xl border border-gray-200 p-5">
          <h3 className="font-semibold text-gray-800 mb-4">Payroll by Department (March 2026)</h3>
          <ResponsiveContainer width="100%" height={220}>
            <BarChart data={deptPayroll} layout="vertical">
              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
              <XAxis type="number" tick={{ fontSize: 10 }} tickFormatter={v => `${(v/1000).toFixed(0)}K`} />
              <YAxis type="category" dataKey="dept" tick={{ fontSize: 11 }} width={65} />
              <Tooltip formatter={(v: number) => [`KES ${v.toLocaleString()}`, 'Amount']} />
              <Bar dataKey="amount" fill="#b828a0" radius={[0, 4, 4, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-5">
        <div className="bg-white rounded-xl border border-gray-200 p-5">
          <h3 className="font-semibold text-gray-800 mb-4">Payroll Cost Breakdown</h3>
          <div className="flex items-center gap-5">
            <PieChart width={160} height={160}>
              <Pie data={variableBreakdown} cx={75} cy={75} innerRadius={45} outerRadius={70} dataKey="value">
                {variableBreakdown.map((entry, i) => <Cell key={i} fill={entry.color} />)}
              </Pie>
            </PieChart>
            <div className="space-y-2 flex-1">
              {variableBreakdown.map((item, i) => (
                <div key={i} className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: item.color }}></div>
                    <span className="text-xs text-gray-600">{item.name}</span>
                  </div>
                  <span className="text-xs font-mono font-semibold text-gray-700">{(item.value / 1000).toFixed(0)}K</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-gray-200 p-5">
          <h3 className="font-semibold text-gray-800 mb-4">Leave Without Pay Trend</h3>
          <ResponsiveContainer width="100%" height={180}>
            <BarChart data={lwopTrend}>
              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
              <XAxis dataKey="month" tick={{ fontSize: 11 }} />
              <YAxis yAxisId="days" tick={{ fontSize: 11 }} />
              <YAxis yAxisId="amount" orientation="right" tick={{ fontSize: 11 }} tickFormatter={v => `${(v/1000).toFixed(0)}K`} />
              <Tooltip />
              <Bar yAxisId="days" dataKey="days" fill="#f97316" name="LWOP Days" radius={[3,3,0,0]} />
              <Line yAxisId="amount" type="monotone" dataKey="amount" stroke="#7c3aed" strokeWidth={2} name="Amount Deducted" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div className="px-5 py-4 border-b border-gray-200 flex items-center justify-between">
          <h3 className="font-semibold text-gray-800">Grade-wise Salary Distribution</h3>
          <button className="flex items-center gap-2 px-3 py-1.5 border border-gray-200 text-gray-600 rounded-lg text-xs cursor-pointer hover:bg-gray-50 whitespace-nowrap">
            <div className="w-4 h-4 flex items-center justify-center"><i className="ri-download-line text-xs"></i></div>
            Export Report
          </button>
        </div>
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-gray-50 border-b border-gray-200">
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Grade</th>
              <th className="text-center px-4 py-3 text-gray-600 font-semibold">Headcount</th>
              <th className="text-right px-4 py-3 text-gray-600 font-semibold">Min Basic</th>
              <th className="text-right px-4 py-3 text-gray-600 font-semibold">Max Basic</th>
              <th className="text-right px-4 py-3 text-gray-600 font-semibold">Avg Basic</th>
              <th className="text-right px-4 py-3 text-gray-600 font-semibold">Total Cost</th>
              <th className="text-right px-4 py-3 text-gray-600 font-semibold">% of Payroll</th>
            </tr>
          </thead>
          <tbody>
            {[
              { grade: 'G1', headcount: 6, min: 25000, max: 32000, avg: 28500, total: 171000, pct: 2.2 },
              { grade: 'G2', headcount: 14, min: 33000, max: 45000, avg: 38000, total: 532000, pct: 6.8 },
              { grade: 'G3', headcount: 22, min: 46000, max: 65000, avg: 54500, total: 1199000, pct: 15.3 },
              { grade: 'G4', headcount: 28, min: 66000, max: 88000, avg: 76200, total: 2133600, pct: 27.2 },
              { grade: 'G5', headcount: 12, min: 89000, max: 110000, avg: 96500, total: 1158000, pct: 14.8 },
              { grade: 'G6', headcount: 5, min: 115000, max: 160000, avg: 133000, total: 665000, pct: 8.5 },
              { grade: 'G7+', headcount: 0, min: 165000, max: 250000, avg: 0, total: 0, pct: 0 },
            ].map((row, i) => (
              <tr key={row.grade} className={`border-b border-gray-100 hover:bg-gray-50 ${i % 2 === 0 ? '' : 'bg-gray-50/30'}`}>
                <td className="px-4 py-3"><span className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs font-semibold">{row.grade}</span></td>
                <td className="px-4 py-3 text-center text-gray-700">{row.headcount}</td>
                <td className="px-4 py-3 text-right font-mono text-gray-600">{row.min.toLocaleString()}</td>
                <td className="px-4 py-3 text-right font-mono text-gray-600">{row.max.toLocaleString()}</td>
                <td className="px-4 py-3 text-right font-mono font-semibold text-gray-700">{row.avg.toLocaleString()}</td>
                <td className="px-4 py-3 text-right font-mono font-semibold text-gray-800">{row.total.toLocaleString()}</td>
                <td className="px-4 py-3 text-right">
                  <div className="flex items-center justify-end gap-2">
                    <div className="w-16 h-1.5 bg-gray-100 rounded-full overflow-hidden">
                      <div className="h-full bg-pink-500 rounded-full" style={{ width: `${Math.min(row.pct * 3, 100)}%` }}></div>
                    </div>
                    <span className="text-xs text-gray-600">{row.pct}%</span>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}