import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { supabase } from '@/integrations/supabase/client';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Plus, Search, Sparkles } from 'lucide-react';
import { format } from 'date-fns';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { usePoMatchSummaries, MATCH_STATUS_LABEL, MATCH_STATUS_COLOR } from '@/hooks/useVendorInvoices';

const STATUS_COLORS: Record<string, string> = {
  draft: 'bg-muted text-muted-foreground',
  sent: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
  confirmed: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
  partially_received: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
  received: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
  cancelled: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
};

const STATUS_LABELS: Record<string, string> = {
  draft: 'Draft',
  sent: 'Sent',
  confirmed: 'Confirmed',
  partially_received: 'Partial',
  received: 'Received',
  cancelled: 'Cancelled',
};

interface Props {
  onEdit: (id: string) => void;
  onNew: () => void;
}

export function PurchaseOrdersList({ onEdit, onNew }: Props) {
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');

  const { data: orders = [], isLoading } = useQuery({
    queryKey: ['purchase-orders'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('purchase_orders')
        .select('*, vendors(name)')
        .order('created_at', { ascending: false });
      if (error) throw error;
      return data;
    },
  });

  const filtered = orders.filter(o => {
    if (statusFilter !== 'all' && o.status !== statusFilter) return false;
    if (search) {
      const q = search.toLowerCase();
      return o.po_number.toLowerCase().includes(q) ||
        (o.vendors as any)?.name?.toLowerCase().includes(q);
    }
    return true;
  });

  const { data: matchSummaries = [] } = usePoMatchSummaries(filtered.map(o => o.id));
  const summaryMap = new Map(matchSummaries.map(s => [s.purchase_order_id, s]));

  const formatCurrency = (cents: number, currency: string) =>
    new Intl.NumberFormat('sv-SE', { style: 'currency', currency }).format(cents / 100);

  return (
    <TooltipProvider>
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input placeholder="Search PO#, vendor..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9" />
        </div>
        <Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-40"><SelectValue placeholder="Status" /></SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All statuses</SelectItem>
            {Object.entries(STATUS_LABELS).map(([k, v]) => (
              <SelectItem key={k} value={k}>{v}</SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Button onClick={onNew}><Plus className="h-4 w-4 mr-2" /> New PO</Button>
      </div>

      <div className="border rounded-lg">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>PO #</TableHead>
              <TableHead>Vendor</TableHead>
              <TableHead>Date</TableHead>
              <TableHead>Expected</TableHead>
              <TableHead>Total</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Invoicing</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {isLoading ? (
              <TableRow><TableCell colSpan={7} className="text-center py-8 text-muted-foreground">Loading...</TableCell></TableRow>
            ) : filtered.length === 0 ? (
              <TableRow><TableCell colSpan={7} className="text-center py-8 text-muted-foreground">No purchase orders found</TableCell></TableRow>
            ) : filtered.map((o) => {
              const sum = summaryMap.get(o.id);
              return (
              <TableRow key={o.id} className="cursor-pointer hover:bg-muted/50" onClick={() => onEdit(o.id)}>
                <TableCell className="font-mono font-medium">{o.po_number}</TableCell>
                <TableCell>{(o.vendors as any)?.name || '—'}</TableCell>
                <TableCell>{format(new Date(o.order_date), 'yyyy-MM-dd')}</TableCell>
                <TableCell>{o.expected_delivery ? format(new Date(o.expected_delivery), 'yyyy-MM-dd') : '—'}</TableCell>
                <TableCell>{formatCurrency(o.total_cents, o.currency)}</TableCell>
                <TableCell>
                  <Badge className={STATUS_COLORS[o.status] || ''}>
                    {STATUS_LABELS[o.status] || o.status}
                  </Badge>
                </TableCell>
                <TableCell>
                  {!sum ? (
                    <span className="text-xs text-muted-foreground">No invoice</span>
                  ) : (
                    <div className="flex items-center gap-1.5">
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Badge className={sum.worst_status ? MATCH_STATUS_COLOR[sum.worst_status] : ''}>
                            {sum.worst_status ? MATCH_STATUS_LABEL[sum.worst_status] : '—'}
                          </Badge>
                        </TooltipTrigger>
                        <TooltipContent>
                          {sum.invoice_count} invoice(s) · {sum.matched_count} matched · {sum.approved_count} approved
                        </TooltipContent>
                      </Tooltip>
                      {sum.approved_count > 0 && (
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Sparkles className="h-3.5 w-3.5 text-emerald-600" />
                          </TooltipTrigger>
                          <TooltipContent>{sum.approved_count} auto/approved invoice(s)</TooltipContent>
                        </Tooltip>
                      )}
                    </div>
                  )}
                </TableCell>
              </TableRow>
            );})}
          </TableBody>
        </Table>
      </div>
    </div>
    </TooltipProvider>
  );
}
