"use client";

import { useState } from "react";
import { 
  Users, UserCheck, CalendarDays, Wallet, Search, 
  MoreHorizontal, Plus, Briefcase, Mail, Phone, Clock
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  Table, TableBody, TableCell, TableHead, 
  TableHeader, TableRow 
} from "@/components/ui/table";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger 
} from "@/components/ui/dropdown-menu";

const kpiData = [
  { title: "Total Employees", value: "42", icon: Users, color: "text-blue-500" },
  { title: "Present Today", value: "38", icon: UserCheck, color: "text-emerald-500" },
  { title: "On Leave", value: "4", icon: CalendarDays, color: "text-amber-500" },
  { title: "Monthly Payroll", value: "3.4M DZD", icon: Wallet, color: "text-brand-red" },
];

const mockEmployees = [
  { id: "EMP-001", name: "Ahmed Benali", position: "Chief Engineer", department: "Engineering", phone: "+213 555 11 22 33", email: "a.benali@k-creation.dz", salary: "180,000 DZD", contract: "CDI", start: "2020-01-15", status: "Active" },
  { id: "EMP-002", name: "Sarah Lamine", position: "Sales Manager", department: "Sales", phone: "+213 770 99 88 77", email: "s.lamine@k-creation.dz", salary: "150,000 DZD", contract: "CDI", start: "2021-03-01", status: "Active" },
  { id: "EMP-003", name: "Karim Mansouri", position: "Technician", department: "Support", phone: "+213 661 44 55 66", email: "k.mansouri@k-creation.dz", salary: "85,000 DZD", contract: "CDD", start: "2023-06-10", status: "On Leave" },
  { id: "EMP-004", name: "Yacine B.", position: "Junior Tech", department: "Support", phone: "+213 550 12 34 56", email: "y.b@k-creation.dz", salary: "65,000 DZD", contract: "CDD", start: "2024-01-05", status: "Active" },
];

const getStatusBadge = (status: string) => {
  switch (status) {
    case "Active": return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">Active</Badge>;
    case "On Leave": return <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30">On Leave</Badge>;
    case "Terminated": return <Badge className="bg-brand-red/20 text-brand-red border-brand-red/30">Terminated</Badge>;
    default: return <Badge>{status}</Badge>;
  }
};

const getContractBadge = (contract: string) => {
  if(contract === "CDI") return <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30">CDI</Badge>;
  return <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/30">{contract}</Badge>;
};

export default function HRDashboard() {
  const [searchQuery, setSearchQuery] = useState("");

  const filteredEmployees = mockEmployees.filter(e => 
    e.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    e.department.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div>
          <h2 className="text-3xl font-bold text-white tracking-tight">Human Resources</h2>
          <p className="text-gray-400 mt-1">Manage employees, attendance, leave requests, and payroll.</p>
        </div>
        <Button className="bg-brand-red hover:bg-brand-red/90 text-white font-semibold">
          <Plus className="w-4 h-4 mr-2" /> Add Employee
        </Button>
      </div>

      <Tabs defaultValue="directory" className="w-full">
        <TabsList className="bg-brand-charcoal border border-white/10 p-1">
          <TabsTrigger value="directory" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Employee Directory</TabsTrigger>
          <TabsTrigger value="leave" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Leave Requests</TabsTrigger>
          <TabsTrigger value="payroll" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Payroll</TabsTrigger>
        </TabsList>

        <TabsContent value="directory" className="mt-6 space-y-6">
          <div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
            {kpiData.map((kpi, index) => (
              <Card key={index} className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm">
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 px-4 pt-4">
                  <CardTitle className="text-sm font-medium text-gray-400">
                    {kpi.title}
                  </CardTitle>
                  <kpi.icon className={`h-5 w-5 ${kpi.color}`} />
                </CardHeader>
                <CardContent className="px-4 pb-4">
                  <div className="text-2xl font-bold text-white">{kpi.value}</div>
                </CardContent>
              </Card>
            ))}
          </div>

          <Card className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm overflow-hidden">
            <div className="p-4 border-b border-white/10 flex items-center justify-between bg-black/20">
              <div className="relative w-full max-w-sm">
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-500" />
                <Input 
                  placeholder="Search by Name or Department..." 
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9 bg-black/40 border-white/10 focus-visible:ring-brand-red text-white"
                />
              </div>
            </div>
            
            <div className="overflow-x-auto">
              <Table>
                <TableHeader className="bg-black/40 hover:bg-black/40">
                  <TableRow className="border-white/10 hover:bg-transparent">
                    <TableHead className="text-gray-400 font-semibold w-[250px]">Employee</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Contact</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Department & Role</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Salary & Contract</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Status</TableHead>
                    <TableHead className="text-right text-gray-400 font-semibold">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredEmployees.map((emp) => (
                    <TableRow key={emp.id} className="border-white/5 hover:bg-white/5 transition-colors">
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <Avatar className="w-10 h-10 border border-white/10">
                            <AvatarFallback className="bg-brand-red text-white text-xs">{emp.name.substring(0,2).toUpperCase()}</AvatarFallback>
                          </Avatar>
                          <div>
                            <div className="font-bold text-white">{emp.name}</div>
                            <div className="text-xs text-gray-500">{emp.id}</div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="text-sm text-gray-300 flex items-center gap-1">
                          <Phone className="w-3 h-3 text-gray-500" /> {emp.phone}
                        </div>
                        <div className="text-xs text-gray-500 flex items-center gap-1 mt-1">
                          <Mail className="w-3 h-3 text-gray-500" /> {emp.email}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="font-medium text-white">{emp.department}</div>
                        <div className="text-xs text-brand-red flex items-center gap-1 mt-1">
                          <Briefcase className="w-3 h-3 text-brand-red/70" /> {emp.position}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="font-bold text-white">{emp.salary}</div>
                        <div className="mt-1">{getContractBadge(emp.contract)}</div>
                      </TableCell>
                      <TableCell>{getStatusBadge(emp.status)}</TableCell>
                      <TableCell className="text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0 text-gray-400 hover:text-white hover:bg-white/10">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end" className="bg-brand-charcoal border-white/10 text-white w-48">
                            <DropdownMenuLabel>Employee Actions</DropdownMenuLabel>
                            <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">View Profile</DropdownMenuItem>
                            <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">Edit Details</DropdownMenuItem>
                            <DropdownMenuSeparator className="bg-white/10" />
                            <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">View Attendance</DropdownMenuItem>
                            <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">Generate Payslip</DropdownMenuItem>
                            <DropdownMenuSeparator className="bg-white/10" />
                            <DropdownMenuItem className="focus:bg-brand-red focus:text-white cursor-pointer text-brand-red">Terminate Contract</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}