import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Link, useNavigate } from 'react-router-dom';
import { __ } from '@/lib/i18n';
import { CustomersApi, type Customer } from '@/lib/api/customers';
import { showErrorToast, showSuccessToast, getPageLoadErrorMessage } from '@/lib/errorHandling';
import { useFABConfig } from '@/hooks/useFABConfig';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { ErrorCard } from '@/components/ErrorCard';
import { Skeleton } from '@/components/ui/skeleton';
import { RefreshCw, Trash2, Search, User, ChevronRight } from 'lucide-react';
import { formatMoney } from '@/lib/currency';

export default function CustomersIndex() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  
  // State
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  
  // FAB config - 'none' because submenu has 'New' tab (per SOP)
  useFABConfig('none');
  
  // Fetch customers
  const customersQuery = useQuery({
    queryKey: ['customers', page, search],
    queryFn: () => CustomersApi.list({ page, per_page: 20, search }),
  });
  
  // Delete mutation
  const deleteMutation = useMutation({
    mutationFn: async (ids: number[]) => {
      await Promise.all(ids.map(id => CustomersApi.delete(id)));
    },
    onSuccess: () => {
      showSuccessToast(__('Customers deleted successfully'));
      setSelectedIds([]);
      queryClient.invalidateQueries({ queryKey: ['customers'] });
    },
    onError: (error: any) => {
      showErrorToast(error);
    },
  });
  
  // Handlers
  const toggleSelection = (id: number) => {
    setSelectedIds(prev =>
      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
    );
  };
  
  const toggleAll = () => {
    if (selectedIds.length === customers.length) {
      setSelectedIds([]);
    } else {
      setSelectedIds(customers.map(c => c.id));
    }
  };
  
  const handleDelete = () => {
    if (selectedIds.length === 0) return;
    if (!confirm(__('Are you sure you want to delete the selected customers? This action cannot be undone.'))) return;
    deleteMutation.mutate(selectedIds);
  };
  
  const handleRefresh = () => {
    queryClient.invalidateQueries({ queryKey: ['customers'] });
  };
  
  // Data
  const customers = customersQuery.data?.data || [];
  const pagination = customersQuery.data?.pagination;
  
  // Loading state
  if (customersQuery.isLoading) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-12 w-full" />
        <Skeleton className="h-64 w-full" />
      </div>
    );
  }
  
  // Error state
  if (customersQuery.isError) {
    return (
      <ErrorCard
        title={__('Failed to load customers')}
        message={getPageLoadErrorMessage(customersQuery.error)}
        onRetry={() => customersQuery.refetch()}
      />
    );
  }
  
  return (
    <div className="space-y-4">
      {/* Mobile: Search */}
      <div className="md:hidden">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input
            type="search"
            placeholder={__('Search customers...')}
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setPage(1);
            }}
            className="pl-9"
          />
        </div>
      </div>

      {/* Desktop: Toolbar */}
      <div className="hidden md:block rounded-lg border border-border p-4 bg-card">
        <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-3">
          {/* Left: Bulk Actions */}
          <div className="flex gap-3">
            {selectedIds.length > 0 && (
              <button
                onClick={handleDelete}
                disabled={deleteMutation.isPending}
                className="border rounded-md px-3 py-2 text-sm bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 inline-flex items-center gap-2"
              >
                <Trash2 className="w-4 h-4" />
                {__('Delete')} ({selectedIds.length})
              </button>
            )}
            
            <button
              onClick={handleRefresh}
              disabled={customersQuery.isFetching}
              className="border rounded-md px-3 py-2 text-sm hover:bg-accent disabled:opacity-50 inline-flex items-center gap-2"
            >
              <RefreshCw className={`w-4 h-4 ${customersQuery.isFetching ? 'animate-spin' : ''}`} />
              {__('Refresh')}
            </button>
          </div>
          
          {/* Right: Search */}
          <div className="flex gap-3 items-center">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input
                type="search"
                placeholder={__('Search customers...')}
                value={search}
                onChange={(e) => {
                  setSearch(e.target.value);
                  setPage(1);
                }}
                className="pl-9 w-64"
              />
            </div>
          </div>
        </div>
      </div>
      
      {/* Desktop: Table */}
      <div className="hidden md:block rounded-lg border overflow-hidden">
        <table className="w-full">
          <thead className="bg-muted/50">
            <tr className="border-b">
              <th className="w-12 p-3">
                <Checkbox
                  checked={selectedIds.length === customers.length && customers.length > 0}
                  onCheckedChange={toggleAll}
                  aria-label={__('Select all')}
                />
              </th>
              <th className="text-left p-3 font-medium">{__('Customer')}</th>
              <th className="text-left p-3 font-medium">{__('Email')}</th>
              <th className="text-left p-3 font-medium">{__('Orders')}</th>
              <th className="text-left p-3 font-medium">{__('Total Spent')}</th>
              <th className="text-left p-3 font-medium">{__('Registered')}</th>
            </tr>
          </thead>
          <tbody>
            {customers.length === 0 ? (
              <tr>
                <td colSpan={6} className="p-8 text-center text-muted-foreground">
                  <User className="w-12 h-12 mx-auto mb-2 opacity-50" />
                  {search ? __('No customers found matching your search') : __('No customers yet')}
                  {!search && (
                    <p className="text-sm mt-1">
                      <Link to="/customers/new" className="text-primary hover:underline">
                        {__('Create your first customer')}
                      </Link>
                    </p>
                  )}
                </td>
              </tr>
            ) : (
              customers.map((customer) => (
                <tr key={customer.id} className="border-b hover:bg-muted/30 last:border-0">
                  <td className="p-3">
                    <Checkbox
                      checked={selectedIds.includes(customer.id)}
                      onCheckedChange={() => toggleSelection(customer.id)}
                      aria-label={__('Select customer')}
                    />
                  </td>
                  <td className="p-3">
                    <Link to={`/customers/${customer.id}/edit`} className="font-medium hover:underline">
                      {customer.display_name || `${customer.first_name} ${customer.last_name}`}
                    </Link>
                  </td>
                  <td className="p-3 text-sm text-muted-foreground">{customer.email}</td>
                  <td className="p-3 text-sm">{customer.stats?.total_orders || 0}</td>
                  <td className="p-3 text-sm font-medium">
                    {customer.stats?.total_spent ? formatMoney(customer.stats.total_spent) : '—'}
                  </td>
                  <td className="p-3 text-sm text-muted-foreground">
                    {new Date(customer.registered).toLocaleDateString()}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
      
      {/* Mobile: Cards */}
      <div className="md:hidden space-y-3">
        {customers.length === 0 ? (
          <Card className="p-8 text-center text-muted-foreground">
            <User className="w-12 h-12 mx-auto mb-2 opacity-50" />
            {search ? __('No customers found') : __('No customers yet')}
          </Card>
        ) : (
          customers.map((customer) => (
            <Link
              key={customer.id}
              to={`/customers/${customer.id}/edit`}
              className="block bg-card border border-border rounded-xl p-3 hover:bg-accent/50 transition-colors active:scale-[0.98] active:transition-transform shadow-sm"
            >
              <div className="flex items-center gap-3">
                {/* Checkbox */}
                <div 
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    toggleSelection(customer.id);
                  }}
                >
                  <Checkbox
                    checked={selectedIds.includes(customer.id)}
                    aria-label={__('Select customer')}
                    className="w-5 h-5"
                  />
                </div>

                {/* Content */}
                <div className="flex-1 min-w-0">
                  {/* Line 1: Name */}
                  <h3 className="font-bold text-base leading-tight mb-1">
                    {customer.display_name || `${customer.first_name} ${customer.last_name}`}
                  </h3>

                  {/* Line 2: Email */}
                  <div className="text-sm text-muted-foreground truncate mb-2">
                    {customer.email}
                  </div>

                  {/* Line 3: Stats */}
                  <div className="flex items-center gap-3 text-xs text-muted-foreground mb-1">
                    <span>{customer.stats?.total_orders || 0} {__('orders')}</span>
                    <span>{new Date(customer.registered).toLocaleDateString()}</span>
                  </div>

                  {/* Line 4: Total Spent */}
                  <div className="font-bold text-lg tabular-nums text-primary">
                    {customer.stats?.total_spent ? formatMoney(customer.stats.total_spent) : '—'}
                  </div>
                </div>

                {/* Chevron */}
                <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
              </div>
            </Link>
          ))
        )}
      </div>
      
      {/* Pagination */}
      {pagination && pagination.total_pages > 1 && (
        <div className="flex justify-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => setPage(p => Math.max(1, p - 1))}
            disabled={page === 1 || customersQuery.isFetching}
          >
            {__('Previous')}
          </Button>
          <span className="px-4 py-2 text-sm">
            {__('Page')} {page} {__('of')} {pagination.total_pages}
          </span>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setPage(p => Math.min(pagination.total_pages, p + 1))}
            disabled={page === pagination.total_pages || customersQuery.isFetching}
          >
            {__('Next')}
          </Button>
        </div>
      )}
    </div>
  );
}