import { useState, useEffect, useCallback } from 'react'
import type { DashboardData } from './types';
import {
  Search, CheckCircle, XCircle, AlertCircle,
  RefreshCcw, ArrowRight, Clock, ShieldCheck,
  Activity, List, Users, Zap,
  Eye, ChevronLeft, ChevronRight, Trash2
} from 'lucide-react';
import { Input } from "./components/ui/input"
import { Badge } from "./components/ui/badge"
import { 
  SettingsLayout, 
  SettingsHeader,
  PrimaryButton,
  OutlineButton,
  SettingCard,
  ModernCardHeader,
  SnapshotStat,
  FeatSection
} from './components/ui/settings-ui';
import { Sheet, SheetContent, SheetTitle, SheetDescription } from "./components/ui/sheet"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "./components/ui/dialog"
import { toast } from "sonner"

// Custom WAWP Sidebar Logo Component
const WAWPLogo = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 36 36" fill="none" className={className}>
      <rect width="36" height="36" rx="12" fill="#44FF87"/>
      <path d="M26 7.5C26 6.94772 25.5523 6.5 25 6.5H23C22.4477 6.5 22 6.94772 22 7.5V9.5C22 10.0523 22.4477 10.5 23 10.5H25C25.5523 10.5 26 10.0523 26 9.5V7.5Z" fill="#004349"/>
      <path d="M10 7.5C10 6.94772 10.4477 6.5 11 6.5H13C13.5523 6.5 14 6.94772 14 7.5V9.5C14 10.0523 13.5523 10.5 13 10.5H11C10.4477 10.5 10 10.0523 10 9.5V7.5Z" fill="#004349"/>
      <path d="M6 13.5C6 11.2909 7.79086 9.5 10 9.5H26C28.2091 9.5 30 11.2909 30 13.5V23.5C30 25.7091 28.2091 27.5 26 27.5H10C7.79086 27.5 6 25.7091 6 23.5V13.5Z" fill="#004349"/>
      <rect x="8" y="11.5" width="20" height="14" rx="2" fill="white"/>
      <rect x="20" y="15.5" width="4" height="6" rx="1" fill="#004349"/>
      <path d="M18 30.5C20 30.5 23 27.5 23 27.5H13C13 27.5 16 30.5 18 30.5Z" fill="#004349"/>
      <rect x="12" y="15.5" width="4" height="6" rx="1" fill="#004349"/>
  </svg>
);

interface UserLogSummary {
  id: number | string;
  name: string;
  email: string;
  phone: string;
  last_activity: string;
  success_count: number;
  failed_count: number;
  total_actions: number;
}

interface TimelineEvent {
  id: number;
  event_type: string;
  gateway: string;
  status: string;
  message: string;
  created_at: string;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  details: Record<string, any>;
}

