import { SvgUse } from "@ivtui/base"
import type { Meta, StoryObj } from "@storybook/react"
import {
  FileList,
  FileListAction,
  FileListActions,
  FileListContent,
  FileListDescription,
  FileListDescriptionSeparator,
  FileListDescriptionText,
  FileListHeader,
  FileListIcon,
  FileListInfo,
  FileListItem,
  FileListName,
  FileListProgress,
  FileListSize,
} from "./FileUploadList"

const meta: Meta<typeof FileList> = {
  title: "media-upload/FileUploadList",
  component: FileList,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
}

export default meta
type Story = StoryObj<typeof meta>

// Mock file data
const mockFiles = [
  {
    name: "presentation.pdf",
    size: 2048576, // 2MB
    type: "application/pdf",
    progress: 100,
    status: "completed" as const,
  },
  {
    name: "image.jpg",
    size: 1024000, // ~1MB
    type: "image/jpeg",
    progress: 75,
    status: "uploading" as const,
  },
  {
    name: "document.docx",
    size: 512000, // ~512KB
    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    progress: 0,
    status: "error" as const,
  },
]

// Basic File List
export const Default: Story = {
  render: () => (
    <FileList className="w-96">
      {mockFiles.map(file => (
        <FileListItem key={file.name}>
          <FileListHeader>
            <FileListIcon>
              {file.type.startsWith("image/") ? (
                <SvgUse icon="image" />
              ) : file.type === "application/pdf" ? (
                <SvgUse icon="file-text" />
              ) : (
                <SvgUse icon="file" />
              )}
            </FileListIcon>
            <FileListInfo>
              <FileListName>{file.name}</FileListName>
              <FileListDescription>
                <FileListSize>{file.size}</FileListSize>
                <FileListDescriptionSeparator />
                <span>{file.status}</span>
              </FileListDescription>
            </FileListInfo>
            <FileListActions>
              <FileListAction>
                <SvgUse icon="trash-2" />
              </FileListAction>
            </FileListActions>
          </FileListHeader>
        </FileListItem>
      ))}
    </FileList>
  ),
}

// Single File Item
export const SingleFile: Story = {
  render: () => (
    <FileList className="w-96">
      <FileListItem>
        <FileListHeader>
          <FileListIcon>
            <SvgUse icon="image" />
          </FileListIcon>
          <FileListInfo>
            <FileListName>vacation-photo.jpg</FileListName>
            <FileListDescription>
              <FileListSize>{1024 * 1024 * 3}</FileListSize>
              <FileListDescriptionSeparator />
              <FileListDescriptionText>
                <SvgUse icon="check-circle" />
                Uploaded
              </FileListDescriptionText>
            </FileListDescription>
          </FileListInfo>
          <FileListActions>
            <FileListAction>
              <SvgUse icon="download" />
            </FileListAction>
            <FileListAction>
              <SvgUse icon="trash-2" />
            </FileListAction>
          </FileListActions>
        </FileListHeader>
      </FileListItem>
    </FileList>
  ),
}

// File with Progress
export const WithProgress: Story = {
  render: () => (
    <FileList className="w-96">
      <FileListItem>
        <FileListHeader>
          <FileListIcon>
            <SvgUse icon="file-video" />
          </FileListIcon>
          <FileListInfo>
            <FileListName>presentation-video.mp4</FileListName>
            <FileListDescription>
              <FileListSize>{1024 * 1024 * 25}</FileListSize>
              <FileListDescriptionSeparator />
              <FileListDescriptionText>
                <SvgUse icon="upload" />
                Uploading...
              </FileListDescriptionText>
            </FileListDescription>
          </FileListInfo>
          <FileListActions>
            <FileListAction>
              <SvgUse icon="x" />
            </FileListAction>
          </FileListActions>
        </FileListHeader>
        <FileListContent>
          <FileListProgress value={45} />
        </FileListContent>
      </FileListItem>
    </FileList>
  ),
}

