import React, { useState, useEffect } from 'react';
import { User, Briefcase, DollarSign, Calendar, Mail, Phone, MapPin, FileText } from 'lucide-react';

interface Employee {
  id: string;
  first_name: string;
  last_name: string;
  email: string;
  phone?: string;
  date_of_birth?: string;
  ssn?: string;
  department?: string;
  manager?: string;
  hire_date?: string;
}

interface Job {
  id: string;
  title: string;
  location: { city: string; state: string };
  hire_date: string;
  current: boolean;
}

interface Compensation {
  job_id: string;
  rate: string;
  payment_unit: string;
  flsa_status: string;
}

export default function EmployeeDetail() {
  const [employee, setEmployee] = useState<Employee | null>(null);
  const [jobs, setJobs] = useState<Job[]>([]);
  const [compensation, setCompensation] = useState<Compensation[]>([]);
  const [activeTab, setActiveTab] = useState<'overview' | 'jobs' | 'compensation' | 'documents'>('overview');

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP
    setEmployee({
      id: '1234567890',
      first_name: 'Sarah',
      last_name: 'Johnson',
      email: 'sarah.johnson@company.com',
      phone: '+1 (555) 123-4567',
      date_of_birth: '1990-05-15',
      ssn: '***-**-4567',
      department: 'Engineering',
      manager: 'Michael Chen',
      hire_date: '2022-03-15'
    });

    setJobs([
      {
        id: 'job1',
        title: 'Senior Software Engineer',
        location: { city: 'San Francisco', state: 'CA' },
        hire_date: '2022-03-15',
        current: true
      },
      {
        id: 'job2',
        title: 'Software Engineer',
        location: { city: 'San Francisco', state: 'CA' },
        hire_date: '2020-06-01',
        current: false
      }
    ]);

    setCompensation([
      {
        job_id: 'job1',
        rate: '145000',
        payment_unit: 'Year',
        flsa_status: 'Exempt'
      }
    ]);
  }, []);

  if (!employee) {
    return (
      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
        <div className="text-slate-400">Loading...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-8">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="bg-slate-900 rounded-lg p-8 mb-6 border border-slate-800">
          <div className="flex items-start justify-between">
            <div className="flex items-center gap-6">
              <div className="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-3xl font-bold">
                {employee.first_name[0]}{employee.last_name[0]}
              </div>
              <div>
                <h1 className="text-3xl font-bold mb-2">
                  {employee.first_name} {employee.last_name}
                </h1>
                <div className="flex items-center gap-4 text-slate-400">
                  <span className="flex items-center gap-1">
                    <Briefcase size={16} />
                    {jobs.find(j => j.current)?.title}
                  </span>
                  <span className="flex items-center gap-1">
                    <Calendar size={16} />
                    Joined {employee.hire_date}
                  </span>
                </div>
              </div>
            </div>
            <button className="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-colors">
              Edit Profile
            </button>
          </div>
        </div>

        {/* Tabs */}
        <div className="flex gap-2 mb-6 border-b border-slate-800">
          {(['overview', 'jobs', 'compensation', 'documents'] as const).map(tab => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`px-6 py-3 font-medium transition-colors ${
                activeTab === tab
                  ? 'text-blue-400 border-b-2 border-blue-400'
                  : 'text-slate-400 hover:text-slate-200'
              }`}
            >
              {tab.charAt(0).toUpperCase() + tab.slice(1)}
            </button>
          ))}
        </div>

        {/* Content */}
        {activeTab === 'overview' && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <InfoCard title="Contact Information">
              <InfoRow icon={<Mail size={18} />} label="Email" value={employee.email} />
              <InfoRow icon={<Phone size={18} />} label="Phone" value={employee.phone || 'Not provided'} />
              <InfoRow icon={<MapPin size={18} />} label="Location" value={`${jobs.find(j => j.current)?.location.city}, ${jobs.find(j => j.current)?.location.state}`} />
            </InfoCard>

            <InfoCard title="Personal Information">
              <InfoRow icon={<User size={18} />} label="Date of Birth" value={employee.date_of_birth || 'Not provided'} />
              <InfoRow icon={<FileText size={18} />} label="SSN" value={employee.ssn || 'Not provided'} />
              <InfoRow icon={<Briefcase size={18} />} label="Department" value={employee.department || 'Not assigned'} />
            </InfoCard>

            <InfoCard title="Employment Details">
              <InfoRow icon={<Calendar size={18} />} label="Hire Date" value={employee.hire_date || 'Unknown'} />
              <InfoRow icon={<User size={18} />} label="Manager" value={employee.manager || 'Not assigned'} />
              <InfoRow icon={<Briefcase size={18} />} label="Employment Type" value="Full-time" />
            </InfoCard>

            <InfoCard title="Current Compensation">
              {compensation.map((comp, idx) => (
                <div key={idx} className="space-y-2">
                  <InfoRow
                    icon={<DollarSign size={18} />}
                    label="Annual Salary"
                    value={`$${parseInt(comp.rate).toLocaleString()}`}
                  />
                  <InfoRow icon={<FileText size={18} />} label="FLSA Status" value={comp.flsa_status} />
                  <InfoRow icon={<Briefcase size={18} />} label="Payment Unit" value={comp.payment_unit} />
                </div>
              ))}
            </InfoCard>
          </div>
        )}

        {activeTab === 'jobs' && (
          <div className="space-y-4">
            {jobs.map(job => (
              <div
                key={job.id}
                className={`bg-slate-900 rounded-lg p-6 border ${
                  job.current ? 'border-blue-500/50' : 'border-slate-800'
                }`}
              >
                <div className="flex items-start justify-between">
                  <div>
                    <h3 className="text-xl font-semibold mb-2">{job.title}</h3>
                    <div className="text-slate-400 space-y-1">
                      <div>📍 {job.location.city}, {job.location.state}</div>
                      <div>📅 Started {job.hire_date}</div>
                    </div>
                  </div>
                  {job.current && (
                    <span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium">
                      Current
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}

        {activeTab === 'compensation' && (
          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
            <h2 className="text-xl font-semibold mb-6">Compensation History</h2>
            {compensation.map((comp, idx) => (
              <div key={idx} className="p-4 bg-slate-800/50 rounded-lg">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <div className="text-slate-400 text-sm">Annual Salary</div>
                    <div className="text-2xl font-bold text-emerald-400">
                      ${parseInt(comp.rate).toLocaleString()}
                    </div>
                  </div>
                  <div>
                    <div className="text-slate-400 text-sm">FLSA Status</div>
                    <div className="text-lg font-medium">{comp.flsa_status}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {activeTab === 'documents' && (
          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
            <h2 className="text-xl font-semibold mb-4">Documents</h2>
            <div className="text-slate-400 text-center py-12">
              No documents available
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function InfoCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
      <h2 className="text-xl font-semibold mb-4">{title}</h2>
      <div className="space-y-3">{children}</div>
    </div>
  );
}

function InfoRow({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
  return (
    <div className="flex items-center gap-3">
      <div className="text-slate-400">{icon}</div>
      <div className="flex-1">
        <div className="text-slate-400 text-sm">{label}</div>
        <div className="text-slate-100 font-medium">{value}</div>
      </div>
    </div>
  );
}
