'use client';

import { useState } from 'react';
import Box from '@mui/material/Box';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import ListAltIcon from '@mui/icons-material/ListAlt';
import InventoryIcon from '@mui/icons-material/Inventory';
import InfoIcon from '@mui/icons-material/Info';
import TimelineIcon from '@mui/icons-material/Timeline';
import ContentCutIcon from '@mui/icons-material/ContentCut';
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
import MoveToInboxIcon from '@mui/icons-material/MoveToInbox';
import TvIcon from '@mui/icons-material/Tv';
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
import { TabPanel } from '@/shared/components';
import { OrderItemsTable } from './tabs/OrderItemsTable';
import { PreBoxPanel } from './tabs/PreBoxPanel';
import { InformationPanel } from './tabs/InformationPanel';
import { TimelinePanel } from './tabs/TimelinePanel';
import { CuttingPanel } from './tabs/CuttingPanel';
import { DeliveryPanel } from './tabs/DeliveryPanel';
import { CargoMovementPanel } from './tabs/CargoMovementPanel';
import { TV8Panel } from './tabs/TV8Panel';
import { CashAdjustmentPanel } from './tabs/CashAdjustmentPanel';

interface OrderDetailsTabsProps {
  orderId: number;
}

export const OrderDetailsTabs = ({ orderId }: OrderDetailsTabsProps) => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
    setActiveTab(newValue);
  };

  return (
    <Box sx={{ mt: 3 }}>
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs
          value={activeTab}
          onChange={handleTabChange}
          variant="scrollable"
          scrollButtons="auto"
          sx={{
            '& .MuiTab-root': {
              fontSize: '0.875rem',
              fontWeight: 500,
              textTransform: 'none',
              minHeight: 48,
              color: 'text.secondary',
              '&.Mui-selected': {
                color: 'primary.main',
                fontWeight: 600,
              },
            },
            '& .MuiTabs-indicator': {
              height: 3,
            },
          }}
        >
          <Tab
            icon={<ListAltIcon />}
            iconPosition="start"
            label="Itens"
            id="order-tab-0"
            aria-controls="order-tabpanel-0"
          />
          <Tab
            icon={<InventoryIcon />}
            iconPosition="start"
            label="Pré-box"
            id="order-tab-1"
            aria-controls="order-tabpanel-1"
          />
          <Tab
            icon={<InfoIcon />}
            iconPosition="start"
            label="Informações"
            id="order-tab-2"
            aria-controls="order-tabpanel-2"
          />
          <Tab
            icon={<TimelineIcon />}
            iconPosition="start"
            label="Timeline"
            id="order-tab-3"
            aria-controls="order-tabpanel-3"
          />
          <Tab
            icon={<ContentCutIcon />}
            iconPosition="start"
            label="Cortes"
            id="order-tab-4"
            aria-controls="order-tabpanel-4"
          />
          <Tab
            icon={<LocalShippingIcon />}
            iconPosition="start"
            label="Entrega"
            id="order-tab-5"
            aria-controls="order-tabpanel-5"
          />
          <Tab
            icon={<MoveToInboxIcon />}
            iconPosition="start"
            label="Mov. Carga"
            id="order-tab-6"
            aria-controls="order-tabpanel-6"
          />
          <Tab
            icon={<TvIcon />}
            iconPosition="start"
            label="TV8"
            id="order-tab-7"
            aria-controls="order-tabpanel-7"
          />
          <Tab
            icon={<AccountBalanceWalletIcon />}
            iconPosition="start"
            label="Acerta Caixa"
            id="order-tab-8"
            aria-controls="order-tabpanel-8"
          />
        </Tabs>
      </Box>

      <TabPanel value={activeTab} index={0}>
        <OrderItemsTable orderId={orderId} />
      </TabPanel>

      <TabPanel value={activeTab} index={1}>
        <PreBoxPanel orderId={orderId} />
      </TabPanel>

      <TabPanel value={activeTab} index={2}>
        <InformationPanel orderId={orderId} />
      </TabPanel>

      <TabPanel value={activeTab} index={3}>
        <TimelinePanel orderId={orderId} />
      </TabPanel>

      <TabPanel value={activeTab} index={4}>
        <CuttingPanel orderId={orderId} />
      </TabPanel>

      <TabPanel value={activeTab} index={5}>
        <DeliveryPanel orderId={orderId} />
      </TabPanel>

      <TabPanel value={activeTab} index={6}>
        <CargoMovementPanel orderId={orderId} />
      </TabPanel>

      <TabPanel value={activeTab} index={7}>
        <TV8Panel orderId={orderId} />
      </TabPanel>

      <TabPanel value={activeTab} index={8}>
        <CashAdjustmentPanel orderId={orderId} />
      </TabPanel>
    </Box>
  );
};
