'use client';
import { useState } from 'react';
import Link from 'next/link';

const pendingLeaves = [
  { name: 'Jane Mwangi', dept: 'M&E', days: 3, type: 'Annual', hod: 'Dr. Omondi K.' },
  { name: 'David Njoroge', dept: 'Transport', days: 5, type: 'Sick', hod: 'Eng. Maina J.' },
  { name: 'Grace Wanjiku', dept: 'Procurement', days: 2, type: 'Annual', hod: 'Mrs. Achieng R.' },
];

const lowBalance = [
  { name: 'Peter Otieno', balance: 1.5 },
  { name: 'Mary Kamau', balance: 0.5 },
  { name: 'Brian Omondi', balance: 1 },
];

export default function DashboardLeaveWidget() {
  const [tab, setTab] = useState<'pending' | 'alerts'>('pending');
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 hover:-translate-y-1 transition-transform duration-200">
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-orange-500">
            <i className="ri-calendar-check-line text-white text-sm"></i>
          </div>
          <h3 className="font-semibold text-gray-800 text-sm">Leave Summary</h3>
        </div>
        <Link href="/leave" className="text-xs font-medium hover:underline cursor-pointer" style={{ color: '#b22698' }}>Manage</Link>
      </div>
      <div className="flex items-center gap-3 mb-3">
        <div className="flex-1 bg-orange-50 rounded-xl p-3 text-center">
          <p className="text-2xl font-bold text-orange-600">47</p>
          <p className="text-xs text-gray-500 mt-0.5">On Leave Today</p>
        </div>
        <div className="flex-1 bg-red-50 rounded-xl p-3 text-center">
          <p className="text-2xl font-bold text-red-500">8</p>
          <p className="text-xs text-gray-500 mt-0.5">Pending Approvals</p>
        </div>
        <div className="flex-1 bg-yellow-50 rounded-xl p-3 text-center">
          <p className="text-2xl font-bold text-yellow-600">3</p>
          <p className="text-xs text-gray-500 mt-0.5">Low Balance</p>
        </div>
      </div>
      <div className="flex gap-1 bg-gray-100 rounded-lg p-1 mb-3">
        <button onClick={() => setTab('pending')} className={`flex-1 text-xs py-1 rounded-md font-medium transition-all cursor-pointer ${tab === 'pending' ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500'}`}>Pending ({pendingLeaves.length})</button>
        <button onClick={() => setTab('alerts')} className={`flex-1 text-xs py-1 rounded-md font-medium transition-all cursor-pointer ${tab === 'alerts' ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500'}`}>Balance Alerts</button>
      </div>
      {tab === 'pending' && (
        <div className="space-y-2">
          {pendingLeaves.map((l, i) => (
            <div key={i} className="bg-gray-50 rounded-xl px-3 py-2">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs font-semibold text-gray-800">{l.name}</p>
                  <p className="text-xs text-gray-400">{l.dept} · {l.type} · {l.days}d</p>
                </div>
                <div className="flex gap-1">
                  <button className="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center cursor-pointer hover:bg-green-200 transition-colors"><i className="ri-check-line text-xs"></i></button>
                  <button className="w-6 h-6 rounded-full bg-red-100 text-red-500 flex items-center justify-center cursor-pointer hover:bg-red-200 transition-colors"><i className="ri-close-line text-xs"></i></button>
                </div>
              </div>
              <div className="flex items-center gap-1 mt-1">
                <div className="w-3 h-3 flex items-center justify-center"><i className="ri-user-star-line text-gray-400" style={{ fontSize: '10px' }}></i></div>
                <p className="text-xs text-gray-400">HOD Approval: <span className="font-medium text-gray-600">{l.hod}</span></p>
              </div>
            </div>
          ))}
        </div>
      )}
      {tab === 'alerts' && (
        <div className="space-y-2">
          {lowBalance.map((e, i) => (
            <div key={i} className="flex items-center justify-between bg-yellow-50 rounded-xl px-3 py-2">
              <p className="text-xs font-semibold text-gray-800">{e.name}</p>
              <span className="text-xs font-bold text-red-500">{e.balance} days left</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}