"use client";

import { useState } from "react";
import { 
  Megaphone, Target, Mail, MessageSquare, 
  Search, MoreHorizontal, Plus, Share2, MessageCircle,
  Globe, UserPlus, Phone
} 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Table, TableBody, TableCell, TableHead, 
  TableHeader, TableRow 
} from "@/components/ui/table";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuSeparator, DropdownMenuTrigger 
} from "@/components/ui/dropdown-menu";

const kpiData = [
  { title: "Total Leads", value: "842", icon: UserPlus, color: "text-blue-500" },
  { title: "Active Campaigns", value: "4", icon: Megaphone, color: "text-emerald-500" },
  { title: "Email Open Rate", value: "24.5%", icon: Mail, color: "text-amber-500" },
  { title: "WhatsApp Replies", value: "18.2%", icon: MessageSquare, color: "text-brand-red" },
];

const mockLeads = [
  { id: "LD-001", name: "Omar Yelles", company: "Industrial Solutions Dz", phone: "0550 12 34 56", email: "omar@is-dz.com", source: "Facebook", date: "2024-03-24", status: "New" },
  { id: "LD-002", name: "Fatiha B.", company: "Eco Recycle", phone: "0770 98 76 54", email: "f.b@ecorecycle.dz", source: "Website", date: "2024-03-23", status: "Contacted" },
  { id: "LD-003", name: "Samir K.", company: "Metal Scrap Traders", phone: "0661 22 33 44", email: "samir.k@gmail.com", source: "Google Ads", date: "2024-03-20", status: "Qualified" },
  { id: "LD-004", name: "Lyes M.", company: "Paper Mill West", phone: "0555 99 88 77", email: "lyes@pmw.dz", source: "LinkedIn", date: "2024-03-18", status: "Converted" },
];

const getSourceIcon = (source: string) => {
  switch (source) {
    case "Facebook": return <Share2 className="w-4 h-4 text-blue-500" />;
    case "Instagram": return <MessageCircle className="w-4 h-4 text-pink-500" />;
    case "LinkedIn": return <UserPlus className="w-4 h-4 text-blue-700" />;
    case "Website": return <Globe className="w-4 h-4 text-emerald-500" />;
    case "Google Ads": return <Target className="w-4 h-4 text-amber-500" />;
    default: return <UserPlus className="w-4 h-4 text-gray-500" />;
  }
};

const getStatusBadge = (status: string) => {
  switch (status) {
    case "New": return <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30">New</Badge>;
    case "Contacted": return <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30">Contacted</Badge>;
    case "Qualified": return <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/30">Qualified</Badge>;
    case "Converted": return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">Converted</Badge>;
    case "Lost": return <Badge className="bg-brand-red/20 text-brand-red border-brand-red/30">Lost</Badge>;
    default: return <Badge>{status}</Badge>;
  }
};

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

  const filteredLeads = mockLeads.filter(l => 
    l.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    l.company.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">Marketing & Leads</h2>
          <p className="text-gray-400 mt-1">Track incoming prospects and marketing campaign performance.</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="border-white/10 bg-transparent text-white hover:bg-white/5">
            <Mail className="w-4 h-4 mr-2" /> New Campaign
          </Button>
          <Button className="bg-brand-red hover:bg-brand-red/90 text-white font-semibold">
            <Plus className="w-4 h-4 mr-2" /> Add Lead
          </Button>
        </div>
      </div>

      <Tabs defaultValue="leads" className="w-full">
        <TabsList className="bg-brand-charcoal border border-white/10 p-1">
          <TabsTrigger value="leads" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Lead Management</TabsTrigger>
          <TabsTrigger value="campaigns" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Campaigns</TabsTrigger>
        </TabsList>

        <TabsContent value="leads" 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 leads by name or company..." 
                  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">Lead Details</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Contact Info</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Acquisition Source</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Date</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Status</TableHead>
                    <TableHead className="text-right text-gray-400 font-semibold">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredLeads.map((lead) => (
                    <TableRow key={lead.id} className="border-white/5 hover:bg-white/5 transition-colors">
                      <TableCell>
                        <div className="font-bold text-white">{lead.name}</div>
                        <div className="text-xs text-brand-red font-medium mt-1">{lead.company}</div>
                      </TableCell>
                      <TableCell>
                        <div className="text-sm text-gray-300 flex items-center gap-1">
                          <Phone className="w-3 h-3 text-gray-500" /> {lead.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" /> {lead.email}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          {getSourceIcon(lead.source)}
                          <span className="text-sm text-gray-300">{lead.source}</span>
                        </div>
                      </TableCell>
                      <TableCell className="text-gray-400 text-sm">{lead.date}</TableCell>
                      <TableCell>{getStatusBadge(lead.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">
                            <DropdownMenuItem className="focus:bg-white/10 cursor-pointer"><Phone className="w-4 h-4 mr-2"/> Log Call</DropdownMenuItem>
                            <DropdownMenuItem className="focus:bg-white/10 cursor-pointer"><Mail className="w-4 h-4 mr-2"/> Send Email</DropdownMenuItem>
                            <DropdownMenuItem className="focus:bg-white/10 cursor-pointer text-[#25D366]"><MessageSquare className="w-4 h-4 mr-2"/> WhatsApp Message</DropdownMenuItem>
                            <DropdownMenuSeparator className="bg-white/10" />
                            <DropdownMenuItem className="focus:bg-emerald-500/20 focus:text-emerald-400 cursor-pointer">Convert to Client</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </Card>
        </TabsContent>

        <TabsContent value="campaigns" className="mt-6">
          <Card className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm p-8 text-center">
            <Megaphone className="w-16 h-16 text-brand-red mx-auto mb-4 opacity-50" />
            <CardTitle className="text-white mb-2">Campaign Manager</CardTitle>
            <p className="text-gray-400 mb-6 max-w-md mx-auto">Create and track SMS, WhatsApp, and Email marketing campaigns connected directly to your lead database.</p>
            <Button className="bg-brand-red hover:bg-brand-red/90 text-white font-semibold">
              <Plus className="w-4 h-4 mr-2" /> Create First Campaign
            </Button>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}