"use client";

import * as React from "react";
import { useSearchParams } from "next/navigation";
import {
  Activity, Clock, User, Filter, Search, Calendar,
  ArrowLeft, DollarSign, Briefcase, TrendingUp,
  Hash, AlertCircle, FileText, Loader2
} from "lucide-react";
import { useGetProfileQuery } from "@/api/rtk/auth-api";
import {
  useGetActivitiesQuery,
  useLazyGetExportActivitiesPdfQuery
} from "@/api/rtk/activities-api";
import { useGetDealsQuery } from "@/api/rtk/deals-api";
import { useAuthToken } from "@/hooks/use-auth-token"
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Separator } from "@/components/ui/separator";
import { toast } from "sonner";

const ACTION_COLORS: Record<string, string> = {
  Created: "bg-emerald-50 text-emerald-700 border-emerald-100",
  Updated: "bg-blue-50 text-blue-700 border-blue-100",
  Deleted: "bg-rose-50 text-rose-700 border-rose-100",
  Login: "bg-indigo-50 text-indigo-700 border-indigo-100",
  Logout: "bg-slate-50 text-slate-700 border-slate-100",
  Viewed: "bg-amber-50 text-amber-700 border-amber-100",
  Call: "bg-sky-50 text-sky-700 border-sky-100",
  Email: "bg-cyan-50 text-cyan-700 border-cyan-100",
  Meeting: "bg-violet-50 text-violet-700 border-violet-100",
  Win: "bg-emerald-100 text-emerald-800 border-emerald-200",
};

const TYPE_ICONS: Record<string, any> = {
  Call: <Hash className="mr-2 h-4 w-4" />,
  Email: <Calendar className="mr-2 h-4 w-4" />,
  Meeting: <User className="mr-2 h-4 w-4" />,
  Deal: <Briefcase className="mr-2 h-4 w-4" />,
  Note: <Activity className="mr-2 h-4 w-4" />,
};

