import React, { useState } from 'react';
import { useQuery, useMutation, keepPreviousData } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { Filter, PackageOpen, Trash2 } from 'lucide-react';
import { ErrorCard } from '@/components/ErrorCard';
import { getPageLoadErrorMessage } from '@/lib/errorHandling';
import { __ } from '@/lib/i18n';
import { useFABConfig } from '@/hooks/useFABConfig';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import { 
  AlertDialog, 
  AlertDialogAction, 
  AlertDialogCancel, 
  AlertDialogContent, 
  AlertDialogDescription, 
  AlertDialogFooter, 
  AlertDialogHeader, 
  AlertDialogTitle 
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { toast } from 'sonner';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { formatRelativeOrDate } from "@/lib/dates";
import { Link, useNavigate } from 'react-router-dom';

function ItemsCell({ row }: { row: any }) {
  const count: number = typeof row.items_count === 'number' ? row.items_count : 0;
  const brief: string = row.items_brief || '';
  const linesTotal: number | undefined = typeof row.lines_total === 'number' ? row.lines_total : undefined;
  const linesPreview: number | undefined = typeof row.lines_preview === 'number' ? row.lines_preview : undefined;
  const extra = linesTotal && linesPreview ? Math.max(0, linesTotal - linesPreview) : 0;

  const label = `${count || '—'} item${count === 1 ? '' : 's'}`;
  const inline = brief + (extra > 0 ? ` +${extra} more` : '');

  return (
    <div className="max-w-[280px] whitespace-nowrap overflow-hidden text-ellipsis">
      <HoverCard openDelay={150}>
        <HoverCardTrigger asChild>
          <span className="cursor-help">
            {label}
            {inline ? <> · {inline}</> : null}
          </span>
        </HoverCardTrigger>
        <HoverCardContent className="max-w-sm text-sm">
          <div className="font-medium mb-1">{label}</div>
          <div className="opacity-80 leading-relaxed">
            {row.items_full || brief || 'No items'}
          </div>
        </HoverCardContent>
      </HoverCard>
    </div>
  );
}
import { Skeleton } from '@/components/ui/skeleton';
import { formatMoney, getStoreCurrency } from '@/lib/currency';
import DateRange from '@/components/filters/DateRange';
import OrderBy from '@/components/filters/OrderBy';
import { setQuery, getQuery } from '@/lib/query-params';

const statusStyle: Record<string, string> = {
  pending: 'bg-amber-100 text-amber-800',
  processing: 'bg-blue-100 text-blue-800',
  completed: 'bg-emerald-100 text-emerald-800',
  'on-hold': 'bg-slate-200 text-slate-800',
  cancelled: 'bg-zinc-200 text-zinc-800',
  refunded: 'bg-purple-100 text-purple-800',
  failed: 'bg-rose-100 text-rose-800',
};

function StatusBadge({ value }: { value?: string }) {
  const v = (value || '').toLowerCase();
  const cls = statusStyle[v] || 'bg-slate-100 text-slate-800';
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium capitalize ${cls}`}>{v || 'unknown'}</span>
  );
}

export default function Orders() {
  useFABConfig('orders'); // Add FAB for creating orders
  const initial = getQuery();
  const [page, setPage] = useState(Number(initial.page ?? 1) || 1);
  const [status, setStatus] = useState<string | undefined>(initial.status || undefined);
  const [dateStart, setDateStart] = useState<string | undefined>(initial.date_start || undefined);
  const [dateEnd, setDateEnd] = useState<string | undefined>(initial.date_end || undefined);
  const [orderby, setOrderby] = useState<'date'|'id'|'modified'|'total'>((initial.orderby as any) || 'date');
  const [order, setOrder] = useState<'asc'|'desc'>((initial.order as any) || 'desc');
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const perPage = 20;

  React.useEffect(() => {
    setQuery({ page, status, date_start: dateStart, date_end: dateEnd, orderby, order });
  }, [page, status, dateStart, dateEnd, orderby, order]);

  const q = useQuery({
    queryKey: ['orders', { page, perPage, status, dateStart, dateEnd, orderby, order }],
    queryFn: () => api.get('/orders', {
      page, per_page: perPage,
      status,
      date_start: dateStart,
      date_end: dateEnd,
      orderby,
      order,
    }),
    placeholderData: keepPreviousData,
  });

  const data = q.data as undefined | { rows: any[]; total: number; page: number; per_page: number };
  const nav = useNavigate();
  const store = getStoreCurrency();

  // Bulk delete mutation
  const deleteMutation = useMutation({
    mutationFn: async (ids: number[]) => {
      const results = await Promise.allSettled(
        ids.map(id => api.del(`/orders/${id}`))
      );
      const failed = results.filter(r => r.status === 'rejected').length;
      return { total: ids.length, failed };
    },
    onSuccess: (result) => {
      const { total, failed } = result;
      if (failed === 0) {
        toast.success(__('Orders deleted successfully'));
      } else if (failed < total) {
        toast.warning(__(`${total - failed} orders deleted, ${failed} failed`));
      } else {
        toast.error(__('Failed to delete orders'));
      }
      setSelectedIds([]);
      setShowDeleteDialog(false);
      q.refetch();
    },
    onError: () => {
      toast.error(__('Failed to delete orders'));
      setShowDeleteDialog(false);
    },
  });

  // Checkbox handlers
  const allIds = data?.rows?.map(r => r.id) || [];
  const allSelected = allIds.length > 0 && selectedIds.length === allIds.length;
  const someSelected = selectedIds.length > 0 && selectedIds.length < allIds.length;

  const toggleAll = () => {
    if (allSelected) {
      setSelectedIds([]);
    } else {
      setSelectedIds(allIds);
    }
  };

  const toggleRow = (id: number) => {
    setSelectedIds(prev =>
      prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
    );
  };

  const handleDeleteClick = () => {
    if (selectedIds.length > 0) {
      setShowDeleteDialog(true);
    }
  };

  const confirmDelete = () => {
    deleteMutation.mutate(selectedIds);
  };

  return (
    <div className="space-y-4 w-[100%]">
      <div className="rounded-lg border border-border p-4 bg-card flex flex-col lg:flex-row lg:justify-between lg:items-center gap-3 w-full">
        <div className="flex gap-3 justify-between">
          <button className="border rounded-md px-3 py-2 text-sm bg-black text-white disabled:opacity-50" onClick={() => nav('/orders/new')}>
            {__('New order')}
          </button>
          {selectedIds.length > 0 && (
            <button
              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"
              onClick={handleDeleteClick}
              disabled={deleteMutation.isPending}
            >
              <Trash2 className="w-4 h-4" />
              {__('Delete')} ({selectedIds.length})
            </button>
          )}
          {/* Mobile: condensed Filters button with HoverCard */}
          <div className="flex items-center gap-2 lg:hidden">
            <HoverCard openDelay={0} closeDelay={100}>
              <HoverCardTrigger asChild>
                <button className="border rounded-md px-3 py-2 text-sm inline-flex items-center gap-2">
                  <Filter className="w-4 h-4" />
                  {__('Filters')}
                </button>
              </HoverCardTrigger>
              <HoverCardContent align="start" className="w-[calc(100vw-2rem)] mr-6 max-w-sm p-3 space-y-3">
                <div className="flex items-center gap-2">
                  <Select
                    value={status ?? 'all'}
                    onValueChange={(v) => {
                      setPage(1);
                      setStatus(v === 'all' ? undefined : (v as typeof status));
                    }}
                  >
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder={__('All statuses')} />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        <SelectItem value="all">{__('All statuses')}</SelectItem>
                        <SelectItem value="pending">{__('Pending')}</SelectItem>
                        <SelectItem value="processing">{__('Processing')}</SelectItem>
                        <SelectItem value="completed">{__('Completed')}</SelectItem>
                        <SelectItem value="on-hold">{__('On-hold')}</SelectItem>
                        <SelectItem value="cancelled">{__('Cancelled')}</SelectItem>
                        <SelectItem value="refunded">{__('Refunded')}</SelectItem>
                        <SelectItem value="failed">{__('Failed')}</SelectItem>
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </div>

                <DateRange
                  value={{ date_start: dateStart, date_end: dateEnd }}
                  onChange={(v) => { setPage(1); setDateStart(v.date_start); setDateEnd(v.date_end); }}
                />

                <OrderBy
                  value={{ orderby, order }}
                  onChange={(v) => {
                    setPage(1);
                    setOrderby((v.orderby ?? 'date') as 'date' | 'id' | 'modified' | 'total');
                    setOrder((v.order ?? 'desc') as 'asc' | 'desc');
                  }}
                />

                <div className="flex justify-between items-center">
                  {(status || dateStart || dateEnd || orderby !== 'date' || order !== 'desc') ? (
                    <button
                      className="rounded-md px-3 py-2 text-sm bg-red-500/10 text-red-600"
                      onClick={() => {
                        setStatus(undefined);
                        setDateStart(undefined);
                        setDateEnd(undefined);
                        setOrderby('date');
                        setOrder('desc');
                        setPage(1);
                      }}
                    >
                      {__('Reset')}
                    </button>
                  ) : <span />}
                  {q.isFetching && <span className="text-sm opacity-70">{__('Loading…')}</span>}
                </div>
              </HoverCardContent>
            </HoverCard>
          </div>
        </div>


        {/* Desktop: full inline filters */}
        <div className="hidden lg:flex gap-2 items-center">
          <div className="flex flex-wrap lg:flex-nowrap items-center gap-2">
            <Filter className="w-4 h-4 opacity-60" />
            <Select
              value={status ?? 'all'}
              onValueChange={(v) => {
                setPage(1);
                setStatus(v === 'all' ? undefined : (v as typeof status));
              }}
            >
              <SelectTrigger className="min-w-[140px]">
                <SelectValue placeholder={__('All statuses')} />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="all">{__('All statuses')}</SelectItem>
                  <SelectItem value="pending">{__('Pending')}</SelectItem>
                  <SelectItem value="processing">{__('Processing')}</SelectItem>
                  <SelectItem value="completed">{__('Completed')}</SelectItem>
                  <SelectItem value="on-hold">{__('On-hold')}</SelectItem>
                  <SelectItem value="cancelled">{__('Cancelled')}</SelectItem>
                  <SelectItem value="refunded">{__('Refunded')}</SelectItem>
                  <SelectItem value="failed">{__('Failed')}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>

            <DateRange
              value={{ date_start: dateStart, date_end: dateEnd }}
              onChange={(v) => { setPage(1); setDateStart(v.date_start); setDateEnd(v.date_end); }}
            />

            <OrderBy
              value={{ orderby, order }}
              onChange={(v) => {
                setPage(1);
                setOrderby((v.orderby ?? 'date') as 'date' | 'id' | 'modified' | 'total');
                setOrder((v.order ?? 'desc') as 'asc' | 'desc');
              }}
            />
            
          </div>
          {status && (
            <button
              className="rounded-md px-3 py-2 text-sm bg-red-500/10 text-red-600"
              onClick={() => {
                setStatus(undefined);
                setDateStart(undefined);
                setDateEnd(undefined);
                setOrderby('date');
                setOrder('desc');
                setPage(1);
              }}
            >
              {__('Reset')}
            </button>
          )}
          {q.isFetching && <span className="text-sm opacity-70">{__('Loading…')}</span>}
        </div>
      </div>

      <div className="rounded-lg border border-border bg-card overflow-auto">
        {q.isLoading && (
          <div className="p-4 space-y-2">
            {Array.from({ length: 10 }).map((_, i) => (
              <Skeleton key={i} className="w-full h-6" />
            ))}
          </div>
        )}

        {q.isError && (
          <ErrorCard
            title={__('Failed to load orders')}
            message={getPageLoadErrorMessage(q.error)}
            onRetry={() => q.refetch()}
          />
        )}

        {!q.isLoading && !q.isError && (
          <table className="min-w-[800px] w-full text-sm">
            <thead className="border-b">
              <tr className="text-left">
                <th className="px-3 py-2 w-12">
                  <Checkbox
                    checked={allSelected}
                    onCheckedChange={toggleAll}
                    aria-label={__('Select all')}
                    className={someSelected ? 'data-[state=checked]:bg-gray-400' : ''}
                  />
                </th>
                <th className="px-3 py-2">{__('Order')}</th>
                <th className="px-3 py-2">{__('Date')}</th>
                <th className="px-3 py-2">{__('Customer')}</th>
                <th className="px-3 py-2">{__('Items')}</th>
                <th className="px-3 py-2">{__('Status')}</th>
                <th className="px-3 py-2 text-right">{__('Total')}</th>
                <th className="px-3 py-2 text-center">{__('Actions')}</th>
              </tr>
            </thead>
            <tbody>
              {data?.rows?.map((row) => (
                <tr key={row.id} className="border-b last:border-0">
                  <td className="px-3 py-2">
                    <Checkbox
                      checked={selectedIds.includes(row.id)}
                      onCheckedChange={() => toggleRow(row.id)}
                      aria-label={__('Select order')}
                    />
                  </td>
                  <td className="px-3 py-2">
                    <Link className="underline underline-offset-2" to={`/orders/${row.id}`}>#{row.number}</Link>
                  </td>
                  <td className="px-3 py-2 min-w-32">
                    <span title={row.date ?? ""}>
                      {formatRelativeOrDate(row.date_ts)}
                    </span>
                  </td>
                  <td className="px-3 py-2">{row.customer || '—'}</td>
                  <td className="px-3 py-2">
                    <ItemsCell row={row} />
                  </td>
                  <td className="px-3 py-2"><StatusBadge value={row.status} /></td>
                  <td className="px-3 py-2 text-right tabular-nums font-mono">
                    {formatMoney(row.total, {
                      currency: row.currency || store.currency,
                      symbol: row.currency_symbol || store.symbol,
                      thousandSep: store.thousand_sep,
                      decimalSep: store.decimal_sep,
                      position: store.position,
                      decimals: store.decimals,
                    })}
                  </td>
                  <td className="px-3 py-2 text-center space-x-2">
                    <Link className="btn text-sm underline underline-offset-2" to={`/orders/${row.id}`}>{__('Open')}</Link>
                    <Link className="btn text-sm underline underline-offset-2" to={`/orders/${row.id}/edit`}>{__('Edit')}</Link>
                  </td>
                </tr>
              ))}

              {(!data || data.rows.length === 0) && (
                <tr>
                  <td className="px-3 py-12 text-center" colSpan={8}>
                    <div className="flex flex-col items-center gap-2">
                      <PackageOpen className="w-8 h-8 opacity-40" />
                      <div className="font-medium">{__('No orders found')}</div>
                      {status ? (
                        <p className="text-sm opacity-70">{__('Try adjusting filters.')}</p>
                      ) : (
                        <p className="text-sm opacity-70">{__('Once you receive orders, they\'ll show up here.')}</p>
                      )}
                    </div>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </div>

      <div className="flex items-center gap-2">
        <button
          className="border rounded-md px-3 py-2 text-sm disabled:opacity-50"
          disabled={page <= 1}
          onClick={() => setPage((p) => p - 1)}
        >
          {__('Previous')}
        </button>
        <div className="text-sm opacity-80">{__('Page')} {page}</div>
        <button
          className="border rounded-md px-3 py-2 text-sm disabled:opacity-50"
          disabled={!data || page * perPage >= data.total}
          onClick={() => setPage((p) => p + 1)}
        >
          {__('Next')}
        </button>
      </div>

      {/* Delete Confirmation Dialog */}
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{__('Delete Orders')}</AlertDialogTitle>
            <AlertDialogDescription>
              {__('Are you sure you want to delete')} {selectedIds.length} {selectedIds.length === 1 ? __('order') : __('orders')}?
              <br />
              <span className="text-red-600 font-medium">{__('This action cannot be undone.')}</span>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel
              onClick={() => setShowDeleteDialog(false)}
              disabled={deleteMutation.isPending}
            >
              {__('Cancel')}
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmDelete}
              disabled={deleteMutation.isPending}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {deleteMutation.isPending ? __('Deleting...') : __('Delete')}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}