import { useState, useCallback, useMemo, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useAuth } from '../../contexts/AuthContext';
import { AppLayout } from '../../components/layout/AppLayout';
import { LoadingSpinner } from '../..//components/ui/LoadingSpinner';
import {
  angiLeadsApi,
  type AngiLead,
  type LeadStatus,
  type LeadPriority,
  type LeadActionType,
} from '../../api/angiLeads';

import {
  Search,
  Filter,
  X,
  Phone,
  Mail,
  MapPin,
  Calendar,
  DollarSign,
  Clock,
  CheckCircle2,
  MessageSquare,
  Ban,
  ChevronRight,
  AlertTriangle,
  Star,
  RefreshCw,
  ClipboardList,
  ArrowRight,
  Check,
  AlertCircle,
  ExternalLink,
} from 'lucide-react';

// ─── Helpers ──────────────────────────────────────────────────────────────

function timeAgo(dateStr: string | null | undefined): string {
  if (!dateStr) return '—';
  const now = Date.now();
  const then = new Date(dateStr).getTime();
  const diff = now - then;
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return 'just now';
  if (mins < 60) return `${mins}m ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  if (days < 30) return `${days}d ago`;
  return new Date(dateStr).toLocaleDateString();
}

function formatCurrency(value: number | null): string {
  if (value == null || value === 0) return '—';
  if (value >= 1000) return `$${(value / 1000).toFixed(1)}k`;
  return `$${value}`;
}

function responseTimeColor(minutes: number): string {
  if (minutes <= 5) return 'text-emerald-600 bg-emerald-50';
  if (minutes <= 30) return 'text-amber-600 bg-amber-50';
  return 'text-red-600 bg-red-50';
}

function responseTimeLabel(minutes: number): string {
  if (minutes == null || minutes === 0) return '—';
  if (minutes < 60) return `${minutes}m`;
  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
}

function statusColor(status: LeadStatus): string {
  const map: Record<LeadStatus, string> = {
    new: 'bg-blue-100 text-blue-700',
    accepted: 'bg-indigo-100 text-indigo-700',
    responded: 'bg-violet-100 text-violet-700',
    contacted: 'bg-cyan-100 text-cyan-700',
    scheduled: 'bg-orange-100 text-orange-700',
    won: 'bg-emerald-100 text-emerald-700',
    lost: 'bg-red-100 text-red-700',
    expired: 'bg-slate-100 text-slate-600',
    rejected: 'bg-gray-100 text-gray-500',
  };
  return map[status] || 'bg-gray-100 text-gray-600';
}

function statusLabel(status: LeadStatus): string {
  return status.charAt(0).toUpperCase() + status.slice(1);
}

function priorityColor(priority: LeadPriority): string {
  const map: Record<LeadPriority, string> = {
    high: 'text-red-600 bg-red-50',
    medium: 'text-amber-600 bg-amber-50',
    low: 'text-slate-600 bg-slate-50',
  };
  return map[priority] || '';
}

function priorityLabel(priority: LeadPriority): string {
  return priority.charAt(0).toUpperCase() + priority.slice(1);
}

// ─── Status Timeline ──────────────────────────────────────────────────────

const STATUS_FLOW: LeadStatus[] = ['new', 'accepted', 'responded', 'contacted', 'scheduled', 'won'];
const TERMINAL_STATUSES: LeadStatus[] = ['won', 'lost', 'expired', 'rejected'];

function StatusTimeline({ lead }: { lead: AngiLead }) {
  const currentIndex = STATUS_FLOW.indexOf(lead.status);

  return (
    <div className="flex items-center gap-1 overflow-x-auto py-2">
      {STATUS_FLOW.map((step, i) => {
        const isCompleted = i <= currentIndex && !TERMINAL_STATUSES.includes(step);
        const isActive = lead.status === step;
        const isTerminal = TERMINAL_STATUSES.includes(lead.status) && TERMINAL_STATUSES.includes(step);

        return (
          <div key={step} className="flex items-center">
            <div
              className={`flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium whitespace-nowrap ${
                isActive
                  ? 'bg-brand-600 text-white'
                  : isCompleted || isTerminal
                    ? 'bg-emerald-100 text-emerald-700'
                    : 'bg-surface-100 text-surface-400'
              }`}
            >
              {(isCompleted || isTerminal) && <Check className="h-3 w-3" />}
              {statusLabel(step)}
            </div>
            {i < STATUS_FLOW.length - 1 && (
              <ArrowRight className="h-3 w-3 text-surface-300 shrink-0 mx-0.5" />
            )}
          </div>
        );
      })}
    </div>
  );
}

// ─── Action Icon ──────────────────────────────────────────────────────────

function actionIcon(type: LeadActionType): React.ReactNode {
  switch (type) {
    case 'received':
      return <ClipboardList className="h-4 w-4 text-blue-500" />;
    case 'responded':
      return <MessageSquare className="h-4 w-4 text-violet-500" />;
    case 'accepted':
      return <CheckCircle2 className="h-4 w-4 text-emerald-500" />;
    case 'rejected':
      return <Ban className="h-4 w-4 text-red-500" />;
    case 'status_change':
      return <ArrowRight className="h-4 w-4 text-amber-500" />;
    case 'note':
      return <AlertCircle className="h-4 w-4 text-slate-400" />;
    default:
      return <AlertCircle className="h-4 w-4 text-slate-400" />;
  }
}

// ─── Lead Detail Panel ────────────────────────────────────────────────────

interface LeadDetailPanelProps {
  lead: AngiLead;
  onClose: () => void;
  onAction: () => void;
}

function LeadDetailPanel({ lead, onClose, onAction }: LeadDetailPanelProps) {
  const { user } = useAuth();
  const companyId = user?.tenantId as string;
  const queryClient = useQueryClient();
  const [notes, setNotes] = useState(lead.internal_notes || '');
  const [noteDirty, setNoteDirty] = useState(false);
  const [respondMessage, setRespondMessage] = useState('');
  const [showRespond, setShowRespond] = useState(false);

  // Update lead status
  const updateMutation = useMutation({
    mutationFn: (payload: { status?: LeadStatus; priority?: LeadPriority; internal_notes?: string }) =>
      angiLeadsApi.update(companyId, lead.id, payload),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['angi-leads'] });
      onAction();
    },
  });

  // Accept lead
  const acceptMutation = useMutation({
    mutationFn: () => angiLeadsApi.accept(companyId, lead.id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['angi-leads'] });
      onAction();
    },
  });

  // Reject lead
  const rejectMutation = useMutation({
    mutationFn: () => angiLeadsApi.reject(companyId, lead.id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['angi-leads'] });
      onAction();
    },
  });

  // Respond to lead
  const respondMutation = useMutation({
    mutationFn: (message: string) => angiLeadsApi.respond(companyId, lead.id, { message }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['angi-leads'] });
      setShowRespond(false);
      setRespondMessage('');
      onAction();
    },
  });

  const handleSaveNotes = () => {
    if (notes === lead.internal_notes) return;
    updateMutation.mutate({ internal_notes: notes });
    setNoteDirty(false);
  };

  const isTerminal = TERMINAL_STATUSES.includes(lead.status);

  return (
    <div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/30" onClick={onClose} />

      {/* Panel */}
      <div className="relative z-10 flex h-full w-full max-w-lg flex-col overflow-y-auto bg-white shadow-xl border-l border-surface-200">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-surface-200 px-6 py-4">
          <div>
            <div className="flex items-center gap-2">
              <h2 className="text-lg font-semibold text-surface-900">
                {lead.first_name} {lead.last_name}
              </h2>
              {lead.is_premium && (
                <span className="flex items-center gap-0.5 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700">
                  <Star className="h-3 w-3" /> Premium
                </span>
              )}
              {lead.is_duplicate && (
                <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700">
                  Duplicate
                </span>
              )}
            </div>
            <p className="text-sm text-surface-500">{lead.project_type}</p>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg p-2 text-surface-400 hover:bg-surface-100 hover:text-surface-600 min-h-[44px] min-w-[44px] flex items-center justify-center"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Status Timeline */}
        <div className="border-b border-surface-200 px-6 py-3">
          <p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-2">Status Timeline</p>
          <StatusTimeline lead={lead} />
        </div>

        {/* Quick Stats */}
        <div className="grid grid-cols-2 gap-3 border-b border-surface-200 px-6 py-4">
          <div className="rounded-lg bg-surface-50 p-3">
            <p className="text-xs text-surface-500">Status</p>
            <span className={`inline-block mt-1 rounded-full px-2 py-0.5 text-xs font-semibold ${statusColor(lead.status)}`}>
              {statusLabel(lead.status)}
            </span>
          </div>
          <div className="rounded-lg bg-surface-50 p-3">
            <p className="text-xs text-surface-500">Priority</p>
            <span className={`inline-block mt-1 rounded-full px-2 py-0.5 text-xs font-semibold ${priorityColor(lead.priority)}`}>
              {priorityLabel(lead.priority)}
            </span>
          </div>
          <div className="rounded-lg bg-surface-50 p-3">
            <p className="text-xs text-surface-500">Budget</p>
            <p className="mt-1 text-sm font-semibold text-surface-900">{lead.budget || formatCurrency(lead.budget_value)}</p>
          </div>
          <div className="rounded-lg bg-surface-50 p-3">
            <p className="text-xs text-surface-500">Response Time</p>
            <p className={`mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${responseTimeColor(lead.response_time_minutes)}`}>
              {lead.responded_at ? responseTimeLabel(lead.response_time_minutes) : 'Not responded'}
            </p>
          </div>
        </div>

        {/* Contact Info */}
        <div className="border-b border-surface-200 px-6 py-4">
          <p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-3">Contact Info</p>
          <div className="space-y-2">
            {lead.email && (
              <a href={`mailto:${lead.email}`} className="flex items-center gap-2 text-sm text-surface-700 hover:text-brand-600">
                <Mail className="h-4 w-4 text-surface-400" />
                {lead.email}
              </a>
            )}
            {lead.phone && (
              <a href={`tel:${lead.phone}`} className="flex items-center gap-2 text-sm text-surface-700 hover:text-brand-600">
                <Phone className="h-4 w-4 text-surface-400" />
                {lead.phone}
              </a>
            )}
            {lead.address && (
              <div className="flex items-start gap-2 text-sm text-surface-700">
                <MapPin className="h-4 w-4 text-surface-400 mt-0.5 shrink-0" />
                <span>
                  {lead.address}
                  {lead.city && `, ${lead.city}`}
                  {lead.state && ` ${lead.state}`}
                  {lead.zip_code && ` ${lead.zip_code}`}
                </span>
              </div>
            )}
          </div>
        </div>

        {/* Project Details */}
        <div className="border-b border-surface-200 px-6 py-4">
          <p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-3">Project Details</p>
          <div className="space-y-2 text-sm text-surface-700">
            <div className="flex items-center gap-2">
              <ClipboardList className="h-4 w-4 text-surface-400" />
              <span className="font-medium">{lead.project_type}</span>
            </div>
            {lead.description && (
              <p className="text-surface-600 leading-relaxed">{lead.description}</p>
            )}
            {lead.timeline && (
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-surface-400" />
                <span>Timeline: {lead.timeline}</span>
              </div>
            )}
            {lead.budget && (
              <div className="flex items-center gap-2">
                <DollarSign className="h-4 w-4 text-surface-400" />
                <span>Budget: {lead.budget}</span>
              </div>
            )}
          </div>
        </div>

        {/* Action Buttons */}
        <div className="border-b border-surface-200 px-6 py-4">
          <p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-3">Actions</p>
          <div className="flex flex-wrap gap-2">
            {!isTerminal && lead.status === 'new' && (
              <button
                onClick={() => acceptMutation.mutate()}
                disabled={acceptMutation.isPending || updateMutation.isPending}
                className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-700 disabled:opacity-50 min-h-[44px]"
              >
                <CheckCircle2 className="h-4 w-4" />
                Accept
              </button>
            )}
            {!isTerminal && lead.status !== 'rejected' && (
              <button
                onClick={() => setShowRespond(true)}
                disabled={respondMutation.isPending}
                className="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 min-h-[44px]"
              >
                <MessageSquare className="h-4 w-4" />
                Respond
              </button>
            )}
            {!isTerminal && lead.status !== 'rejected' && (
              <button
                onClick={() => rejectMutation.mutate()}
                disabled={rejectMutation.isPending}
                className="inline-flex items-center gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700 hover:bg-red-100 disabled:opacity-50 min-h-[44px]"
              >
                <Ban className="h-4 w-4" />
                Reject
              </button>
            )}
          </div>

          {/* Respond Modal */}
          {showRespond && (
            <div className="mt-3 rounded-lg border border-surface-200 bg-surface-50 p-4">
              <p className="text-sm font-medium text-surface-700 mb-2">Send Response</p>
              <textarea
                value={respondMessage}
                onChange={(e) => setRespondMessage(e.target.value)}
                placeholder="Type your response to the lead..."
                rows={3}
                className="w-full rounded-lg border border-surface-300 bg-white px-3 py-2 text-sm outline-none focus:border-brand-500 resize-none"
              />
              <div className="mt-2 flex justify-end gap-2">
                <button
                  onClick={() => { setShowRespond(false); setRespondMessage(''); }}
                  className="rounded-lg border border-surface-300 px-3 py-1.5 text-sm text-surface-600 hover:bg-surface-100 min-h-[44px]"
                >
                  Cancel
                </button>
                <button
                  onClick={() => respondMutation.mutate(respondMessage)}
                  disabled={!respondMessage.trim() || respondMutation.isPending}
                  className="rounded-lg bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 min-h-[44px]"
                >
                  Send
                </button>
              </div>
            </div>
          )}
        </div>

        {/* Internal Notes */}
        <div className="border-b border-surface-200 px-6 py-4">
          <p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-3">Internal Notes</p>
          <textarea
            value={notes}
            onChange={(e) => { setNotes(e.target.value); setNoteDirty(true); }}
            placeholder="Add internal notes about this lead..."
            rows={3}
            className="w-full rounded-lg border border-surface-300 bg-white px-3 py-2 text-sm outline-none focus:border-brand-500 resize-none"
          />
          {noteDirty && (
            <div className="mt-2 flex justify-end">
              <button
                onClick={handleSaveNotes}
                disabled={updateMutation.isPending}
                className="rounded-lg bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 min-h-[44px]"
              >
                Save Notes
              </button>
            </div>
          )}
        </div>

        {/* Activity Log */}
        {lead.actions && lead.actions.length > 0 && (
          <div className="px-6 py-4">
            <p className="text-xs font-medium text-surface-500 uppercase tracking-wide mb-3">Activity Log</p>
            <div className="space-y-3">
              {[...lead.actions].reverse().map((action) => (
                <div key={action.id} className="flex gap-3">
                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-100">
                    {actionIcon(action.action_type)}
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="text-sm text-surface-700">{action.details}</p>
                    <p className="text-xs text-surface-400">
                      {action.performed_by} · {timeAgo(action.created_at)}
                    </p>
                    {action.message_content && (
                      <p className="mt-1 rounded-lg bg-surface-50 p-2 text-xs text-surface-600">
                        {action.message_content}
                      </p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Received At */}
        <div className="px-6 py-4 text-center text-xs text-surface-400">
          Received {timeAgo(lead.received_at)}
        </div>
      </div>
    </div>
  );
}

// ─── Lead Row Component ──────────────────────────────────────────────────

function LeadRow({
  lead,
  isSelected,
  onSelect,
  onAccept,
  onReject,
  onRespond,
  isActionLoading,
}: {
  lead: AngiLead;
  isSelected: boolean;
  onSelect: () => void;
  onAccept: () => void;
  onReject: () => void;
  onRespond: () => void;
  isActionLoading: boolean;
}) {
  const isTerminal = TERMINAL_STATUSES.includes(lead.status);

  return (
    <tr
      onClick={onSelect}
      className={`group cursor-pointer border-b border-surface-100 last:border-0 transition-colors ${
        isSelected ? 'bg-brand-50' : 'hover:bg-surface-50'
      } ${lead.is_premium ? 'border-l-2 border-l-amber-400' : ''}`}
    >
      {/* Lead Info */}
      <td className="px-4 py-3">
        <div className="flex items-center gap-3">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-surface-200 text-xs font-semibold text-surface-600">
            {lead.first_name?.[0]}{lead.last_name?.[0]}
          </div>
          <div className="min-w-0">
            <div className="flex items-center gap-1.5">
              <p className="truncate text-sm font-medium text-surface-900">
                {lead.first_name} {lead.last_name}
              </p>
              {lead.is_premium && (
                <Star className="h-3.5 w-3.5 shrink-0 text-amber-500" />
              )}
              {lead.is_duplicate && (
                <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-red-400" />
              )}
            </div>
            <p className="truncate text-xs text-surface-500">{lead.project_type}</p>
          </div>
        </div>
      </td>

      {/* Status */}
      <td className="px-4 py-3">
        <span className={`inline-block rounded-full px-2.5 py-1 text-xs font-semibold ${statusColor(lead.status)}`}>
          {statusLabel(lead.status)}
        </span>
      </td>

      {/* Priority */}
      <td className="px-4 py-3">
        <span className={`inline-block rounded-full px-2.5 py-1 text-xs font-semibold ${priorityColor(lead.priority)}`}>
          {priorityLabel(lead.priority)}
        </span>
      </td>

      {/* Budget */}
      <td className="px-4 py-3 text-sm text-surface-700">
        {lead.budget || formatCurrency(lead.budget_value)}
      </td>

      {/* Received */}
      <td className="px-4 py-3 text-sm text-surface-500">
        {timeAgo(lead.received_at)}
      </td>

      {/* Response Time */}
      <td className="px-4 py-3">
        {lead.responded_at ? (
          <span className={`inline-block rounded-full px-2.5 py-1 text-xs font-semibold ${responseTimeColor(lead.response_time_minutes)}`}>
            {responseTimeLabel(lead.response_time_minutes)}
          </span>
        ) : (
          <span className="text-xs text-surface-400">—</span>
        )}
      </td>

      {/* Actions */}
      <td className="px-4 py-3">
        <div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100" onClick={(e) => e.stopPropagation()}>
          {!isTerminal && lead.status === 'new' && (
            <button
              onClick={onAccept}
              disabled={isActionLoading}
              className="rounded-lg p-2 text-emerald-600 hover:bg-emerald-50 disabled:opacity-50 min-h-[44px] min-w-[44px] flex items-center justify-center"
              title="Accept lead"
            >
              <CheckCircle2 className="h-4 w-4" />
            </button>
          )}
          {!isTerminal && lead.status !== 'rejected' && (
            <button
              onClick={onRespond}
              disabled={isActionLoading}
              className="rounded-lg p-2 text-brand-600 hover:bg-brand-50 disabled:opacity-50 min-h-[44px] min-w-[44px] flex items-center justify-center"
              title="Respond"
            >
              <MessageSquare className="h-4 w-4" />
            </button>
          )}
          {!isTerminal && lead.status !== 'rejected' && (
            <button
              onClick={onReject}
              disabled={isActionLoading}
              className="rounded-lg p-2 text-red-600 hover:bg-red-50 disabled:opacity-50 min-h-[44px] min-w-[44px] flex items-center justify-center"
              title="Reject"
            >
              <Ban className="h-4 w-4" />
            </button>
          )}
          <button
            onClick={onSelect}
            className="rounded-lg p-2 text-surface-400 hover:bg-surface-100 min-h-[44px] min-w-[44px] flex items-center justify-center"
            title="View details"
          >
            <ChevronRight className="h-4 w-4" />
          </button>
        </div>
      </td>
    </tr>
  );
}

// ─── Main Page ────────────────────────────────────────────────────────────

export function AngiLeadsPage() {
  const { user } = useAuth();
  const companyId = user?.tenantId as string;
  const queryClient = useQueryClient();

  // Filters
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [priorityFilter, setPriorityFilter] = useState<string>('all');
  const [dateRange, setDateRange] = useState<string>('30d');
  const [search, setSearch] = useState('');
  const [page, setPage] = useState(1);
  const [showFilters, setShowFilters] = useState(false);
  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  // Selected lead for detail panel
  const [selectedLead, setSelectedLead] = useState<AngiLead | null>(null);

  // Active action (for loading state on buttons)
  const [activeAction, setActiveAction] = useState<string | null>(null);

  useEffect(() => {
    if (toast) {
      const timer = setTimeout(() => setToast(null), 4000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  const buildParams = useMemo(() => {
    const params: Record<string, string | number> = { page, per_page: 25 };
    if (statusFilter !== 'all') params.status = statusFilter;
    if (priorityFilter !== 'all') params.priority = priorityFilter;
    params.date_range = dateRange;
    if (search.trim()) params.search = search.trim();
    return params;
  }, [statusFilter, priorityFilter, dateRange, search, page]);

  // Fetch leads
  const {
    data: leadsData,
    isLoading: leadsLoading,
    isFetching: leadsFetching,
  } = useQuery({
    queryKey: ['angi-leads', buildParams],
    queryFn: () => angiLeadsApi.getAll(companyId, buildParams),
    enabled: !!companyId,
    staleTime: 15_000,
  });

  // Fetch analytics
  const { data: analyticsData } = useQuery({
    queryKey: ['angi-leads-analytics'],
    queryFn: () => angiLeadsApi.getAnalytics(companyId),
    enabled: !!companyId,
    staleTime: 60_000,
  });

  // Sync mutation
  const syncMutation = useMutation({
    mutationFn: () => angiLeadsApi.sync(companyId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['angi-leads'] });
      queryClient.invalidateQueries({ queryKey: ['angi-leads-analytics'] });
      setToast({ message: 'Angi Leads synced successfully', type: 'success' });
    },
    onError: (err: unknown) => {
      const message = (err as { response?: { data?: { error?: string } } })?.response?.data?.error || 'Angi Leads sync failed';
      setToast({ message, type: 'error' });
    },
  });

  // Action mutations
  const acceptMutation = useMutation({
    mutationFn: (leadId: string) => angiLeadsApi.accept(companyId, leadId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['angi-leads'] });
      queryClient.invalidateQueries({ queryKey: ['angi-leads-analytics'] });
      if (selectedLead) {
        queryClient.invalidateQueries({ queryKey: ['angi-lead-detail', selectedLead.id] });
      }
    },
  });

  const rejectMutation = useMutation({
    mutationFn: (leadId: string) => angiLeadsApi.reject(companyId, leadId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['angi-leads'] });
      queryClient.invalidateQueries({ queryKey: ['angi-leads-analytics'] });
    },
  });

  const respondMutation = useMutation({
    mutationFn: ({ leadId, message }: { leadId: string; message: string }) =>
      angiLeadsApi.respond(companyId, leadId, { message }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['angi-leads'] });
      queryClient.invalidateQueries({ queryKey: ['angi-leads-analytics'] });
    },
  });

  const handleAccept = useCallback(
    (leadId: string) => {
      setActiveAction(leadId);
      acceptMutation.mutate(leadId, {
        onSettled: () => setActiveAction(null),
      });
    },
    [acceptMutation]
  );

  const handleReject = useCallback(
    (leadId: string) => {
      setActiveAction(leadId);
      rejectMutation.mutate(leadId, {
        onSettled: () => setActiveAction(null),
      });
    },
    [rejectMutation]
  );

  const handleRespond = useCallback(
    (leadId: string) => {
      setSelectedLead(
        leadsData?.data.items.find((l) => l.id === leadId) || null
      );
    },
    [leadsData]
  );

  const handleDetailAction = useCallback(() => {
    // Refresh selected lead data
    if (selectedLead) {
      queryClient.invalidateQueries({ queryKey: ['angi-lead-detail', selectedLead.id] });
    }
  }, [queryClient, selectedLead]);

  const leads = leadsData?.data.items || [];
  const total = leadsData?.data.total || 0;
  const totalPages = Math.ceil(total / 25);
  const analytics = analyticsData?.data;

  // Quick respond from table
  const handleQuickRespond = useCallback(
    (leadId: string) => {
      const message = prompt('Quick respond to lead:');
      if (message?.trim()) {
        setActiveAction(leadId);
        respondMutation.mutate({ leadId, message: message.trim() }, {
          onSettled: () => setActiveAction(null),
        });
      }
    },
    [respondMutation]
  );

  // Stats
  const stats = [
    {
      label: 'New Leads',
      value: analytics?.new_leads ?? 0,
      icon: ClipboardList,
      color: 'text-blue-600 bg-blue-50',
    },
    {
      label: 'Responded',
      value: analytics?.responded ?? 0,
      icon: MessageSquare,
      color: 'text-violet-600 bg-violet-50',
    },
    {
      label: 'Won',
      value: analytics?.won ?? 0,
      icon: CheckCircle2,
      color: 'text-emerald-600 bg-emerald-50',
    },
    {
      label: 'Lost',
      value: analytics?.lost ?? 0,
      icon: Ban,
      color: 'text-red-600 bg-red-50',
    },
    {
      label: 'Avg Response',
      value: analytics ? `${(analytics.avg_response_time || 0).toFixed(0)}m` : '—',
      icon: Clock,
      color: 'text-amber-600 bg-amber-50',
    },
    {
      label: 'Conversion Rate',
      value: analytics
        ? `${((analytics.conversion_rate || 0) * 100).toFixed(1)}%`
        : '—',
      icon: DollarSign,
      color: 'text-green-600 bg-green-50',
    },
  ];

  // Reset page when filters change
  useEffect(() => {
    setPage(1);
  }, [statusFilter, priorityFilter, dateRange]);

  return (
    <AppLayout title="Angi Leads">
      {/* Toast */}
      {toast && (
        <div className="fixed top-4 right-4 z-[70] flex items-center gap-2 rounded-lg bg-surface-900 px-4 py-3 text-sm text-white shadow-lg">
          {toast.type === 'success' ? (
            <CheckCircle2 className="h-4 w-4 text-green-400" />
          ) : (
            <AlertCircle className="h-4 w-4 text-red-400" />
          )}
          {toast.message}
        </div>
      )}

      <div data-testid="page-content">
        {/* Stats Cards */}
        <div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
          {stats.map((stat) => (
            <div key={stat.label} className="rounded-xl border border-surface-200 bg-white p-4">
              <div className="flex items-center gap-2">
                <div className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${stat.color}`}>
                  <stat.icon className="h-4 w-4" />
                </div>
                <div className="min-w-0">
                  <p className="text-xs font-medium text-surface-500 truncate">{stat.label}</p>
                  <p className="text-lg font-bold text-surface-900">{stat.value}</p>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Filters Bar */}
        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-center">
            {/* Search */}
            <div className="relative flex-1 sm:flex-initial sm:w-72">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-400" />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search leads..."
                className="w-full rounded-lg border border-surface-300 py-2.5 pl-9 pr-4 text-sm outline-none focus:border-brand-500 sm:w-72"
              />
            </div>

            {/* Toggle filters on mobile */}
            <button
              onClick={() => setShowFilters(!showFilters)}
              className="flex items-center gap-1.5 rounded-lg border border-surface-300 px-3 py-2 text-sm text-surface-600 hover:bg-surface-50 sm:hidden min-h-[44px]"
            >
              <Filter className="h-4 w-4" />
              Filters
            </button>

            {/* Filter dropdowns */}
            <div className={`${showFilters ? 'flex' : 'hidden'} flex-col gap-2 sm:flex sm:flex-row sm:items-center sm:gap-2`}>
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500 min-h-[44px]"
              >
                <option value="all">All Statuses</option>
                <option value="new">New</option>
                <option value="accepted">Accepted</option>
                <option value="responded">Responded</option>
                <option value="contacted">Contacted</option>
                <option value="scheduled">Scheduled</option>
                <option value="won">Won</option>
                <option value="lost">Lost</option>
                <option value="expired">Expired</option>
                <option value="rejected">Rejected</option>
              </select>

              <select
                value={priorityFilter}
                onChange={(e) => setPriorityFilter(e.target.value)}
                className="rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500 min-h-[44px]"
              >
                <option value="all">All Priorities</option>
                <option value="high">High</option>
                <option value="medium">Medium</option>
                <option value="low">Low</option>
              </select>

              <select
                value={dateRange}
                onChange={(e) => setDateRange(e.target.value)}
                className="rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500 min-h-[44px]"
              >
                <option value="7d">Last 7 Days</option>
                <option value="30d">Last 30 Days</option>
                <option value="90d">Last 90 Days</option>
                <option value="all">All Time</option>
              </select>
            </div>
          </div>

          {/* Sync button */}
          <button
            onClick={() => syncMutation.mutate()}
            disabled={syncMutation.isPending}
            className="inline-flex items-center gap-2 rounded-lg border border-surface-300 px-4 py-2.5 text-sm font-medium text-surface-700 hover:bg-surface-50 disabled:opacity-50 min-h-[44px]"
          >
            <RefreshCw className={`h-4 w-4 ${syncMutation.isPending ? 'animate-spin' : ''}`} />
            Sync
          </button>
        </div>

        {/* Results info */}
        {!leadsLoading && (
          <p className="mb-3 text-sm text-surface-500">
            Showing {leads.length} of {total} leads
          </p>
        )}

        {/* Lead Table */}
        {leadsLoading ? (
          <div className="flex items-center justify-center rounded-xl border border-surface-200 bg-white py-20">
            <LoadingSpinner size="md" />
            <span className="ml-3 text-sm text-surface-500">Loading leads…</span>
          </div>
        ) : leads.length === 0 ? (
          <div className="flex flex-col items-center justify-center rounded-xl border border-surface-200 bg-white py-20">
            <ClipboardList className="h-12 w-12 text-surface-300" />
            <p className="mt-4 text-sm font-medium text-surface-700">
              {search || statusFilter !== 'all' || priorityFilter !== 'all'
                ? 'No leads match your filters'
                : 'No Angi leads yet'}
            </p>
            <p className="mt-1 text-sm text-surface-500">
              {search || statusFilter !== 'all' || priorityFilter !== 'all'
                ? 'Try adjusting your search or filters'
                : 'Connect Angi in Integrations to start receiving leads'}
            </p>
          </div>
        ) : (
          <>
            <div className="overflow-x-auto rounded-xl border border-surface-200 bg-white">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-surface-200 bg-surface-50">
                    <th className="px-4 py-3 text-left font-medium text-surface-600">Lead</th>
                    <th className="px-4 py-3 text-left font-medium text-surface-600">Status</th>
                    <th className="px-4 py-3 text-left font-medium text-surface-600">Priority</th>
                    <th className="px-4 py-3 text-left font-medium text-surface-600">Budget</th>
                    <th className="px-4 py-3 text-left font-medium text-surface-600">Received</th>
                    <th className="px-4 py-3 text-left font-medium text-surface-600">Response</th>
                    <th className="px-4 py-3 w-24 font-medium text-surface-600">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {leads.map((lead) => (
                    <LeadRow
                      key={lead.id}
                      lead={lead}
                      isSelected={selectedLead?.id === lead.id}
                      onSelect={() => setSelectedLead(lead)}
                      onAccept={() => handleAccept(lead.id)}
                      onReject={() => handleReject(lead.id)}
                      onRespond={() => handleQuickRespond(lead.id)}
                      isActionLoading={activeAction === lead.id}
                    />
                  ))}
                </tbody>
              </table>
            </div>

            {/* Pagination */}
            {totalPages > 1 && (
              <div className="mt-4 flex items-center justify-between">
                <button
                  onClick={() => setPage((p) => Math.max(1, p - 1))}
                  disabled={page === 1}
                  className="rounded-lg border border-surface-300 px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-50 disabled:opacity-40 min-h-[44px]"
                >
                  Previous
                </button>
                <div className="flex items-center gap-1">
                  {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                    let pageNum: number;
                    if (totalPages <= 5) {
                      pageNum = i + 1;
                    } else if (page <= 3) {
                      pageNum = i + 1;
                    } else if (page >= totalPages - 2) {
                      pageNum = totalPages - 4 + i;
                    } else {
                      pageNum = page - 2 + i;
                    }
                    return (
                      <button
                        key={pageNum}
                        onClick={() => setPage(pageNum)}
                        className={`rounded-lg px-3 py-2 text-sm font-medium min-h-[44px] min-w-[44px] flex items-center justify-center ${
                          page === pageNum
                            ? 'bg-brand-600 text-white'
                            : 'text-surface-600 hover:bg-surface-100'
                        }`}
                      >
                        {pageNum}
                      </button>
                    );
                  })}
                </div>
                <button
                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                  disabled={page === totalPages}
                  className="rounded-lg border border-surface-300 px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-50 disabled:opacity-40 min-h-[44px]"
                >
                  Next
                </button>
              </div>
            )}
          </>
        )}
      </div>

      {/* Lead Detail Panel */}
      {selectedLead && (
        <LeadDetailPanel
          lead={selectedLead}
          onClose={() => setSelectedLead(null)}
          onAction={handleDetailAction}
        />
      )}
    </AppLayout>
  );
}