const formatTimeAgo = (dateStr: string) => {
  const date = new Date(dateStr);
  const now = new Date();
  const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60));

  if (diffInMinutes < 1) return "Just now";
  if (diffInMinutes < 60) return `${diffInMinutes}m ago`;
  if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago`;
  return `${Math.floor(diffInMinutes / 1440)}d ago`;
};

const formatDate = (dateStr: string) => {
  return new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  }).format(new Date(dateStr));
};

const formatCurrency = (val: number) => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: 0
  }).format(val);
}

function cn(...classes: (string | boolean | undefined)[]) {
  return classes.filter(Boolean).join(" ");
}

export default function ActivityLogsPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const { token } = useAuthToken();
  const { data: profile } = useGetProfileQuery(undefined, { skip: !token });

  const userId = searchParams.get("userId");
  const userNameParam = searchParams.get("userName");
  const userName = userNameParam ? decodeURIComponent(userNameParam) : "User";

  const [search, setSearch] = React.useState("");
  const [dealsSearch, setDealsSearch] = React.useState("");

  const { data: activities = [], isLoading: logsLoading } = useGetActivitiesQuery(
    { repId: userId || undefined },
    { skip: !userId }
  );

  const { data: deals = [], isLoading: dealsLoading } = useGetDealsQuery(
    { userId: userId || undefined },
    { skip: !userId }
  );

  const [triggerPdfExport, { isFetching: isExporting }] = useLazyGetExportActivitiesPdfQuery();

  const stats = React.useMemo(() => {
    const totalDealsValue = deals.reduce((sum, d) => sum + (d.budget || 0), 0);
    const winRate = deals.length > 0 ? (deals.filter(d => d.stage === 'Closed Won').length / deals.length) * 100 : 0;

    return {
      totalDeals: deals.length,
      totalValue: totalDealsValue,
      activitiesCount: activities.length,
      winRate: winRate.toFixed(1) + "%"
    };
  }, [deals, activities]);

  const filteredLogs = React.useMemo(() => {
    return activities.filter(log => {
      const matchesSearch = search ?
        log.subject?.toLowerCase().includes(search.toLowerCase()) ||
        log.description?.toLowerCase().includes(search.toLowerCase())
        : true;
      return matchesSearch;
    });
  }, [activities, search]);

  const filteredDeals = React.useMemo(() => {
    return deals.filter(deal => {
      const matchesSearch = dealsSearch ?
        deal.customerName?.toLowerCase().includes(dealsSearch.toLowerCase()) ||
        deal.brand?.toLowerCase().includes(dealsSearch.toLowerCase())
        : true;
      return matchesSearch;
    });
  }, [deals, dealsSearch]);

  const handleExportPDF = async () => {
    if (!userId) return;
    try {
      const blob = await triggerPdfExport(userId).unwrap();
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `${userName.replace(/\s+/g, '_')}_Performance_Report.pdf`);
      document.body.appendChild(link);
      link.click();
      link.remove();
      toast.success("Report generated successfully");
    } catch (error) {
      console.error("PDF export failed:", error);
      toast.error("Failed to generate PDF report");
    }
  };

  if (logsLoading || dealsLoading) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen">
        <div className="h-10 w-10 border-4 border-slate-200 border-t-[#1d1d39] rounded-full animate-spin" />
        <h2 className="mt-4 text-[11px] font-semibold text-[#1d1d39] uppercase tracking-widest font-['Lexend']">
          Loading Data
        </h2>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full gap-6 p-8 font-['Lexend'] bg-slate-50/30">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="flex items-center gap-5">
          <Button
            variant="outlineBackPanel"
            onClick={() => router.back()}
          >
            <ArrowLeft size={18} />
          </Button>
          <div>
            <h1 className="text-[26px] font-semibold text-[#111827] tracking-tight">{userName}</h1>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="flex flex-col items-end mr-2">
            <span className="text-[10px] font-semibold text-slate-400 uppercase tracking-widest leading-none mb-1">Status</span>
            <Badge variant="secondary" className="bg-emerald-50 text-emerald-700 border-emerald-100 text-[11px] font-semibold">Active Performance</Badge>
          </div>
          <Separator orientation="vertical" className="h-8 hidden md:block" />
          <Button
            variant="activityLogPrimary"
            onClick={handleExportPDF}
            disabled={isExporting}
          >
            {isExporting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <FileText size={18} className="mr-2" />}
            {isExporting ? 'Generating...' : 'Generate Report'}
          </Button>
        </div>
      </div>

      {/* <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <KPICard title="Total Portfolio" value={stats.totalDeals} icon={<Briefcase className="text-blue-600" size={20} />} trend="+4%" color="bg-blue-50" />
        <KPICard title="Portfolio Value" value={formatCurrency(stats.totalValue)} icon={<DollarSign className="text-emerald-600" size={20} />} trend="+12%" color="bg-emerald-50" />
        <KPICard title="Win Probability" value={stats.winRate} icon={<TrendingUp className="text-violet-600" size={20} />} trend="Stable" color="bg-violet-50" />
        <KPICard title="Total Activities" value={stats.activitiesCount} icon={<Activity className="text-amber-600" size={20} />} trend="+18" color="bg-amber-50" />
      </div> */}

      <div className="flex-1 min-h-0 mt-2">
        <Tabs defaultValue="activities" className="h-full flex flex-col">
          <TabsList className="bg-white border border-slate-200 p-1 rounded-2xl w-fit mb-6">
            <TabsTrigger value="activities" className="rounded-xl px-8 font-semibold data-[state=active]:bg-[#1d1d39] data-[state=active]:text-white">Activities</TabsTrigger>
            <TabsTrigger value="deals" className="rounded-xl px-8 font-semibold data-[state=active]:bg-[#1d1d39] data-[state=active]:text-white">Active Leads</TabsTrigger>
          </TabsList>

          <TabsContent value="activities" className="flex-1 min-h-0 m-0 outline-none">
            <div className="flex gap-6 h-full">
              <div className="flex-1 space-y-4 h-full">
                <Card className="border-slate-200 shadow-sm rounded-2xl h-full flex flex-col overflow-hidden">
                  <CardHeader className="pb-4 shrink-0">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-[14px] font-semibold text-slate-800 uppercase tracking-widest">Interaction Logs</CardTitle>
                      <div className="flex items-center gap-2">
                        <div className="relative">
                          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                          <Input
                            type="search"
                            placeholder="Search logs..."
                            className="h-9 w-64 pl-9 rounded-xl border-slate-200 bg-slate-50 focus:bg-white text-[13px]"
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                          />
                        </div>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-3 flex-1 overflow-y-auto p-6 pt-0">
                    {filteredLogs.length === 0 ? (
                      <div className="py-20 text-center">
                        <AlertCircle className="mx-auto h-10 w-10 text-slate-200 mb-4" />
                        <h3 className="font-semibold text-slate-800">No matching activities</h3>
                        <p className="text-slate-500 text-sm">Adjustment of filters might help.</p>
                      </div>
                    ) : (
                      filteredLogs.map((log) => (
                        <div key={log.id} className="flex items-center p-4 rounded-2xl hover:bg-slate-50 border border-transparent hover:border-slate-100 transition-all group">
                          <div className={cn(
                            "h-11 w-11 rounded-xl flex items-center justify-center shrink-0 border",
                            ACTION_COLORS[log.type] || "bg-slate-100 text-slate-600 border-slate-200"
                          )}>
                            {TYPE_ICONS[log.type] || <Activity size={20} />}
                          </div>
                          <div className="ml-4 flex-1 min-w-0">
                            <div className="flex items-center gap-2">
                              <h4 className="text-[14px] font-semibold text-slate-800 truncate">{log.subject}</h4>
                              <Badge className={cn("text-[8px] font-bold uppercase tracking-widest border px-1.5 h-4.5 rounded-md", ACTION_COLORS[log.type])}>{log.type}</Badge>
                            </div>
                            <p className="text-[13px] text-slate-500 truncate mt-0.5">
                              {(log.description || '').replace(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/gi, '[REF]')}
                            </p>
                          </div>
                          <div className="ml-6 flex flex-col items-end shrink-0">
                            <span className="text-[13px] font-semibold text-slate-800">{formatTimeAgo(log.createdAt)}</span>
                            <span className="text-[10px] font-semibold text-slate-400 uppercase tracking-tighter">{formatDate(log.createdAt).split('at')[0]}</span>
                          </div>
                        </div>
                      ))
                    )}
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="deals" className="flex-1 min-h-0 m-0 outline-none">
            <Card className="border-slate-200 shadow-sm rounded-2xl h-full flex flex-col overflow-hidden">
              <CardHeader className="pb-4 shrink-0">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-[14px] font-semibold text-slate-800 uppercase tracking-widest">Assigned Leads</CardTitle>
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                    <Input
                      type="search"
                      placeholder="Search deals..."
                      className="h-9 w-64 pl-9 rounded-xl border-slate-200 bg-slate-50 focus:bg-white text-[13px]"
                      value={dealsSearch}
                      onChange={(e) => setDealsSearch(e.target.value)}
                    />
                  </div>
                </div>
              </CardHeader>
              <CardContent className="flex-1 overflow-y-auto p-6 pt-0">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {filteredDeals.length === 0 ? (
                    <div className="col-span-full py-20 text-center">
                      <AlertCircle className="mx-auto h-10 w-10 text-slate-200 mb-4" />
                      <h3 className="font-semibold text-slate-800">No deals found</h3>
                      <p className="text-slate-500 text-sm">Adjustment of filters might help.</p>
                    </div>
                  ) : (
                    filteredDeals.map((deal) => {
                      const stageName = deal.stageDetail?.stageName?.name || (deal.stage?.includes("-") ? null : deal.stage);
                      return (
                        <Card key={deal.id} className="border-slate-200 rounded-2xl hover:border-slate-300 transition-all shadow-none">
                          <CardContent className="p-5">
                            <div className="flex items-start justify-between mb-4">
                              <div>
                                <h4 className="text-[16px] font-bold text-slate-800 leading-tight mb-1">{deal.customerName}</h4>
                                <p className="text-[12px] text-slate-500 font-medium">{deal.brand || 'No Brand'}</p>
                              </div>
                              {stageName && (
                                <Badge className="bg-[#1d1d39]/10 text-[#1d1d39] border-0 text-[10px] font-semibold rounded-lg px-2 py-1">{stageName}</Badge>
                              )}
                            </div>

                            <div className="flex items-center gap-6 mb-4">
                              <div>
                                <p className="text-[10px] font-semibold text-slate-400 uppercase tracking-widest mb-1">Budget</p>
                                <p className="text-[14px] font-bold text-slate-800">{formatCurrency(deal.budget || 0)}</p>
                              </div>
                              <Separator orientation="vertical" className="h-8" />
                              <div>
                                <p className="text-[10px] font-semibold text-slate-400 uppercase tracking-widest mb-1">Created</p>
                                <p className="text-[14px] font-bold text-slate-800">{new Date(deal.createdAt).toLocaleDateString()}</p>
                              </div>
                            </div>

                            <Button
                              variant="outlineViewDealCard"
                              onClick={() => router.push(`/leads/${deal.id}`)}
                            >
                              View Lead Details
                            </Button>
                          </CardContent>
                        </Card>
                      );
                    })
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}

function KPICard({ title, value, icon, trend, color }: { title: string, value: any, icon: any, trend: string, color: string }) {
  return (
    <Card className="border-slate-200 shadow-sm rounded-2xl overflow-hidden group">
      <CardContent className="p-6">
        <div className="flex items-center justify-between mb-4">
          <div className={cn("h-10 w-10 rounded-xl flex items-center justify-center", color)}>
            {icon}
          </div>
          <Badge variant="ghost" className="bg-white border border-slate-100 text-[10px] font-semibold rounded-lg group-hover:border-slate-200 transition-all">{trend}</Badge>
        </div>
        <div>
          <p className="text-[11px] font-semibold text-slate-400 uppercase tracking-widest mb-1">{title}</p>
          <h3 className="text-[24px] font-semibold text-slate-900 tracking-tight">{value}</h3>
        </div>
      </CardContent>
    </Card>
  );
}