"use client";

import { useState } from "react";
import { 
  Briefcase, Plus, Search, MoreHorizontal, Calendar, 
  Users, CheckCircle2, Clock, AlertCircle, PlayCircle,
  Paperclip, MessageSquare
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } 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, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuSeparator, DropdownMenuTrigger 
} from "@/components/ui/dropdown-menu";

const mockProjects = [
  {
    id: "PRJ-001",
    name: "SARL Plastique Complete Recycling Line",
    client: "SARL Plastique Algerie",
    status: "In Progress",
    startDate: "2024-03-01",
    endDate: "2024-04-15",
    budget: "8,500,000 DZD",
    progress: 65,
    team: ["Ah", "Ka", "Mo"],
    tasks: 12,
    completedTasks: 8,
    attachments: 4
  },
  {
    id: "PRJ-002",
    name: "Metal Crusher Installation & Training",
    client: "EURL Metal Works",
    status: "Planning",
    startDate: "2024-04-01",
    endDate: "2024-04-10",
    budget: "1,200,000 DZD",
    progress: 10,
    team: ["Ka"],
    tasks: 5,
    completedTasks: 0,
    attachments: 2
  },
  {
    id: "PRJ-003",
    name: "Industrial Shredder Maintenance (Annual)",
    client: "Global Waste Solutions",
    status: "Completed",
    startDate: "2024-02-15",
    endDate: "2024-02-28",
    budget: "450,000 DZD",
    progress: 100,
    team: ["Ah", "Mo"],
    tasks: 8,
    completedTasks: 8,
    attachments: 6
  },
  {
    id: "PRJ-004",
    name: "Custom Conveyor Belt Setup",
    client: "Industrie Papier Nord",
    status: "On Hold",
    startDate: "2024-03-10",
    endDate: "2024-03-25",
    budget: "2,100,000 DZD",
    progress: 40,
    team: ["Mo"],
    tasks: 15,
    completedTasks: 6,
    attachments: 1
  }
];

const getStatusBadge = (status: string) => {
  switch (status) {
    case "Completed": return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30 flex items-center gap-1"><CheckCircle2 className="w-3 h-3"/> Completed</Badge>;
    case "In Progress": return <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 flex items-center gap-1"><PlayCircle className="w-3 h-3"/> In Progress</Badge>;
    case "Planning": return <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/30 flex items-center gap-1"><Clock className="w-3 h-3"/> Planning</Badge>;
    case "On Hold": return <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30 flex items-center gap-1"><AlertCircle className="w-3 h-3"/> On Hold</Badge>;
    default: return <Badge>{status}</Badge>;
  }
};

export default function ProjectsManagement() {
  const [activeTab, setActiveTab] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");

  const filteredProjects = mockProjects.filter(p => {
    const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.client.toLowerCase().includes(searchQuery.toLowerCase());
    if (activeTab === "all") return matchesSearch;
    return matchesSearch && p.status.toLowerCase() === activeTab.replace("-", " ");
  });

  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">Installation Projects</h2>
          <p className="text-gray-400 mt-1">Track installations, maintenance schedules, and engineering tasks.</p>
        </div>
        <Button className="bg-brand-red hover:bg-brand-red/90 text-white font-semibold">
          <Plus className="w-4 h-4 mr-2" /> New Project
        </Button>
      </div>

      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 bg-brand-charcoal/50 border border-white/10 p-4 rounded-xl backdrop-blur-sm">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full md:w-auto">
          <TabsList className="bg-black/40 border border-white/10">
            <TabsTrigger value="all" className="data-[state=active]:bg-white/10 data-[state=active]:text-white">All Projects</TabsTrigger>
            <TabsTrigger value="in-progress" className="data-[state=active]:bg-blue-500/20 data-[state=active]:text-blue-400">In Progress</TabsTrigger>
            <TabsTrigger value="planning" className="data-[state=active]:bg-purple-500/20 data-[state=active]:text-purple-400">Planning</TabsTrigger>
            <TabsTrigger value="on-hold" className="data-[state=active]:bg-amber-500/20 data-[state=active]:text-amber-500">On Hold</TabsTrigger>
            <TabsTrigger value="completed" className="data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-400">Completed</TabsTrigger>
          </TabsList>
        </Tabs>
        <div className="relative w-full md:w-80">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-500" />
          <Input 
            placeholder="Search projects or clients..." 
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9 bg-black/40 border-white/10 focus-visible:ring-brand-red text-white w-full"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
        {filteredProjects.map((project) => (
          <Card key={project.id} className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm hover:border-white/20 transition-all group">
            <CardHeader className="pb-3 border-b border-white/10">
              <div className="flex justify-between items-start mb-2">
                {getStatusBadge(project.status)}
                <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">
                    <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">View Details</DropdownMenuItem>
                    <DropdownMenuItem className="focus:bg-white/10 cursor-pointer">Edit Project</DropdownMenuItem>
                    <DropdownMenuSeparator className="bg-white/10" />
                    <DropdownMenuItem className="focus:bg-emerald-500/20 focus:text-emerald-400 cursor-pointer">Mark Completed</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
              <CardTitle className="text-white text-lg leading-tight group-hover:text-brand-red transition-colors">{project.name}</CardTitle>
              <CardDescription className="text-gray-400 font-medium">{project.client}</CardDescription>
            </CardHeader>
            
            <CardContent className="py-4 space-y-4">
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="text-gray-500 flex items-center gap-1 mb-1"><Calendar className="w-3 h-3"/> Timeline</span>
                  <span className="text-white font-medium">{project.startDate} <br/>to {project.endDate}</span>
                </div>
                <div>
                  <span className="text-gray-500 flex items-center gap-1 mb-1"><Briefcase className="w-3 h-3"/> Budget</span>
                  <span className="text-white font-medium">{project.budget}</span>
                </div>
              </div>

              {/* Progress Bar */}
              <div className="space-y-1.5">
                <div className="flex justify-between text-xs font-medium">
                  <span className="text-gray-400">Progress</span>
                  <span className="text-white">{project.progress}%</span>
                </div>
                <div className="w-full bg-black/50 rounded-full h-2 border border-white/5">
                  <div 
                    className={`h-full rounded-full ${
                      project.status === 'Completed' ? 'bg-emerald-500' :
                      project.status === 'In Progress' ? 'bg-blue-500' :
                      project.status === 'On Hold' ? 'bg-amber-500' : 'bg-purple-500'
                    }`}
                    style={{ width: `${project.progress}%` }}
                  ></div>
                </div>
              </div>
            </CardContent>

            <CardFooter className="pt-0 flex items-center justify-between border-t border-white/10 bg-black/20 p-4">
              <div className="flex -space-x-2">
                {project.team.map((initials, i) => (
                  <Avatar key={i} className="w-8 h-8 border-2 border-[#111827]">
                    <AvatarFallback className="bg-white/10 text-xs text-white">{initials}</AvatarFallback>
                  </Avatar>
                ))}
              </div>
              
              <div className="flex items-center gap-3 text-xs text-gray-400">
                <div className="flex items-center gap-1" title="Tasks Completed">
                  <CheckCircle2 className="w-4 h-4 text-gray-500" />
                  <span>{project.completedTasks}/{project.tasks}</span>
                </div>
                <div className="flex items-center gap-1" title="Attachments">
                  <Paperclip className="w-4 h-4 text-gray-500" />
                  <span>{project.attachments}</span>
                </div>
              </div>
            </CardFooter>
          </Card>
        ))}
      </div>
    </div>
  );
}