import { Fragment, type FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { ArrowLeft, CalendarDays, CheckCircle2, ClipboardList, Clock3, Download, PackageCheck, Search } from 'lucide-react';
import DateRangePicker from '../components/DateRangePicker';
import PaginationControls from '../components/PaginationControls';
import RefreshStatus from '../components/RefreshStatus';
import { consumeSupplyLotForProduction, exportToCSV, fetchProductionOrders, fetchSupplySummary, updateProductionOrderStatus } from '../dataService';
import type { DateRange, ProductionOrderItem, ProductionOrderStatus, ProductionOrderSummary, SupplyLot } from '../types';

type ProductionOrderStatusTab = 'all' | 'open' | 'in_progress' | 'finished' | 'canceled';

const emptySummary: ProductionOrderSummary = {
  orders: [],
  counts: { all: 0, open: 0, in_progress: 0, finished: 0, canceled: 0 }
};

const statusTabs: Array<{ key: ProductionOrderStatusTab; label: string; dotClass: string }> = [
  { key: 'all', label: 'Todas', dotClass: 'bg-dark-muted' },
  { key: 'open', label: 'Em aberto', dotClass: 'bg-amber-400' },
  { key: 'in_progress', label: 'Em andamento', dotClass: 'bg-sky-400' },
  { key: 'finished', label: 'Finalizada', dotClass: 'bg-emerald-400' },
  { key: 'canceled', label: 'Cancelada', dotClass: 'bg-zinc-500' }
];

const editableStatusOptions: Array<{ value: ProductionOrderStatusTab; label: string }> = statusTabs
  .filter(tab => tab.key !== 'all')
  .map(tab => ({ value: tab.key, label: tab.label }));

const statusStyles: Record<string, { label: string; className: string; dotClass: string }> = {
  open: {
    label: 'Em aberto',
    className: 'border-amber-400/35 bg-amber-400/10 text-amber-300',
    dotClass: 'bg-amber-400'
  },
  in_progress: {
    label: 'Em andamento',
    className: 'border-sky-400/35 bg-sky-400/10 text-sky-300',
    dotClass: 'bg-sky-400'
  },
  finished: {
    label: 'Finalizada',
    className: 'border-emerald-400/35 bg-emerald-400/10 text-emerald-300',
    dotClass: 'bg-emerald-400'
  },
  canceled: {
    label: 'Cancelada',
    className: 'border-zinc-500/35 bg-zinc-500/10 text-zinc-400',
    dotClass: 'bg-zinc-500'
  }
};

const formatDate = (date: string | null) => {
  if (!date) return '-';
  const parsedDate = new Date(`${date}T00:00:00`);
  if (Number.isNaN(parsedDate.getTime())) return date;
  return new Intl.DateTimeFormat('pt-BR').format(parsedDate);
};

const formatQuantity = (value: number) => (
  new Intl.NumberFormat('pt-BR', {
    minimumFractionDigits: Number.isInteger(value) ? 0 : 2,
    maximumFractionDigits: 4
  }).format(value)
);

const formatOptionalQuantity = (value: number | null) => (
  value === null ? '-' : formatQuantity(value)
);

const hasProductionOrderDetails = (order: ProductionOrderItem) => (
  order.components.length > 0 ||
  order.steps.length > 0 ||
  Boolean(order.notes || order.supplier || order.lotCode || order.rollQuantity || order.fabricKg || order.ribKg || order.yieldPiecesPerKg)
);

const getStatusStyle = (status: ProductionOrderStatus, fallbackLabel: string) => (
  statusStyles[String(status)] || {
    label: fallbackLabel || 'Em aberto',
    className: 'border-dark-border bg-dark-input text-dark-muted',
    dotClass: 'bg-dark-muted'
  }
);

const ProductionOrdersSkeleton = () => (
  <div className="space-y-6" aria-label="Carregando ordens de produção">
    <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
      {[0, 1, 2, 3].map(item => (
        <div key={`production-kpi-skeleton-${item}`} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
          <div className="skeleton h-3 w-28" />
          <div className="skeleton mt-3 h-8 w-20" />
          <div className="skeleton mt-3 h-3 w-36" />
        </div>
      ))}
    </div>

    <div className="rounded-2xl border border-dark-border bg-dark-card shadow-sm">
      <div className="border-b border-dark-border p-5">
        <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
          <div className="skeleton h-10 w-full max-w-xl" />
          <div className="flex gap-3">
            <div className="skeleton h-10 w-32" />
            <div className="skeleton h-10 w-28" />
          </div>
        </div>
        <div className="mt-5 flex gap-4">
          {[0, 1, 2, 3, 4].map(item => (
            <div key={`production-tab-skeleton-${item}`} className="skeleton h-8 w-28" />
          ))}
        </div>
      </div>
      <div className="divide-y divide-dark-border">
        {[0, 1, 2, 3, 4, 5, 6, 7].map(row => (
          <div key={`production-row-skeleton-${row}`} className="grid grid-cols-[90px_120px_120px_1.5fr_110px_180px_110px] gap-5 px-6 py-4">
            {[0, 1, 2, 3, 4, 5, 6].map(column => (
              <div key={`production-cell-skeleton-${row}-${column}`} className="skeleton h-4" />
            ))}
          </div>
        ))}
      </div>
    </div>
  </div>
);

const ProductionOrders = () => {
  const { dateRange, setDateRange, refreshInterval, setRefreshInterval } = useOutletContext<{
    dateRange: DateRange;
    setDateRange: (range: DateRange) => void;
    refreshInterval: number;
    setRefreshInterval: (interval: number) => void;
  }>();
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<ProductionOrderStatusTab>('all');
  const [summary, setSummary] = useState<ProductionOrderSummary>(emptySummary);
  const [supplyLots, setSupplyLots] = useState<SupplyLot[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isSupplyBusy, setIsSupplyBusy] = useState(false);
  const [supplyMessage, setSupplyMessage] = useState('');
  const [busyStatusOrderId, setBusyStatusOrderId] = useState<number | null>(null);
  const [statusMessage, setStatusMessage] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(20);
  const [exitForm, setExitForm] = useState({
    orderId: '',
    lotId: '',
    quantity: '',
    reason: '',
  });

  const loadProductionOrders = useCallback(async (options?: { force?: boolean }) => {
    setIsLoading(true);
    const nextSummary = await fetchProductionOrders(dateRange, { search: searchTerm }, options);
    setSummary(nextSummary);
    setIsLoading(false);
  }, [dateRange, searchTerm]);

  useEffect(() => {
    let isMounted = true;

    const load = async () => {
      setIsLoading(true);
      const [nextSummary, nextSupplySummary] = await Promise.all([
        fetchProductionOrders(dateRange, { search: searchTerm }),
        fetchSupplySummary()
      ]);
      if (isMounted) {
        setSummary(nextSummary);
        setSupplyLots(nextSupplySummary.lots);
        setIsLoading(false);
      }
    };

    void load();

    return () => {
      isMounted = false;
    };
  }, [dateRange, searchTerm]);

  useEffect(() => {
    if (refreshInterval === 0) return undefined;

    const intervalId = setInterval(() => {
      void loadProductionOrders({ force: true });
    }, refreshInterval);

    return () => clearInterval(intervalId);
  }, [loadProductionOrders, refreshInterval]);

  const filteredOrders = useMemo(() => {
    if (statusFilter === 'all') return summary.orders;
    return summary.orders.filter(order => order.status === statusFilter);
  }, [statusFilter, summary.orders]);

  const totalPages = Math.ceil(filteredOrders.length / itemsPerPage);
  const safeCurrentPage = Math.min(currentPage, totalPages || 1);
  const startIndex = (safeCurrentPage - 1) * itemsPerPage;
  const paginatedOrders = filteredOrders.slice(startIndex, startIndex + itemsPerPage);
  const isRefreshing = isLoading && summary.orders.length > 0;

  const openCount = summary.counts.open || 0;
  const progressCount = summary.counts.in_progress || 0;
  const finishedCount = summary.counts.finished || 0;
  const totalQuantity = summary.orders.reduce((total, order) => total + order.quantity, 0);
  const activeOrders = summary.orders.filter(order => order.status !== 'finished' && order.status !== 'canceled');

  const handleManualRefresh = () => {
    void loadProductionOrders({ force: true });
  };

  const handleStatusChange = async (order: ProductionOrderItem, status: ProductionOrderStatusTab) => {
    if (status === 'all' || status === order.status) return;

    setBusyStatusOrderId(order.id);
    setStatusMessage('');
    try {
      await updateProductionOrderStatus(order.id, status);
      const nextSummary = await fetchProductionOrders(dateRange, { search: searchTerm }, { force: true });
      setSummary(nextSummary);
      setStatusMessage(`OP ${order.number || `#${order.id}`} atualizada para ${statusStyles[status]?.label || status}.`);
    } catch (error) {
      setStatusMessage(error instanceof Error ? error.message : 'Não foi possível atualizar o status da OP.');
    } finally {
      setBusyStatusOrderId(null);
    }
  };

  const refreshSupplyLots = async () => {
    const supplySummary = await fetchSupplySummary();
    setSupplyLots(supplySummary.lots);
  };

  const selectedOrder = summary.orders.find(order => `${order.id}` === exitForm.orderId);
  const selectedLot = supplyLots.find(lot => `${lot.id}` === exitForm.lotId);

  const handleProductionExit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const lotId = Number(exitForm.lotId);
    const quantity = Number(exitForm.quantity.replace(',', '.'));
    if (!lotId || !selectedOrder || !Number.isFinite(quantity) || quantity <= 0) return;

    setIsSupplyBusy(true);
    setSupplyMessage('');
    try {
      await consumeSupplyLotForProduction(lotId, {
        quantity,
        productionOrderNumber: selectedOrder.number || `${selectedOrder.id}`,
        reason: exitForm.reason.trim() || selectedOrder.productDescription,
      });
      await refreshSupplyLots();
      setExitForm({ orderId: '', lotId: '', quantity: '', reason: '' });
      setSupplyMessage('Saída de material registrada no estoque.');
    } catch (error) {
      setSupplyMessage(error instanceof Error ? error.message : 'Não foi possível baixar o material.');
    } finally {
      setIsSupplyBusy(false);
    }
  };

  const handleExport = () => {
    const exportData = filteredOrders.map(order => ({
      'Numero': order.number,
      'Pedidos': order.orderReference,
      'Status': order.statusLabel,
      'Data': formatDate(order.issueDate),
      'Data Prevista': formatDate(order.expectedDate),
      'SKU': order.productSku,
      'Descricao': order.productDescription,
      'Quantidade': formatQuantity(order.quantity),
      'Unidade': order.unit,
      'Marcadores': order.markers.map(marker => marker.label).join('; '),
      'Integracao': order.integrationStatus
    }));
    exportToCSV(exportData, `ordens_producao_${new Date().toISOString().split('T')[0]}.csv`);
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
        <div>
          <Link to="/supplies" className="mb-3 inline-flex items-center gap-2 text-sm font-bold text-dark-muted transition-colors hover:text-dark-text">
            <ArrowLeft className="h-4 w-4" />
            Suprimentos
          </Link>
          <h1 className="text-2xl font-bold text-dark-text">Ordens de Produção</h1>
          <p className="mt-2 text-dark-muted font-medium">Acompanhe as ordens locais geradas pelo plano de corte.</p>
        </div>
        <DateRangePicker
          dateRange={dateRange}
          onChange={(range) => {
            setDateRange(range);
            setCurrentPage(1);
          }}
          refreshInterval={refreshInterval}
          setRefreshInterval={setRefreshInterval}
          onManualRefresh={handleManualRefresh}
        />
      </div>

      <RefreshStatus isRefreshing={isRefreshing} />

      {isLoading && !summary.orders.length ? (
        <ProductionOrdersSkeleton />
      ) : (
        <div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
            <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Total no período</p>
                  <p className="mt-2 text-3xl font-bold text-dark-text">{summary.counts.all}</p>
                  <p className="mt-1 text-xs font-semibold text-dark-muted">Ordens cadastradas</p>
                </div>
                <div className="rounded-xl border border-sky-400/25 bg-sky-400/10 p-3 text-sky-300">
                  <ClipboardList className="h-5 w-5" />
                </div>
              </div>
            </div>
            <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Em aberto</p>
                  <p className="mt-2 text-3xl font-bold text-amber-300">{openCount}</p>
                  <p className="mt-1 text-xs font-semibold text-dark-muted">Aguardando produção</p>
                </div>
                <div className="rounded-xl border border-amber-400/25 bg-amber-400/10 p-3 text-amber-300">
                  <Clock3 className="h-5 w-5" />
                </div>
              </div>
            </div>
            <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Em andamento</p>
                  <p className="mt-2 text-3xl font-bold text-sky-300">{progressCount}</p>
                  <p className="mt-1 text-xs font-semibold text-dark-muted">Em processo</p>
                </div>
                <div className="rounded-xl border border-sky-400/25 bg-sky-400/10 p-3 text-sky-300">
                  <PackageCheck className="h-5 w-5" />
                </div>
              </div>
            </div>
            <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Finalizadas</p>
                  <p className="mt-2 text-3xl font-bold text-emerald-300">{finishedCount}</p>
                  <p className="mt-1 text-xs font-semibold text-dark-muted">{formatQuantity(totalQuantity)} un. no período</p>
                </div>
                <div className="rounded-xl border border-emerald-400/25 bg-emerald-400/10 p-3 text-emerald-300">
                  <CheckCircle2 className="h-5 w-5" />
                </div>
              </div>
            </div>
          </div>

          {activeOrders.length > 0 && (
          <form onSubmit={handleProductionExit} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
            <div className="flex flex-col gap-2 lg:flex-row lg:items-start lg:justify-between">
              <div>
                <h2 className="text-base font-bold text-dark-text">Baixa de material da OP</h2>
                <p className="mt-1 text-sm font-semibold text-dark-muted">Consome um lote do estoque e registra a saída nas movimentações.</p>
              </div>
              {selectedLot && (
                <span className="w-fit rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-muted">
                  Saldo lote #{selectedLot.id}: {formatQuantity(selectedLot.quantity)} {selectedLot.unit}
                </span>
              )}
            </div>
            <div className="mt-4 grid grid-cols-1 gap-3 xl:grid-cols-[1.4fr_1.4fr_120px_1fr_auto]">
              <label className="text-xs font-bold text-dark-muted">
                Ordem de produção
                <select
                  value={exitForm.orderId}
                  onChange={(event) => setExitForm(current => ({ ...current, orderId: event.target.value }))}
                  className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none focus:border-brand-primary"
                >
                  <option value="">Selecione...</option>
                  {activeOrders.map(order => (
                    <option key={order.id} value={order.id}>
                      {order.number || `#${order.id}`} · {order.productDescription}
                    </option>
                  ))}
                </select>
              </label>
              <label className="text-xs font-bold text-dark-muted">
                Lote de material
                <select
                  value={exitForm.lotId}
                  onChange={(event) => setExitForm(current => ({ ...current, lotId: event.target.value }))}
                  className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none focus:border-brand-primary"
                >
                  <option value="">Selecione...</option>
                  {supplyLots.map(lot => (
                    <option key={lot.id} value={lot.id}>
                      #{lot.id} · {lot.product} · {formatQuantity(lot.quantity)} {lot.unit}
                    </option>
                  ))}
                </select>
              </label>
              <label className="text-xs font-bold text-dark-muted">
                Quantidade
                <input
                  inputMode="decimal"
                  value={exitForm.quantity}
                  onChange={(event) => setExitForm(current => ({ ...current, quantity: event.target.value }))}
                  className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary"
                  placeholder="kg"
                />
              </label>
              <label className="text-xs font-bold text-dark-muted">
                Motivo
                <input
                  value={exitForm.reason}
                  onChange={(event) => setExitForm(current => ({ ...current, reason: event.target.value }))}
                  className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary"
                  placeholder="ex: corte do pedido"
                />
              </label>
              <button
                type="submit"
                disabled={isSupplyBusy || !supplyLots.length}
                className="mt-5 inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50"
              >
                <PackageCheck className="h-4 w-4 text-brand-primary" />
                Baixar
              </button>
            </div>
            {supplyMessage && (
              <div className="mt-3 rounded-lg border border-dark-border bg-dark-input px-3 py-2 text-sm font-bold text-dark-muted">
                {supplyMessage}
              </div>
            )}
          </form>
          )}

          <div className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
            <div className="border-b border-dark-border p-5">
              {statusMessage && (
                <div className="mb-4 rounded-xl border border-dark-border bg-dark-input px-3 py-2 text-sm font-bold text-dark-muted">
                  {statusMessage}
                </div>
              )}
              <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
                <div className="relative w-full xl:max-w-xl">
                  <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-dark-muted" />
                  <input
                    type="text"
                    value={searchTerm}
                    placeholder="Pesquise pelo produto, SKU ou número da ordem"
                    onChange={(event) => {
                      setSearchTerm(event.target.value);
                      setCurrentPage(1);
                    }}
                    className="w-full rounded-xl border border-dark-border bg-dark-input py-2.5 pl-10 pr-4 text-sm font-semibold text-dark-text shadow-sm transition-colors placeholder:text-dark-muted focus:border-brand-primary focus:outline-none"
                  />
                </div>
                <div className="flex flex-wrap gap-3">
                  <button
                    type="button"
                    onClick={handleExport}
                    disabled={!filteredOrders.length}
                    className="inline-flex h-10 items-center gap-2 rounded-xl border border-dark-border bg-dark-input px-4 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50"
                  >
                    <Download className="h-4 w-4 text-brand-primary" />
                    Exportar
                  </button>
                </div>
              </div>

              <div className="mt-5 flex gap-5 overflow-x-auto border-b border-dark-border/70 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                {statusTabs.map(tab => {
                  const isActive = statusFilter === tab.key;
                  const count = summary.counts[tab.key] || 0;
                  return (
                    <button
                      key={tab.key}
                      type="button"
                      onClick={() => {
                        setStatusFilter(tab.key);
                        setCurrentPage(1);
                      }}
                      className={`relative flex min-w-24 cursor-pointer flex-col items-start pb-3 text-left transition-colors ${
                        isActive ? 'text-dark-text' : 'text-dark-muted hover:text-dark-text'
                      }`}
                    >
                      <span className="flex items-center gap-2 text-xs font-bold">
                        {tab.key !== 'all' && <span className={`h-1.5 w-1.5 rounded-full ${tab.dotClass}`} />}
                        {tab.label}
                      </span>
                      <span className="mt-1 text-sm font-bold">{count}</span>
                      {isActive && <span className="absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-brand-primary" />}
                    </button>
                  );
                })}
              </div>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full min-w-[1180px] text-left text-sm">
                <thead className="border-b border-dark-border bg-dark-header text-dark-muted">
                  <tr>
                    <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Número</th>
                    <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Pedidos</th>
                    <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Data</th>
                    <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Data Prevista</th>
                    <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">SKU / Produto</th>
                    <th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Quantidade</th>
                    <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Marcadores</th>
                    <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Integrações</th>
                    <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Status</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-dark-border">
                  {paginatedOrders.map((order: ProductionOrderItem) => {
                    const statusStyle = getStatusStyle(order.status, order.statusLabel);
                    const showDetails = hasProductionOrderDetails(order);
                    return (
                      <Fragment key={order.id}>
                        <tr className="transition-colors hover:bg-dark-input/50">
                          <td className="px-6 py-3 font-mono text-xs font-bold text-dark-text">{order.number || '-'}</td>
                          <td className="px-6 py-3 text-xs font-semibold text-dark-muted">{order.orderReference || '-'}</td>
                          <td className="px-6 py-3 text-xs font-semibold text-dark-muted">
                            <span className="inline-flex items-center gap-1.5">
                              <CalendarDays className="h-3.5 w-3.5" />
                              {formatDate(order.issueDate)}
                            </span>
                          </td>
                          <td className="px-6 py-3 text-xs font-semibold text-dark-muted">{formatDate(order.expectedDate)}</td>
                          <td className="px-6 py-3">
                            <div className="font-bold text-dark-text">{order.productDescription}</div>
                            <div className="mt-1 font-mono text-[10px] font-semibold text-dark-muted">{order.productSku || 'Sem SKU'}</div>
                          </td>
                          <td className="px-6 py-3 text-right">
                            <span className="font-bold text-dark-text">{formatQuantity(order.quantity)}</span>
                            <span className="ml-1 text-xs font-semibold text-dark-muted">{order.unit}</span>
                          </td>
                          <td className="px-6 py-3">
                            {order.markers.length ? (
                              <div className="flex max-w-52 flex-wrap gap-1.5">
                                {order.markers.map(marker => (
                                  <span
                                    key={`${order.id}-${marker.label}`}
                                    className="inline-flex items-center gap-1 rounded-full border border-dark-border bg-dark-input px-2 py-0.5 text-[10px] font-bold text-dark-muted"
                                  >
                                    <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: marker.color || 'var(--color-dark-muted)' }} />
                                    {marker.label}
                                  </span>
                                ))}
                              </div>
                            ) : (
                              <span className="text-xs font-semibold text-dark-muted">-</span>
                            )}
                          </td>
                          <td className="px-6 py-3">
                            <span className="inline-flex items-center gap-2 text-xs font-semibold text-dark-muted">
                              <span className="h-2 w-2 rounded-full bg-sky-400" />
                              {order.integrationStatus || 'Tiny'}
                            </span>
                          </td>
                          <td className="px-6 py-3">
                            <label className="sr-only" htmlFor={`production-order-status-${order.id}`}>Status da OP</label>
                            <select
                              id={`production-order-status-${order.id}`}
                              value={order.status}
                              disabled={busyStatusOrderId === order.id}
                              onChange={(event) => void handleStatusChange(order, event.target.value as ProductionOrderStatusTab)}
                              className={`h-8 rounded-lg border bg-dark-input px-2 text-[10px] font-bold uppercase tracking-wide outline-none transition-colors focus:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 ${statusStyle.className}`}
                            >
                              {editableStatusOptions.map(option => (
                                <option key={option.value} value={option.value}>{option.label}</option>
                              ))}
                            </select>
                          </td>
                        </tr>
                        {showDetails && (
                          <tr className="bg-dark-input/20">
                            <td colSpan={9} className="px-6 pb-5 pt-1">
                              <div className="grid grid-cols-1 gap-4 rounded-xl border border-dark-border bg-dark-card/80 p-4 xl:grid-cols-[1.4fr_1fr_1fr]">
                                <div>
                                  <h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Composição</h3>
                                  {order.components.length ? (
                                    <div className="mt-3 overflow-hidden rounded-lg border border-dark-border">
                                      <table className="w-full text-xs">
                                        <thead className="bg-dark-header text-dark-muted">
                                          <tr>
                                            <th className="px-3 py-2 text-left font-bold">Produto</th>
                                            <th className="px-3 py-2 text-left font-bold">SKU</th>
                                            <th className="px-3 py-2 text-right font-bold">Qtd.</th>
                                            <th className="px-3 py-2 text-right font-bold">Total</th>
                                          </tr>
                                        </thead>
                                        <tbody className="divide-y divide-dark-border">
                                          {order.components.map(component => (
                                            <tr key={component.id}>
                                              <td className="px-3 py-2 font-semibold text-dark-text">{component.componentName}</td>
                                              <td className="px-3 py-2 font-mono text-dark-muted">{component.componentSku || '-'}</td>
                                              <td className="px-3 py-2 text-right font-semibold text-dark-muted">{formatQuantity(component.quantityPerUnit)} {component.unit}</td>
                                              <td className="px-3 py-2 text-right font-bold text-dark-text">{formatQuantity(component.totalQuantity)} {component.unit}</td>
                                            </tr>
                                          ))}
                                        </tbody>
                                      </table>
                                    </div>
                                  ) : (
                                    <p className="mt-3 text-xs font-semibold text-dark-muted">Sem composição sincronizada.</p>
                                  )}
                                </div>

                                <div>
                                  <h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Etapas</h3>
                                  {order.steps.length ? (
                                    <div className="mt-3 divide-y divide-dark-border rounded-lg border border-dark-border">
                                      {order.steps.map(step => (
                                        <div key={step.id} className="grid grid-cols-[32px_1fr_auto] items-center gap-3 px-3 py-2 text-xs">
                                          <span className="font-mono font-bold text-dark-muted">{step.stepNumber ?? '-'}</span>
                                          <div>
                                            <p className="font-bold text-dark-text">{step.name}</p>
                                            <p className="mt-0.5 font-semibold text-dark-muted">{formatDate(step.startDate)} - {formatDate(step.endDate)}</p>
                                          </div>
                                          <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: step.color || 'var(--color-brand-primary)' }} title={step.status || 'Sem status'} />
                                        </div>
                                      ))}
                                    </div>
                                  ) : (
                                    <p className="mt-3 text-xs font-semibold text-dark-muted">Sem etapas sincronizadas.</p>
                                  )}
                                </div>

                                <div>
                                  <h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Observações</h3>
                                  <dl className="mt-3 grid grid-cols-2 gap-2 text-xs">
                                    <div><dt className="font-bold text-dark-muted">Fornecedor</dt><dd className="mt-0.5 font-semibold text-dark-text">{order.supplier || '-'}</dd></div>
                                    <div><dt className="font-bold text-dark-muted">Lote</dt><dd className="mt-0.5 font-semibold text-dark-text">{order.lotCode || '-'}</dd></div>
                                    <div><dt className="font-bold text-dark-muted">Rolos</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.rollQuantity)}</dd></div>
                                    <div><dt className="font-bold text-dark-muted">Malha kg</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.fabricKg)}</dd></div>
                                    <div><dt className="font-bold text-dark-muted">Ribana kg</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.ribKg)}</dd></div>
                                    <div><dt className="font-bold text-dark-muted">Rendimento</dt><dd className="mt-0.5 font-semibold text-dark-text">{formatOptionalQuantity(order.yieldPiecesPerKg)}</dd></div>
                                  </dl>
                                  {order.notes && <p className="mt-3 whitespace-pre-wrap rounded-lg border border-dark-border bg-dark-input p-3 text-xs font-semibold text-dark-muted">{order.notes}</p>}
                                </div>
                              </div>
                            </td>
                          </tr>
                        )}
                      </Fragment>
                    );
                  })}
                </tbody>
              </table>
            </div>

            {!filteredOrders.length && (
              <div className="flex min-h-64 flex-col items-center justify-center border-t border-dark-border px-6 py-10 text-center">
                <div className="rounded-2xl border border-dark-border bg-dark-input p-4 text-brand-primary">
                  <ClipboardList className="h-7 w-7" />
                </div>
                <p className="mt-4 text-sm font-bold text-dark-text">Nenhuma ordem de produção encontrada.</p>
                <p className="mt-1 max-w-md text-sm font-medium text-dark-muted">
                  Gere ordens pelo Plano de Corte para acompanhar status, produto, quantidade e baixa de material dentro do Graphs.
                </p>
                <Link
                  to="/cutting"
                  className="mt-5 inline-flex h-10 items-center gap-2 rounded-lg border border-brand-primary/35 bg-brand-primary/10 px-4 text-sm font-bold text-brand-primary transition-colors hover:bg-brand-primary/20"
                >
                  <ClipboardList className="h-4 w-4" />
                  Ir para Plano de Corte
                </Link>
              </div>
            )}

            <PaginationControls
              totalItems={filteredOrders.length}
              currentPage={safeCurrentPage}
              totalPages={totalPages}
              pageSize={itemsPerPage}
              pageSizeOptions={[10, 20, 50, 100]}
              itemLabel="ordens"
              pageSizeLabel="ordens por página"
              startIndex={startIndex}
              endIndex={Math.min(startIndex + itemsPerPage, filteredOrders.length)}
              onPageChange={setCurrentPage}
              onPageSizeChange={(pageSize) => {
                setItemsPerPage(pageSize);
                setCurrentPage(1);
              }}
            />
          </div>
        </div>
      )}
    </div>
  );
};

export default ProductionOrders;