import { useState } from 'react';

import Accordion from '@design-system/Accordion';
import CardContainer from '@design-system/CardContainer';
import { Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconFolder } from '@tabler/icons-react';

import { useSimpleSortableContainers } from './hooks';
import SortableList from '.';

const meta: Meta<typeof SortableList.Root> = {
  title: 'Composed Components/SortableListComposition',
  component: SortableList.Root,
  parameters: {
    layout: 'fullscreen',
  },
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof meta>;

// Types
type CompositionFolder = {
  id: string;
  title: string;
  files: Array<{ id: string; title: string }>;
};

// Data
const compositionFolders: CompositionFolder[] = [
  {
    id: 'folder-1',
    title: 'Documentos Personales',
    files: [
      { id: 'file-1', title: 'Curriculum Vitae.pdf' },
      { id: 'file-2', title: 'Carta de Presentación.docx' },
      { id: 'file-3', title: 'Referencias.pdf' },
    ],
  },
  {
    id: 'folder-2',
    title: 'Proyectos de Trabajo',
    files: [
      { id: 'file-4', title: 'Propuesta Cliente A.pptx' },
      { id: 'file-5', title: 'Informe Q1 2024.xlsx' },
    ],
  },
];

// Component
const SimpleFileCard: React.FC<{
  file: { id: string; title: string };
}> = ({ file }) => (
  <CardContainer
    elevation={0}
    fullWidth
  >
    <Stack
      direction="row"
      spacing={1.5}
      alignItems="center"
    >
      <SortableList.DragHandle />
      <Typography
        variant="body2"
        sx={{ flex: 1 }}
      >
        📄 {file.title}
      </Typography>
    </Stack>
  </CardContainer>
);

// Story: Accordions with drag & drop between folders
export const FoldersWithAccordions: Story = {
  render: () => {
    const [folders, setFolders] = useState(compositionFolders);

    // Reusable hook to handle drag & drop between containers
    const handleDragOver = useSimpleSortableContainers({
      containers: folders,
      setContainers: setFolders,
      itemsKey: 'files',
    });

    const handleDragEnd = () => {
      // Reordering is already handled in onDragOver
    };

    return (
      <SortableList.Root
        onDragOver={handleDragOver}
        onDragEnd={handleDragEnd}
        dragByHandler={true}
        hasDragOverlay={true}
        sx={{ gap: 2 }}
        isDraggable={id => !id.toString().startsWith('folder-')}
      >
        <SortableList.Container id="container-folders">
          {folders.map(folder => (
            <SortableList.Item
              key={folder.id}
              id={folder.id}
            >
              <Accordion
                elevation={0}
                title={folder.title}
                avatar={{ Icon: IconFolder }}
                pill={{
                  label: `${folder.files.length} file${folder.files.length !== 1 ? 's' : ''}`,
                  type: 'neutral',
                }}
                customDetail={
                  <SortableList.Container
                    id={`container-${folder.id}`}
                    sx={{ gap: 1, p: 2 }}
                  >
                    {folder.files.map(file => (
                      <SortableList.Item
                        key={file.id}
                        id={file.id}
                      >
                        <SimpleFileCard file={file} />
                      </SortableList.Item>
                    ))}
                  </SortableList.Container>
                }
                defaultExpanded
              />
            </SortableList.Item>
          ))}
        </SortableList.Container>
      </SortableList.Root>
    );
  },
};
