"use client";

import { useState } from "react";
import { 
  Wrench, AlertTriangle, CheckCircle, Search, 
  MoreHorizontal, Plus, Clock, User, Calendar,
  Paperclip, Image as ImageIcon, MessageSquare
} 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 {
  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: "Open Tickets", value: "14", icon: AlertTriangle, color: "text-amber-500" },
  { title: "In Progress", value: "8", icon: Clock, color: "text-blue-500" },
  { title: "Resolved (This Week)", value: "23", icon: CheckCircle, color: "text-emerald-500" },
  { title: "Critical Issues", value: "2", icon: Wrench, color: "text-brand-red" },
];

const mockTickets = [
  {
    id: "TCK-1042",
    client: "SARL Plastique Algerie",
    machine: "K-SHRED 5000",
    problem: "Motor overheating after 2 hours of continuous use.",
    priority: "High",
    status: "In Progress",
    technician: "Ahmed K.",
    date: "2024-03-22"
  },
  {
    id: "TCK-1043",
    client: "EURL Metal Works",
    machine: "Heavy Metal Crusher Titan",
    problem: "Strange noise from the main grinding chamber.",
    priority: "Critical",
    status: "Open",
    technician: "Unassigned",
    date: "2024-03-23"
  },
  {
    id: "TCK-1044",
    client: "Global Waste Solutions",
    machine: "Conveyor Belt System",
    problem: "Belt alignment is off, causing friction.",
    priority: "Medium",
    status: "Waiting Parts",
    technician: "Karim M.",
    date: "2024-03-20"
  },
  {
    id: "TCK-1045",
    client: "Industrie Papier Nord",
    machine: "Paper Shredder Pro",
    problem: "Routine annual maintenance requested.",
    priority: "Low",
    status: "Resolved",
    technician: "Yacine B.",
    date: "2024-03-15"
  }
];

const getPriorityBadge = (priority: string) => {
  switch (priority) {
    case "Critical": return <Badge className="bg-brand-red/20 text-brand-red border-brand-red/30">Critical</Badge>;
    case "High": return <Badge className="bg-orange-500/20 text-orange-400 border-orange-500/30">High</Badge>;
    case "Medium": return <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30">Medium</Badge>;
    case "Low": return <Badge className="bg-gray-500/20 text-gray-400 border-gray-500/30">Low</Badge>;
    default: return <Badge>{priority}</Badge>;
  }
};

const getStatusBadge = (status: string) => {
  switch (status) {
    case "Resolved": return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">Resolved</Badge>;
    case "Closed": return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20">Closed</Badge>;
    case "In Progress": return <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30">In Progress</Badge>;
    case "Waiting Parts": return <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30">Waiting Parts</Badge>;
    case "Assigned": return <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/30">Assigned</Badge>;
    case "Open": return <Badge className="bg-brand-red/20 text-brand-red border-brand-red/30 animate-pulse">Open</Badge>;
    default: return <Badge>{status}</Badge>;
  }
};

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

  const filteredTickets = mockTickets.filter(t => 
    t.client.toLowerCase().includes(searchQuery.toLowerCase()) ||
    t.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
    t.machine.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">Support & Ticketing</h2>
          <p className="text-gray-400 mt-1">Manage technical support requests, maintenance visits, and spare parts.</p>
        </div>
        <Button className="bg-brand-red hover:bg-brand-red/90 text-white font-semibold">
          <Plus className="w-4 h-4 mr-2" /> Create Ticket
        </Button>
      </div>

      {/* KPI Cards */}
      <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-md">
            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-500" />
            <Input 
              placeholder="Search by Ticket ID, Client, or Machine..." 
              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 Status
            </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">Ticket ID & Machine</TableHead>
                <TableHead className="text-gray-400 font-semibold">Client</TableHead>
                <TableHead className="text-gray-400 font-semibold w-1/4">Reported Problem</TableHead>
                <TableHead className="text-gray-400 font-semibold">Priority</TableHead>
                <TableHead className="text-gray-400 font-semibold">Technician</TableHead>
                <TableHead className="text-gray-400 font-semibold">Status</TableHead>
                <TableHead className="text-right text-gray-400 font-semibold">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredTickets.map((ticket) => (
                <TableRow key={ticket.id} className="border-white/5 hover:bg-white/5 transition-colors">
                  <TableCell>
                    <div className="font-bold text-white">{ticket.id}</div>
                    <div className="text-xs text-brand-red font-medium mt-1">{ticket.machine}</div>
                  </TableCell>
                  <TableCell>
                    <div className="text-gray-300 font-medium">{ticket.client}</div>
                    <div className="text-xs text-gray-500 flex items-center gap-1 mt-1">
                      <Calendar className="w-3 h-3 text-gray-500" /> {ticket.date}
                    </div>
                  </TableCell>
                  <TableCell>
                    <p className="text-sm text-gray-400 line-clamp-2">{ticket.problem}</p>
                  </TableCell>
                  <TableCell>{getPriorityBadge(ticket.priority)}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 rounded-full bg-black/50 border border-white/10 flex items-center justify-center">
                        <User className="w-3 h-3 text-gray-400" />
                      </div>
                      <span className="text-sm text-gray-300">{ticket.technician}</span>
                    </div>
                  </TableCell>
                  <TableCell>{getStatusBadge(ticket.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>Ticket Actions</DropdownMenuLabel>
                        <DropdownMenuItem className="focus:bg-white/10 cursor-pointer"><Calendar className="w-4 h-4 mr-2"/> Schedule Visit</DropdownMenuItem>
                        <DropdownMenuItem className="focus:bg-white/10 cursor-pointer"><MessageSquare className="w-4 h-4 mr-2"/> Add Notes</DropdownMenuItem>
                        <DropdownMenuSeparator className="bg-white/10" />
                        <DropdownMenuItem className="focus:bg-white/10 cursor-pointer"><ImageIcon className="w-4 h-4 mr-2"/> Upload Photos</DropdownMenuItem>
                        <DropdownMenuItem className="focus:bg-white/10 cursor-pointer"><Paperclip className="w-4 h-4 mr-2"/> Attach Report</DropdownMenuItem>
                        <DropdownMenuSeparator className="bg-white/10" />
                        <DropdownMenuItem className="focus:bg-emerald-500/20 focus:text-emerald-400 cursor-pointer"><CheckCircle className="w-4 h-4 mr-2"/> Mark as Resolved</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </Card>
    </div>
  );
}