import { useEffect, useState } from 'react';
import { orderBookingClient } from '../../api/clients';
import { ORDER_BOOKING } from '../../api/config';
import { RecordView } from './RecordView';
import { OrderCard } from '../cards/OrderCard';
import { StatsTiles } from '../reusable/StatsTiles';
import type { TileItem } from '../../api/types';

export interface WiredRecordViewProps {
  onRowClick?: (row: Record<string, unknown>, index: number) => void;
  pageSize?: number;
  headerActions?: React.ReactNode;
  rowActions?: (row: Record<string, unknown>) => React.ReactNode;
  refreshKey?: number;
}

/** Orders record view (Order Booking workflow). */
export function OrdersView({ onRowClick, pageSize, headerActions, rowActions, refreshKey }: WiredRecordViewProps) {
  const [analyticsTiles, setAnalyticsTiles] = useState<TileItem[]>([]);

  useEffect(() => {
    let live = true;
    
    // Defer the fetch so it doesn't compete with the main list fetch
    const timer = setTimeout(async () => {
      try {
        const res = await orderBookingClient.recordView(ORDER_BOOKING.recordViews.ANALYTICS_ORDERS, { limit: 0 });
        if (live && res.tile_values) {
          const filteredTiles = (res.tile_values as TileItem[]).filter(
            (t) => t.key !== 'total_orders' && t.key !== 'total_orders_count'
          );
          setAnalyticsTiles(filteredTiles);
        }
      } catch (e) {
        console.error("Failed to load analytics tiles for orders", e);
      }
    }, 100);

    return () => { live = false; clearTimeout(timer); };
  }, [refreshKey]);

  return (
    <div className="flex flex-col gap-5 w-full">
      {analyticsTiles.length > 0 && <StatsTiles tiles={analyticsTiles} />}
      <RecordView
        client={orderBookingClient}
        rvUid={ORDER_BOOKING.recordViews.ORDERS}
        title="Orders"
        onRowClick={onRowClick}
        pageSize={pageSize}
        headerActions={headerActions}
        rowActions={rowActions}
        refreshKey={refreshKey}
        sortBy="instance_id"
        sortDir="desc"
        renderItem={(row, fields) => <OrderCard row={row} fields={fields} />}
      />
    </div>
  );
}