// Multiple Files with Different States
export const MultipleStates: Story = {
  render: () => (
    <FileList className="w-96">
      {/* Completed Upload */}
      <FileListItem>
        <FileListHeader>
          <FileListIcon>
            <SvgUse icon="file-text" />
          </FileListIcon>
          <FileListInfo>
            <FileListName>report.pdf</FileListName>
            <FileListDescription>
              <FileListSize>{1024 * 512}</FileListSize>
              <FileListDescriptionSeparator />
              <FileListDescriptionText>
                <SvgUse icon="check-circle" />
                Completed
              </FileListDescriptionText>
            </FileListDescription>
          </FileListInfo>
          <FileListActions>
            <FileListAction>
              <SvgUse icon="external-link" />
            </FileListAction>
            <FileListAction>
              <SvgUse icon="trash-2" />
            </FileListAction>
          </FileListActions>
        </FileListHeader>
      </FileListItem>

      {/* In Progress */}
      <FileListItem>
        <FileListHeader>
          <FileListIcon>
            <SvgUse icon="image" />
          </FileListIcon>
          <FileListInfo>
            <FileListName>high-res-image.png</FileListName>
            <FileListDescription>
              <FileListSize>{1024 * 1024 * 8}</FileListSize>
              <FileListDescriptionSeparator />
              <FileListDescriptionText>
                <SvgUse icon="upload" />
                Uploading... 67%
              </FileListDescriptionText>
            </FileListDescription>
          </FileListInfo>
          <FileListActions>
            <FileListAction>
              <SvgUse icon="pause" />
            </FileListAction>
            <FileListAction>
              <SvgUse icon="x" />
            </FileListAction>
          </FileListActions>
        </FileListHeader>
        <FileListContent>
          <FileListProgress value={67} />
        </FileListContent>
      </FileListItem>

      {/* Error State */}
      <FileListItem>
        <FileListHeader>
          <FileListIcon>
            <SvgUse icon="file-x" />
          </FileListIcon>
          <FileListInfo>
            <FileListName>corrupted-file.zip</FileListName>
            <FileListDescription>
              <FileListSize>{1024 * 1024}</FileListSize>
              <FileListDescriptionSeparator />
              <FileListDescriptionText>
                <SvgUse icon="alert-circle" />
                Upload failed
              </FileListDescriptionText>
            </FileListDescription>
          </FileListInfo>
          <FileListActions>
            <FileListAction>
              <SvgUse icon="refresh-cw" />
            </FileListAction>
            <FileListAction>
              <SvgUse icon="trash-2" />
            </FileListAction>
          </FileListActions>
        </FileListHeader>
      </FileListItem>
    </FileList>
  ),
}

// Empty State
export const EmptyState: Story = {
  render: () => (
    <FileList className="w-96">
      <div className="text-center py-8 text-gray-500">
        <SvgUse icon="file-plus" className="size-12 mx-auto mb-2 opacity-50" />
        <p className="text-sm">No files uploaded yet</p>
        <p className="text-xs text-gray-400">Your uploaded files will appear here</p>
      </div>
    </FileList>
  ),
}

// Compact View
export const CompactView: Story = {
  render: () => (
    <FileList className="w-80">
      {mockFiles.slice(0, 2).map(file => (
        <FileListItem key={file.name} className="p-2">
          <FileListHeader>
            <FileListIcon className="size-8">
              <SvgUse icon="file" className="size-4" />
            </FileListIcon>
            <FileListInfo>
              <FileListName className="text-xs">{file.name}</FileListName>
              <FileListDescription className="text-xs">
                <FileListSize>{file.size}</FileListSize>
              </FileListDescription>
            </FileListInfo>
            <FileListActions>
              <FileListAction size="1">
                <SvgUse icon="trash-2" className="size-3" />
              </FileListAction>
            </FileListActions>
          </FileListHeader>
          {file.progress < 100 && (
            <FileListContent>
              <FileListProgress value={file.progress} className="h-1" />
            </FileListContent>
          )}
        </FileListItem>
      ))}
    </FileList>
  ),
}

// With Custom Icons and Actions
export const CustomIcons: Story = {
  render: () => (
    <FileList className="w-96">
      <FileListItem>
        <FileListHeader>
          <FileListIcon className="bg-blue-100 text-blue-600 border-blue-200">
            <SvgUse icon="database" />
          </FileListIcon>
          <FileListInfo>
            <FileListName>database-backup.sql</FileListName>
            <FileListDescription>
              <FileListSize>{1024 * 1024 * 45}</FileListSize>
              <FileListDescriptionSeparator />
              <span className="text-green-600">Backup completed</span>
            </FileListDescription>
          </FileListInfo>
          <FileListActions>
            <FileListAction className="text-blue-600 hover:text-blue-700">
              <SvgUse icon="download-cloud" />
            </FileListAction>
            <FileListAction className="text-yellow-600 hover:text-yellow-700">
              <SvgUse icon="archive" />
            </FileListAction>
            <FileListAction className="text-red-600 hover:text-red-700">
              <SvgUse icon="trash-2" />
            </FileListAction>
          </FileListActions>
        </FileListHeader>
      </FileListItem>
    </FileList>
  ),
}