import React, { useState, useEffect } from 'react';
import { Calendar, CheckCircle, XCircle, Clock, Umbrella } from 'lucide-react';

interface TimeOffRequest {
  id: string;
  employee: { name: string; id: string };
  requestType: 'vacation' | 'sick' | 'personal' | 'unpaid';
  startDate: string;
  endDate: string;
  hours: number;
  status: 'approved' | 'pending' | 'denied';
  notes?: string;
  requestDate: string;
}

export default function TimeOffTracker() {
  const [requests, setRequests] = useState<TimeOffRequest[]>([]);
  const [filter, setFilter] = useState<string>('all');

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP
    setRequests([
      {
        id: '1',
        employee: { name: 'Sarah Johnson', id: 'emp_001' },
        requestType: 'vacation',
        startDate: '2024-03-15',
        endDate: '2024-03-22',
        hours: 64,
        status: 'approved',
        notes: 'Family trip to Hawaii',
        requestDate: '2024-02-01'
      },
      {
        id: '2',
        employee: { name: 'Michael Chen', id: 'emp_002' },
        requestType: 'sick',
        startDate: '2024-02-14',
        endDate: '2024-02-16',
        hours: 24,
        status: 'approved',
        requestDate: '2024-02-13'
      },
      {
        id: '3',
        employee: { name: 'Emily Rodriguez', id: 'emp_003' },
        requestType: 'vacation',
        startDate: '2024-04-01',
        endDate: '2024-04-05',
        hours: 40,
        status: 'pending',
        notes: 'Spring break',
        requestDate: '2024-02-10'
      },
      {
        id: '4',
        employee: { name: 'David Kim', id: 'emp_004' },
        requestType: 'personal',
        startDate: '2024-02-20',
        endDate: '2024-02-20',
        hours: 8,
        status: 'approved',
        requestDate: '2024-02-15'
      },
      {
        id: '5',
        employee: { name: 'Lisa Wang', id: 'emp_005' },
        requestType: 'vacation',
        startDate: '2024-05-10',
        endDate: '2024-05-17',
        hours: 56,
        status: 'pending',
        notes: 'Wedding in Europe',
        requestDate: '2024-02-12'
      },
      {
        id: '6',
        employee: { name: 'James Wilson', id: 'emp_006' },
        requestType: 'sick',
        startDate: '2024-02-08',
        endDate: '2024-02-09',
        hours: 16,
        status: 'denied',
        notes: 'Insufficient sick leave balance',
        requestDate: '2024-02-07'
      }
    ]);
  }, []);

  const filteredRequests = filter === 'all'
    ? requests
    : requests.filter(r => r.status === filter);

  const stats = {
    pending: requests.filter(r => r.status === 'pending').length,
    approved: requests.filter(r => r.status === 'approved').length,
    denied: requests.filter(r => r.status === 'denied').length,
    totalHours: requests.filter(r => r.status === 'approved').reduce((sum, r) => sum + r.hours, 0)
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-2 flex items-center gap-3">
            <Umbrella className="text-cyan-400" size={36} />
            Time Off Tracker
          </h1>
          <p className="text-slate-400">Manage employee time off requests and balances</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
          <StatCard
            title="Pending Requests"
            value={stats.pending}
            icon={<Clock className="text-yellow-400" />}
            color="yellow"
          />
          <StatCard
            title="Approved"
            value={stats.approved}
            icon={<CheckCircle className="text-green-400" />}
            color="green"
          />
          <StatCard
            title="Denied"
            value={stats.denied}
            icon={<XCircle className="text-red-400" />}
            color="red"
          />
          <StatCard
            title="Total Hours"
            value={stats.totalHours}
            icon={<Calendar className="text-blue-400" />}
            color="blue"
          />
        </div>

        {/* Filters */}
        <div className="bg-slate-900 rounded-lg p-6 mb-6 border border-slate-800">
          <div className="flex gap-2">
            {['all', 'pending', 'approved', 'denied'].map(status => (
              <button
                key={status}
                onClick={() => setFilter(status)}
                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                  filter === status
                    ? 'bg-blue-600 text-white'
                    : 'bg-slate-800 text-slate-300 hover:bg-slate-700'
                }`}
              >
                {status.charAt(0).toUpperCase() + status.slice(1)}
              </button>
            ))}
          </div>
          <div className="mt-4 text-slate-400">
            Showing {filteredRequests.length} request{filteredRequests.length !== 1 ? 's' : ''}
          </div>
        </div>

        {/* Requests List */}
        <div className="space-y-4">
          {filteredRequests.map(request => (
            <RequestCard key={request.id} request={request} />
          ))}
        </div>
      </div>
    </div>
  );
}

function StatCard({ title, value, icon, color }: {
  title: string;
  value: number;
  icon: React.ReactNode;
  color: string;
}) {
  return (
    <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
      <div className="flex items-start justify-between mb-4">
        <div className="text-slate-400 text-sm font-medium">{title}</div>
        {icon}
      </div>
      <div className="text-3xl font-bold">{value}</div>
    </div>
  );
}

function RequestCard({ request }: { request: TimeOffRequest }) {
  const statusConfig = {
    approved: {
      icon: <CheckCircle size={20} className="text-green-400" />,
      bg: 'bg-green-500/10',
      border: 'border-green-500/30',
      text: 'text-green-400'
    },
    pending: {
      icon: <Clock size={20} className="text-yellow-400" />,
      bg: 'bg-yellow-500/10',
      border: 'border-yellow-500/30',
      text: 'text-yellow-400'
    },
    denied: {
      icon: <XCircle size={20} className="text-red-400" />,
      bg: 'bg-red-500/10',
      border: 'border-red-500/30',
      text: 'text-red-400'
    }
  };

  const typeConfig = {
    vacation: { emoji: '🏖️', color: 'text-blue-400' },
    sick: { emoji: '🤒', color: 'text-red-400' },
    personal: { emoji: '👤', color: 'text-purple-400' },
    unpaid: { emoji: '⏸️', color: 'text-slate-400' }
  };

  const config = statusConfig[request.status];
  const typeInfo = typeConfig[request.requestType];

  return (
    <div className="bg-slate-900 rounded-lg p-6 border border-slate-800 hover:border-blue-500/50 transition-colors">
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center font-bold">
            {request.employee.name.split(' ').map(n => n[0]).join('')}
          </div>
          <div>
            <h3 className="text-xl font-semibold mb-1">{request.employee.name}</h3>
            <div className={`flex items-center gap-2 ${typeInfo.color}`}>
              <span className="text-xl">{typeInfo.emoji}</span>
              <span className="capitalize">{request.requestType}</span>
            </div>
          </div>
        </div>
        <span className={`px-3 py-1 rounded-full text-sm font-medium border ${config.bg} ${config.border} ${config.text} flex items-center gap-1`}>
          {config.icon}
          {request.status.toUpperCase()}
        </span>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-4">
        <div>
          <div className="text-slate-400 text-sm mb-1">Start Date</div>
          <div className="font-medium">{request.startDate}</div>
        </div>

        <div>
          <div className="text-slate-400 text-sm mb-1">End Date</div>
          <div className="font-medium">{request.endDate}</div>
        </div>

        <div>
          <div className="text-slate-400 text-sm mb-1">Hours Requested</div>
          <div className="font-medium text-cyan-400">{request.hours}h</div>
        </div>

        <div>
          <div className="text-slate-400 text-sm mb-1">Requested On</div>
          <div className="font-medium">{request.requestDate}</div>
        </div>
      </div>

      {request.notes && (
        <div className="p-4 bg-slate-800/50 rounded-lg">
          <div className="text-slate-400 text-sm mb-1">Notes</div>
          <div className="text-slate-200">{request.notes}</div>
        </div>
      )}

      {request.status === 'pending' && (
        <div className="mt-4 flex gap-2">
          <button className="flex-1 py-2 bg-green-600 hover:bg-green-700 rounded-lg font-medium transition-colors">
            Approve
          </button>
          <button className="flex-1 py-2 bg-red-600 hover:bg-red-700 rounded-lg font-medium transition-colors">
            Deny
          </button>
        </div>
      )}
    </div>
  );
}
