import { useState, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { AppLayout } from '../../components/layout/AppLayout';
import { quickbooksApi, type CustomersResponse } from '../../api/quickbooks';
import { LoadingSpinner } from '../../components/ui/LoadingSpinner';
import {
  Search,
  RefreshCw,
  AlertTriangle,
  Users,
  Mail,
  Phone,
  MapPin,
  ChevronDown,
  ChevronUp,
  Building2,
  ExternalLink,
} from 'lucide-react';

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

function formatCurrency(value: number): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(value);
}

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

export function QuickBooksCustomersPage() {
  const [search, setSearch] = useState('');
  const [sortBy, setSortBy] = useState<'display_name' | 'balance'>('display_name');
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');

  const { data, isLoading, error, refetch } = useQuery<CustomersResponse>({
    queryKey: ['quickbooks-customers', search],
    queryFn: () => quickbooksApi.getCustomers({ search: search || undefined }),
    staleTime: 1 * 60 * 1000,
  });

  const customers = useMemo(() => {
    let items = data?.customers || [];
    return [...items].sort((a, b) => {
      let cmp = 0;
      if (sortBy === 'balance') {
        cmp = a.balance - b.balance;
      } else {
        cmp = a.display_name.localeCompare(b.display_name);
      }
      return sortDir === 'desc' ? -cmp : cmp;
    });
  }, [data, sortBy, sortDir]);

  const totalBalance = customers.reduce((sum, c) => sum + c.balance, 0);
  const avgBalance = customers.length > 0 ? totalBalance / customers.length : 0;

  const handleSort = (field: typeof sortBy) => {
    if (sortBy === field) {
      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
    } else {
      setSortBy(field);
      setSortDir(field === 'display_name' ? 'asc' : 'desc');
    }
  };

  const SortIcon = ({ field }: { field: typeof sortBy }) => {
    if (sortBy !== field) return <ChevronDown className="h-3 w-3 text-surface-300" />;
    return sortDir === 'desc' ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />;
  };

  if (isLoading) {
    return (
      <AppLayout title="QuickBooks Customers">
        <div className="flex items-center justify-center py-20">
          <LoadingSpinner size="lg" />
        </div>
      </AppLayout>
    );
  }

  if (error) {
    return (
      <AppLayout title="QuickBooks Customers">
        <div className="flex flex-col items-center justify-center py-20 text-center">
          <AlertTriangle className="h-12 w-12 text-amber-400" />
          <h3 className="mt-4 text-lg font-semibold text-surface-900">Failed to Load Customers</h3>
          <p className="mt-1 text-sm text-surface-500">
            {error instanceof Error ? error.message : 'Could not load customer data.'}
          </p>
          <button
            onClick={() => refetch()}
            className="mt-4 flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700 min-h-[44px]"
          >
            <RefreshCw className="h-4 w-4" />
            Try Again
          </button>
        </div>
      </AppLayout>
    );
  }

  return (
    <AppLayout title="QuickBooks Customers">
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-xl font-bold text-surface-900">Customers</h1>
            <p className="text-sm text-surface-500">
              {customers.length} customers · Total balance: {formatCurrency(totalBalance)}
            </p>
          </div>
          <button
            onClick={() => refetch()}
            className="flex items-center gap-1.5 rounded-lg border border-surface-200 bg-white px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-50 min-h-[44px]"
          >
            <RefreshCw className="h-4 w-4" />
            Refresh
          </button>
        </div>

        {/* Summary */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <div className="rounded-xl border border-surface-200 bg-white p-4">
            <div className="flex items-center gap-2">
              <Users className="h-5 w-5 text-blue-500" />
              <span className="text-sm font-medium text-surface-600">Total Customers</span>
            </div>
            <p className="mt-1 text-2xl font-bold text-surface-900">{customers.length}</p>
          </div>
          <div className="rounded-xl border border-surface-200 bg-white p-4">
            <div className="flex items-center gap-2">
              <Building2 className="h-5 w-5 text-amber-500" />
              <span className="text-sm font-medium text-surface-600">Total Balance</span>
            </div>
            <p className="mt-1 text-2xl font-bold text-amber-600">{formatCurrency(totalBalance)}</p>
          </div>
          <div className="rounded-xl border border-surface-200 bg-white p-4">
            <div className="flex items-center gap-2">
              <ExternalLink className="h-5 w-5 text-indigo-500" />
              <span className="text-sm font-medium text-surface-600">Avg Balance</span>
            </div>
            <p className="mt-1 text-2xl font-bold text-indigo-600">{formatCurrency(avgBalance)}</p>
          </div>
        </div>

        {/* Search */}
        <div className="rounded-xl border border-surface-200 bg-white p-4">
          <div className="relative">
            <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 by name, email, phone..."
              className="w-full rounded-lg border border-surface-200 bg-white pl-9 pr-3 py-2 text-sm outline-none focus:border-brand-500 min-h-[44px]"
            />
          </div>
        </div>

        {/* Table */}
        <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="cursor-pointer px-4 py-3 text-left text-xs font-medium text-surface-500 hover:text-surface-700"
                  onClick={() => handleSort('display_name')}
                >
                  <div className="flex items-center gap-1">
                    Customer Name
                    <SortIcon field="display_name" />
                  </div>
                </th>
                <th className="px-4 py-3 text-left text-xs font-medium text-surface-500">Email</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-surface-500">Phone</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-surface-500">Address</th>
                <th
                  className="cursor-pointer px-4 py-3 text-right text-xs font-medium text-surface-500 hover:text-surface-700"
                  onClick={() => handleSort('balance')}
                >
                  <div className="flex items-center justify-end gap-1">
                    Balance
                    <SortIcon field="balance" />
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              {customers.length === 0 ? (
                <tr>
                  <td colSpan={5} className="px-4 py-12 text-center text-surface-400">
                    No customers found
                  </td>
                </tr>
              ) : (
                customers.map((customer) => {
                  const addr = customer.billing_address as
                    | { Line1?: string; City?: string; CountrySubDivisionCode?: string; PostalCode?: string }
                    | null;
                  const addressStr = addr
                    ? [addr.Line1, addr.City, addr.CountrySubDivisionCode, addr.PostalCode]
                          .filter(Boolean)
                          .join(', ') || '—'
                    : '—';

                  return (
                    <tr
                      key={customer.id}
                      className="border-b border-surface-100 hover:bg-surface-50 last:border-b-0"
                    >
                      <td className="px-4 py-3 font-medium text-surface-900">{customer.display_name || '—'}</td>
                      <td className="px-4 py-3">
                        {customer.email ? (
                          <a
                            href={`mailto:${customer.email}`}
                            className="flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-700 min-h-[44px]"
                          >
                            <Mail className="h-3.5 w-3.5" />
                            {customer.email}
                          </a>
                        ) : (
                          <span className="text-surface-400">—</span>
                        )}
                      </td>
                      <td className="px-4 py-3">
                        {customer.phone ? (
                          <a
                            href={`tel:${customer.phone}`}
                            className="flex items-center gap-1.5 text-sm text-surface-600 hover:text-brand-600 min-h-[44px]"
                          >
                            <Phone className="h-3.5 w-3.5" />
                            {customer.phone}
                          </a>
                        ) : (
                          <span className="text-surface-400">—</span>
                        )}
                      </td>
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-1.5 text-sm text-surface-600">
                          <MapPin className="h-3.5 w-3.5 shrink-0" />
                          <span className="truncate max-w-[200px]">{addressStr}</span>
                        </div>
                      </td>
                      <td
                        className={`px-4 py-3 text-right font-medium ${
                          customer.balance > 0 ? 'text-amber-600' : customer.balance < 0 ? 'text-emerald-600' : 'text-surface-600'
                        }`}
                      >
                        {formatCurrency(customer.balance)}
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>
    </AppLayout>
  );
}