export default function ActivityLogs({ data: rootData }: { data: DashboardData }) {
  const [users, setUsers] = useState<UserLogSummary[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [page, setPage] = useState(1);
  const [perPage] = useState(20);
  const [totalRecords, setTotalRecords] = useState(0);

  // Timeline States
  const [selectedUser, setSelectedUser] = useState<UserLogSummary | null>(null);
  const [timeline, setTimeline] = useState<TimelineEvent[]>([]);
  const [timelineLoading, setTimelineLoading] = useState(false);

  // Detail Modal State
  const [activeDetail, setActiveDetail] = useState<TimelineEvent | null>(null);
  const [isDeletingUser, setIsDeletingUser] = useState(false);
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [isClearingAll, setIsClearingAll] = useState(false);
  const [clearAllConfirmOpen, setClearAllConfirmOpen] = useState(false);


  const fetchUsers = useCallback(async () => {
    setLoading(true);
    try {
      const r = await fetch(`${rootData?.global?.apiRestUrl}/logs/list`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': rootData?.global?.wpRestNonce
        },
        body: JSON.stringify({
          start: (page - 1) * perPage,
          length: perPage,
          search: { value: search },
          gateway: rootData.currentSection === 'activity_hub' ? '' : (rootData.currentSection || '')
        })
      });
      const result = await r.json();

      if (result.data && Array.isArray(result.data)) {
        setUsers(result.data);
        setTotalRecords(result.recordsTotal || 0);
      } else if (result.success && result.data?.data) {
        setUsers(result.data.data);
        setTotalRecords(result.data.recordsTotal || 0);
      }
    } catch (err) {
      console.error('Failed to fetch users:', err);
    }
    setLoading(false);
  }, [page, perPage, search, rootData.currentSection, rootData?.global?.apiRestUrl, rootData?.global?.wpRestNonce]);

  const fetchTimeline = async (userId: number | string) => {
    setTimelineLoading(true);
    try {
      const r = await fetch(`${rootData?.global?.apiRestUrl}/logs/timeline`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': rootData?.global?.wpRestNonce
        },
        body: JSON.stringify({
          user_id: userId
        })
      });
      const result = await r.json();

      if (result.success) {
        setTimeline(result.data);
      }
    } catch (err) {
      console.error('Failed to fetch timeline:', err);
    }
    setTimelineLoading(false);
  };



  const deleteEvent = async (eventId: number) => {
    if (!confirm((rootData.i18n?.confirmDelete as string) || 'Are you sure you want to delete this log entry?')) return;

    try {
      const r = await fetch(`${rootData?.global?.apiRestUrl}/logs/delete`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': rootData?.global?.wpRestNonce
        },
        body: JSON.stringify({
          log_id: eventId
        })
      });
      const result = await r.json();

      if (result.success) {
        setTimeline(prev => prev.filter(e => e.id !== eventId));
        toast.success(result.message || result.data || 'Log deleted');
        fetchUsers(); // Refresh counts in main table
      } else {
        toast.error(result.message || result.data || 'Failed to delete');
      }
    } catch {
      toast.error('Network error');
    }
  };

  const deleteUserHistory = async () => {
    if (!selectedUser) return;
    setIsDeletingUser(true);

    try {
      const r = await fetch(`${rootData?.global?.apiRestUrl}/logs/delete`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': rootData?.global?.wpRestNonce
        },
        body: JSON.stringify({
          user_id: typeof selectedUser.id === 'number' ? selectedUser.id : 0,
          phone: typeof selectedUser.id === 'string' ? selectedUser.id.replace('guest:', '') : selectedUser.phone
        })
      });
      const result = await r.json();

      if (result.success) {
        toast.success(result.message || result.data || 'History cleared');
        setSelectedUser(null);
        setDeleteConfirmOpen(false);
        fetchUsers();
      } else {
        toast.error(result.message || result.data || 'Failed to clear history');
      }
    } catch {
      toast.error('Network error');
    } finally {
      setIsDeletingUser(false);
    }
  };

  const clearAllLogs = async () => {
    setIsClearingAll(true);
    try {
      const r = await fetch(`${rootData?.global?.apiRestUrl}/activity-hub/clear-all`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': rootData?.global?.wpRestNonce
        }
      });
      const result = await r.json();

      if (result.success) {
        toast.success(result.message || 'All logs cleared');
        setClearAllConfirmOpen(false);
        fetchUsers();
      } else {
        toast.error(result.message || 'Failed to clear logs');
      }
    } catch {
      toast.error('Network error');
    } finally {
      setIsClearingAll(false);
    }
  };

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  const handleUserClick = (user: UserLogSummary) => {
    setSelectedUser(user);
    fetchTimeline(user.id);
  };

  const getGatewayIcon = (gateway: string, type: string) => {
    const baseUrl = rootData.global?.pluginUrl + 'assets/img/senders/';
    if (gateway === 'system' || type === 'auth' || type === 'login' || type === 'signup' || type === 'otp_verified') {
      return <WAWPLogo className="w-5 h-5" />;
    }
    if (gateway === 'email') return <img src={baseUrl + "gmail.svg"} className="w-6 h-6 object-contain" />;
    if (gateway === 'meta') return <img src={baseUrl + "meta.svg"} className="w-6 h-6 object-contain" />;
    if (gateway === 'firebase') return <img src={baseUrl + "firebase.svg"} className="w-6 h-6 object-contain" />;
    return <img src={baseUrl + "whatsapp.svg"} className="w-6 h-6 object-contain" />;
  };

  const getEventLabel = (event: TimelineEvent) => {
    const type = event.event_type;
    const details = event.details || {};
    
    // Prioritize Template Names if available
    if (details.meta_template_name) return `Meta: ${details.meta_template_name}`;
    if (details.template_name) return `Template: ${details.template_name}`;
    if (details.context && details.context !== 'General') return details.context;

    switch (type) {
      case 'login':
      case 'Login': return 'Customer Logged In';
      case 'signup':
      case 'Signup': return 'New Customer Registered';
      case 'otp_verified': return 'Phone Number Verified';
      case 'message': return details.message_type || (event.gateway === 'meta' ? 'Meta WhatsApp Message' : 'WhatsApp Message');
      case 'Email': return 'Sent Email';
      case 'abandoned_cart': return 'Added Items to Cart';
      case 'order': return 'Placed an Order';
      case 'General': 
      case 'general':
        if (event.gateway === 'whatsapp') return 'WhatsApp Activity';
        if (event.gateway === 'email') return 'Email Activity';
        if (event.gateway === 'firebase') return 'Firebase SMS Activity';
        return 'System Activity';
      default: 
        if (event.gateway === 'email') return 'Email Message';
        return type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
    }
  };

  const totalPages = Math.ceil(totalRecords / perPage);

  return (
    <SettingsLayout>
      <SettingsHeader 
        title="Activity Hub" 
        description="Monitor user-centric actions and communication history in real-time."
      >
        <div className="flex items-center gap-3">
          <OutlineButton onClick={() => setClearAllConfirmOpen(true)} className="h-9 gap-2 text-rose-500 hover:bg-rose-50 border-rose-100">
            <Trash2 className="w-3.5 h-3.5" /> Clear All Logs
          </OutlineButton>
          <OutlineButton onClick={() => fetchUsers()} className="h-9 gap-2">
            <RefreshCcw className="w-3.5 h-3.5" /> Refresh
          </OutlineButton>
        </div>
      </SettingsHeader>

      {/* Statistics Snapshot */}
      <FeatSection 
        title="Activity Overview"
        description="High-level metrics of your unified interaction engine."
        icon={Activity}
        gridCols="sm:grid-cols-4"
      >
        <SnapshotStat
          value={(rootData.logsData?.logStats?.unique || totalRecords).toLocaleString()}
          label="Tracked Users"
          sub="Total unique users logged"
          icon={Users}
          badge="Network"
          percent={100}
          barColor="bg-slate-500"
        />
        <SnapshotStat
          value={(rootData.logsData?.logStats?.sent || 0).toLocaleString()}
          label="Successful Hub"
          sub="Delivered communications"
          icon={CheckCircle}
          badge="Success"
          badgeVariant="success"
          barColor="bg-emerald-500"
          percent={100}
        />
        <SnapshotStat
          value={(rootData.logsData?.logStats?.error || 0).toLocaleString()}
          label="Failed Events"
          sub="Communications with errors"
          icon={AlertCircle}
          badge="Failed"
          badgeVariant="warning"
          barColor="bg-rose-500"
          percent={100}
        />
        <SnapshotStat
          value={(rootData.logsData?.logStats?.total || 0).toLocaleString()}
          label="Global Actions"
          sub="Total actions & events"
          icon={Zap}
          badge="Live"
          barColor="bg-blue-500"
          percent={100}
        />
      </FeatSection>

      <div className="mb-8" />

      {/* Users List Table */}
      <SettingCard className="p-0 overflow-hidden border-none shadow-xl ring-1 ring-black/5 bg-white/80 backdrop-blur-md">
        <ModernCardHeader 
          title="Engagement Directory"
          description="Click on any user to view their complete interaction timeline."
          icon={List}
        />

        <div className="p-4 border-b border-slate-100 flex items-center justify-between gap-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
            <Input
              placeholder="Search by name, email or ID..."
              className="pl-9 bg-slate-50/50 border-slate-200 focus:bg-white transition-all rounded-lg"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-slate-50/50 border-b border-slate-100">
                <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-slate-400">User Identity</th>
                <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-slate-400">Communication Stats</th>
                <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-slate-400">Total Activity</th>
                <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-slate-400">Last Pulse</th>
                <th className="px-6 py-4 text-right text-[10px] font-black uppercase tracking-widest text-slate-400">Action</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              {loading ? (
                Array(5).fill(0).map((_, i) => (
                  <tr key={i} className="animate-pulse">
                    <td colSpan={5} className="px-6 py-8"><div className="h-4 bg-slate-100 rounded w-1/3" /></td>
                  </tr>
                ))
              ) : users.length === 0 ? (
                <tr><td colSpan={5} className="px-6 py-12 text-center text-slate-400 italic">No activity records found.</td></tr>
              ) : users.map((u) => (
                <tr 
                  key={u.id} 
                  className="hover:bg-slate-50/50 transition-all cursor-pointer group"
                  onClick={() => handleUserClick(u)}
                >
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-4">
                      <div className="w-10 h-10 rounded-xl bg-[#004349] flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-teal-900/10">
                        {u.name.charAt(0).toUpperCase()}
                      </div>
                      <div>
                        <div className="text-sm font-bold text-slate-800">{u.name}</div>
                        <div className="text-[11px] font-medium text-slate-400">{u.email}</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-3">
                      <div className="flex flex-col">
                        <span className="text-xs font-bold text-emerald-600 flex items-center gap-1">
                          <CheckCircle className="w-3 h-3" /> {u.success_count}
                        </span>
                        <span className="text-[10px] text-slate-400 uppercase font-bold tracking-tighter">Delivered</span>
                      </div>
                      <div className="w-px h-6 bg-slate-100" />
                      <div className="flex flex-col">
                        <span className="text-xs font-bold text-rose-500 flex items-center gap-1">
                          <XCircle className="w-3 h-3" /> {u.failed_count}
                        </span>
                        <span className="text-[10px] text-slate-400 uppercase font-bold tracking-tighter">Failed</span>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <Badge variant="secondary" className="bg-slate-100 text-slate-600 border-none font-bold text-[10px]">
                      {u.total_actions} EVENTS
                    </Badge>
                  </td>
                  <td className="px-6 py-4 text-[11px] font-medium text-slate-500">
                    <div className="flex items-center gap-1.5">
                      <Clock className="w-3 h-3 opacity-50" />
                      {u.last_activity ? new Date(u.last_activity).toLocaleString() : 'Never'}
                    </div>
                  </td>
                  <td className="px-6 py-4 text-right">
                    <OutlineButton size="sm" className="opacity-0 group-hover:opacity-100 transition-opacity bg-white hover:bg-[#004349] hover:text-white border-slate-200">
                      View Timeline <ArrowRight className="w-3.5 h-3.5 ml-2" />
                    </OutlineButton>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="p-4 border-t border-slate-100 flex items-center justify-between bg-slate-50/30">
            <div className="text-xs font-bold text-slate-400 uppercase tracking-widest">
              Page {page} of {totalPages}
            </div>
            <div className="flex items-center gap-2">
              <OutlineButton 
                size="sm" 
                disabled={page === 1} 
                onClick={(e) => { e?.stopPropagation(); setPage(p => Math.max(1, p - 1)); }}
                className="bg-white"
              >
                <ChevronLeft className="w-4 h-4 mr-1" /> Previous
              </OutlineButton>
              <OutlineButton 
                size="sm" 
                disabled={page === totalPages} 
                onClick={(e) => { e?.stopPropagation(); setPage(p => Math.min(totalPages, p + 1)); }}
                className="bg-white"
              >
                Next <ChevronRight className="w-4 h-4 ml-1" />
              </OutlineButton>
            </div>
          </div>
        )}
      </SettingCard>

      {/* Activity Timeline Sidebar */}
      <Sheet open={!!selectedUser} onOpenChange={() => setSelectedUser(null)}>
        <SheetContent side="right" className="fixed inset-y-0 right-0 z-[100001] bg-white shadow-2xl flex flex-col !w-full sm:!max-w-none lg:!max-w-[calc(100%-280px)] xl:!max-w-[1200px] border-l transition-all duration-500 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full gap-0 p-0 overflow-y-auto">
          <SheetTitle className="sr-only">Interaction Timeline</SheetTitle>
          <SheetDescription className="sr-only">User interaction timeline details</SheetDescription>
          {selectedUser && (
            <div className="h-full flex flex-col">
              <ModernCardHeader 
                title={selectedUser.name}
                description="Complete history of events and communication lifecycle for this customer."
                icon={Activity}
                className="!bg-white"
                rightAction={
                  <OutlineButton 
                    size="sm" 
                    onClick={() => setDeleteConfirmOpen(true)}
                    className="text-rose-500 hover:text-white hover:bg-rose-500 border-rose-200"
                  >
                    <Trash2 className="w-4 h-4 mr-2" /> Clear History
                  </OutlineButton>
                }
              />

                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 rounded-xl bg-slate-50 border border-slate-100">
                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Email Address</div>
                    <div className="text-sm font-bold text-slate-700 truncate">{selectedUser.email}</div>
                  </div>
                  <div className="p-4 rounded-xl bg-slate-50 border border-slate-100">
                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Phone Number</div>
                    <div className="text-sm font-bold text-slate-700">{selectedUser.phone}</div>
                  </div>
                </div>

              <div className="flex-1 overflow-y-auto p-8">
                {timelineLoading ? null : (
                  <div className="relative">
                    {/* Vertical Line */}
                    <div className="absolute left-6 top-0 bottom-0 w-px bg-slate-200" />

                    <div className="space-y-8">
                      {timeline.map((event, idx) => (
                        <div key={event.id} className="relative pl-14 animate-in slide-in-from-bottom-4 fade-in duration-500" style={{ animationDelay: `${idx * 50}ms` }}>
                          {/* Event Icon Bubble */}
                          <div className={`absolute left-0 top-0 w-12 h-12 rounded-2xl border-4 border-slate-50 flex items-center justify-center z-10 ${
                            event.status === 'success' ? 'bg-white' : 'bg-rose-50 border-rose-100'
                          }`}>
                            {getGatewayIcon(event.gateway, event.event_type)}
                          </div>

                          {/* Event Content */}
                          <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow group/card">
                            <div className="flex items-center justify-between mb-4">
                              <div className="flex items-center gap-3">
                                <span className={`text-[10px] font-black uppercase tracking-[0.2em] px-2.5 py-1 rounded-lg ${
                                  event.status === 'success' ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-rose-50 text-rose-600 border border-rose-100'
                                }`}>
                                  {event.status}
                                </span>
                                <div className="h-1 w-1 rounded-full bg-slate-200" />
                                <span className="text-[10px] font-bold text-slate-400 flex items-center gap-1.5 uppercase tracking-wider">
                                  <Clock className="w-3.5 h-3.5" />
                                  {new Date(event.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                </span>
                              </div>
                              <div className="flex items-center gap-2 opacity-0 group-hover/card:opacity-100 transition-opacity">
                                <button 
                                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); setActiveDetail(event); }}
                                  className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-50 hover:bg-[#004349] text-slate-400 hover:text-white transition-all border border-slate-100 shadow-sm"
                                  title="View Detailed Payload"
                                >
                                  <Eye className="w-4 h-4" />
                                </button>
                                <button 
                                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); deleteEvent(event.id); }}
                                  className="w-9 h-9 flex items-center justify-center rounded-xl bg-rose-50 hover:bg-rose-500 text-rose-400 hover:text-white transition-all border border-rose-100 shadow-sm"
                                  title="Delete Event Log"
                                >
                                  <Trash2 className="w-4 h-4" />
                                </button>
                              </div>
                            </div>

                            <h4 className="text-base font-black text-slate-800 mb-3 tracking-tight">{getEventLabel(event)}</h4>
                            
                            {event.message && (
                              <div className="p-4 bg-slate-50/80 rounded-xl text-[13px] text-slate-600 leading-relaxed font-medium italic border border-slate-100 relative overflow-hidden group/msg">
                                <div className="absolute left-0 top-0 bottom-0 w-1 bg-[#004349] opacity-20 group-hover/msg:opacity-100 transition-opacity" />
                                "{event.message}"
                              </div>
                            )}

                            {(event.event_type === 'login' || event.event_type === 'signup') && (
                              <div className="flex items-center gap-3 mt-4 pt-4 border-t border-slate-50 text-[11px] font-bold text-slate-400">
                                <div className="flex items-center gap-1.5 bg-slate-50 px-2 py-1 rounded-md">
                                  <ShieldCheck className="w-3.5 h-3.5 opacity-60" />
                                  IP: <span className="text-slate-600">{event.details?.ip || 'Unknown'}</span>
                                </div>
                                <div className="flex items-center gap-1.5 bg-slate-50 px-2 py-1 rounded-md">
                                  <Zap className="w-3.5 h-3.5 opacity-60 text-amber-500" />
                                  Method: <span className="text-slate-600">{event.details?.method || 'OTP'}</span>
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              <div className="p-6 bg-white border-t border-slate-100 mt-auto">
                <PrimaryButton className="w-full h-11 bg-slate-900 hover:bg-black rounded-xl font-bold uppercase tracking-widest text-xs" onClick={() => setSelectedUser(null)}>
                  Close Audit Trail
                </PrimaryButton>
              </div>
            </div>
          )}
        </SheetContent>
      </Sheet>

      {/* JSON Response Dialog - Moved closer to usage and increased z-index */}
      <Dialog open={!!activeDetail} onOpenChange={() => setActiveDetail(null)}>
        <DialogContent className="max-w-3xl bg-white rounded-3xl shadow-2xl overflow-hidden border-none p-0 z-[100005]">
          <ModernCardHeader 
            title="Detailed Event Trace"
            description="In-depth technical breakdown and payload analysis of this specific event."
            icon={Activity}
            className="!rounded-none !border-none"
          />
          <div className="p-6">
            <div className="bg-slate-900 rounded-xl p-6 overflow-auto max-h-[400px]">
              <pre className="text-emerald-400 font-mono text-xs leading-relaxed">
                {activeDetail?.details && JSON.stringify(activeDetail.details, null, 2)}
              </pre>
            </div>
            
            <div className="mt-6 grid grid-cols-2 gap-4">
              <div className="p-4 rounded-xl bg-slate-50 border border-slate-100">
                <div className="text-[10px] font-black text-slate-400 uppercase mb-1">Gateway Signal</div>
                <div className="text-sm font-bold text-slate-700 capitalize">{activeDetail?.gateway}</div>
              </div>
              <div className="p-4 rounded-xl bg-slate-50 border border-slate-100">
                <div className="text-[10px] font-black text-slate-400 uppercase mb-1">Success Status</div>
                <Badge variant={activeDetail?.status === 'success' ? 'green' : 'yellow'} className="mt-1 font-black">
                  {activeDetail?.status.toUpperCase()}
                </Badge>
              </div>
            </div>
          </div>
          <DialogFooter className="p-6 bg-slate-50 border-t border-slate-100">
            <PrimaryButton className="w-full bg-[#004349] hover:bg-[#003035] rounded-xl font-bold" onClick={() => setActiveDetail(null)}>
              Dismiss Details
            </PrimaryButton>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete User History Confirmation */}
      <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
        <DialogContent className="max-w-md z-[200000]">
          <DialogHeader>
            <DialogTitle className="text-xl font-black text-slate-800">Clear Customer History?</DialogTitle>
            <DialogDescription className="py-4">
              This will permanently delete all activity logs for <span className="font-bold text-slate-900">{selectedUser?.name}</span>. This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="gap-2">
            <OutlineButton onClick={() => setDeleteConfirmOpen(false)} disabled={isDeletingUser}>
              Cancel
            </OutlineButton>
            <PrimaryButton 
              onClick={deleteUserHistory} 
              disabled={isDeletingUser}
              className="bg-rose-500 hover:bg-rose-600 text-white"
            >
              {isDeletingUser ? 'Deleting...' : 'Yes, Clear All'}
            </PrimaryButton>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Global Clear All Logs Confirmation */}
      <Dialog open={clearAllConfirmOpen} onOpenChange={setClearAllConfirmOpen}>
        <DialogContent className="max-w-md z-[200000]">
          <DialogHeader>
            <DialogTitle className="text-xl font-black text-slate-800">Wipe Entire Activity Hub?</DialogTitle>
            <DialogDescription className="py-4">
              You are about to <span className="font-bold text-rose-600">permanently delete ALL activity logs</span> from the entire system. This action is irreversible.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="gap-2">
            <OutlineButton onClick={() => setClearAllConfirmOpen(false)} disabled={isClearingAll}>
              Cancel
            </OutlineButton>
            <PrimaryButton 
              onClick={clearAllLogs} 
              disabled={isClearingAll}
              className="bg-rose-600 hover:bg-rose-700 text-white"
            >
              {isClearingAll ? 'Clearing...' : 'Yes, Clear Everything'}
            </PrimaryButton>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </SettingsLayout>
  );
}