"use client";

import { useState } from "react";
import { 
  Users, UserCheck, UserPlus, UserMinus, 
  MapPin, DollarSign, Search, Plus, MoreHorizontal,
  Mail, Phone, FileText, Calendar, Trash2, Edit
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Table, TableBody, TableCell, TableHead, 
  TableHeader, TableRow 
} from "@/components/ui/table";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger 
} from "@/components/ui/dropdown-menu";

// --- MOCK DATA ---
const kpiData = [
  { title: "Total Clients", value: "342", icon: Users, color: "text-blue-500" },
  { title: "Active Clients", value: "289", icon: UserCheck, color: "text-emerald-500" },
  { title: "New This Month", value: "24", icon: UserPlus, color: "text-brand-red" },
  { title: "Lost Clients", value: "3", icon: UserMinus, color: "text-gray-500" },
  { title: "Top Wilaya", value: "Algiers (16)", icon: MapPin, color: "text-purple-500" },
  { title: "Avg. Revenue/Client", value: "850k DZD", icon: DollarSign, color: "text-amber-500" },
];

const mockClients = [
  {
    id: "CL-001",
    companyName: "SARL Plastique Algerie",
    contactPerson: "Ahmed Benali",
    position: "Directeur Général",
    phone: "+213 555 12 34 56",
    email: "contact@plastique-dz.com",
    wilaya: "Algiers",
    industry: "Recycling",
    status: "VIP",
    lastActivity: "2024-03-15",
  },
  {
    id: "CL-002",
    companyName: "EURL Metal Works",
    contactPerson: "Karim Mansouri",
    position: "Purchasing Manager",
    phone: "+213 770 98 76 54",
    email: "k.mansouri@metalworks.dz",
    wilaya: "Oran",
    industry: "Manufacturing",
    status: "Active",
    lastActivity: "2024-03-14",
  },
  {
    id: "CL-003",
    companyName: "Global Waste Solutions",
    contactPerson: "Sarah Lamine",
    position: "CEO",
    phone: "+213 661 22 33 44",
    email: "s.lamine@gws.com",
    wilaya: "Setif",
    industry: "Waste Management",
    status: "Prospect",
    lastActivity: "2024-03-10",
  },
  {
    id: "CL-004",
    companyName: "Industrie Papier Nord",
    contactPerson: "Yacine Khelil",
    position: "Technical Director",
    phone: "+213 550 11 22 33",
    email: "tech@ipnord.dz",
    wilaya: "Blida",
    industry: "Paper Processing",
    status: "Inactive",
    lastActivity: "2023-11-05",
  },
];

const getStatusBadge = (status: string) => {
  switch (status) {
    case "VIP": return <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/30">VIP</Badge>;
    case "Active": return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">Active</Badge>;
    case "Prospect": return <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30">Prospect</Badge>;
    case "Inactive": return <Badge className="bg-gray-500/20 text-gray-400 border-gray-500/30">Inactive</Badge>;
    case "Blacklisted": return <Badge className="bg-brand-red/20 text-brand-red border-brand-red/30">Blacklisted</Badge>;
    default: return <Badge>{status}</Badge>;
  }
};

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

  const filteredClients = mockClients.filter(c => 
    c.companyName.toLowerCase().includes(searchQuery.toLowerCase()) ||
    c.contactPerson.toLowerCase().includes(searchQuery.toLowerCase()) ||
    c.wilaya.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">Client Management</h2>
          <p className="text-gray-400 mt-1">Manage prospects, active clients, and VIP accounts.</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 New Client
        </Button>
      </div>

      {/* KPI Cards */}
      <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
        {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-xs font-medium text-gray-400">
                {kpi.title}
              </CardTitle>
              <kpi.icon className={`h-4 w-4 ${kpi.color}`} />
            </CardHeader>
            <CardContent className="px-4 pb-4">
              <div className="text-xl font-bold text-white">{kpi.value}</div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Data Table Section */}
      <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 clients, contacts, wilayas..." 
              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 className="flex gap-2">
            <Button variant="outline" className="border-white/10 bg-transparent text-white hover:bg-white/5">
              Filter
            </Button>
            <Button variant="outline" className="border-white/10 bg-transparent text-white hover:bg-white/5">
              Export CSV
            </Button>
          </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">Company</TableHead>
                <TableHead className="text-gray-400 font-semibold">Contact Person</TableHead>
                <TableHead className="text-gray-400 font-semibold">Contact Info</TableHead>
                <TableHead className="text-gray-400 font-semibold">Wilaya</TableHead>
                <TableHead className="text-gray-400 font-semibold">Industry</TableHead>
                <TableHead className="text-gray-400 font-semibold">Status</TableHead>
                <TableHead className="text-right text-gray-400 font-semibold">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredClients.map((client) => (
                <TableRow key={client.id} className="border-white/5 hover:bg-white/5 transition-colors">
                  <TableCell>
                    <div className="font-semibold text-white">{client.companyName}</div>
                    <div className="text-xs text-gray-500">{client.id}</div>
                  </TableCell>
                  <TableCell>
                    <div className="text-white">{client.contactPerson}</div>
                    <div className="text-xs text-gray-500">{client.position}</div>
                  </TableCell>
                  <TableCell>
                    <div className="text-sm text-gray-300 flex items-center gap-1">
                      <Phone className="w-3 h-3 text-gray-500" /> {client.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" /> {client.email}
                    </div>
                  </TableCell>
                  <TableCell className="text-gray-300">{client.wilaya}</TableCell>
                  <TableCell className="text-gray-300">{client.industry}</TableCell>
                  <TableCell>{getStatusBadge(client.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">
                          <span className="sr-only">Open menu</span>
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end" className="bg-brand-charcoal border-white/10 text-white w-48">
                        <DropdownMenuLabel>Client Actions</DropdownMenuLabel>
                        <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">
                          <Users className="w-4 h-4 mr-2" /> View Profile
                        </DropdownMenuItem>
                        <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">
                          <Edit className="w-4 h-4 mr-2" /> Edit Client
                        </DropdownMenuItem>
                        <DropdownMenuSeparator className="bg-white/10" />
                        <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">
                          <FileText className="w-4 h-4 mr-2" /> Create Quote
                        </DropdownMenuItem>
                        <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">
                          <Calendar className="w-4 h-4 mr-2" /> Schedule Meeting
                        </DropdownMenuItem>
                        <DropdownMenuSeparator className="bg-white/10" />
                        <DropdownMenuItem className="focus:bg-brand-red focus:text-white cursor-pointer text-brand-red">
                          <Trash2 className="w-4 h-4 mr-2" /> Delete Client
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </Card>
    </div>
  );
}