import { Modal, Tabs } from '@mantine/core';
import { ArrowRightLeft, ListChecks } from 'lucide-react';

import type { WarehouseInventoryItem } from '@/types/warehouse';
import { ActivityTimeline } from './ActivityTimeline';
import { InventoryMovementHistoryTable } from './InventoryMovementHistoryTable';

interface InventoryHistoryModalProps {
  opened: boolean;
  onClose: () => void;
  item: WarehouseInventoryItem | null;
}

export function InventoryHistoryModal({ opened, onClose, item }: InventoryHistoryModalProps) {
  return (
    <Modal opened={opened} onClose={onClose} title="Inventory history" centered size="xl">
      {item && (
        <Tabs defaultValue="activity">
          <Tabs.List>
            <Tabs.Tab value="activity" leftSection={<ListChecks size={16} />}>
              Activity
            </Tabs.Tab>
            <Tabs.Tab value="movements" leftSection={<ArrowRightLeft size={16} />}>
              Movements
            </Tabs.Tab>
          </Tabs.List>
          <Tabs.Panel value="activity" pt="md">
            <ActivityTimeline inventoryId={item.id} />
          </Tabs.Panel>
          <Tabs.Panel value="movements" pt="md">
            <InventoryMovementHistoryTable inventoryId={item.id} />
          </Tabs.Panel>
        </Tabs>
      )}
    </Modal>
  );
}
