import type { Meta, StoryObj } from "@storybook/react"
import { useState } from "react"
import {
  Dropzone,
  DropzoneAccepted,
  DropzoneDescription,
  DropzoneGroup,
  DropzoneInput,
  DropzoneRejected,
  DropzoneTitle,
  DropzoneTrigger,
  DropzoneUploadIcon,
  DropzoneZone,
} from "./FileUpload"

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

export default meta
type Story = StoryObj<typeof meta>

// Basic Dropzone Story
export const Default: Story = {
  render: () => (
    <Dropzone>
      <DropzoneZone className="w-96">
        <DropzoneInput />
        <DropzoneGroup>
          <DropzoneUploadIcon icon="upload" />
          <DropzoneTitle>Upload your files</DropzoneTitle>
          <DropzoneDescription>
            Drag and drop files here, or click to select files
          </DropzoneDescription>
        </DropzoneGroup>
      </DropzoneZone>
    </Dropzone>
  ),
}

// With File Type Restrictions
export const WithFileTypeRestrictions: Story = {
  render: () => (
    <Dropzone accept={{ "image/*": [".jpeg", ".jpg", ".png", ".gif"] }}>
      <DropzoneZone className="w-96">
        <DropzoneInput />
        <DropzoneGroup>
          <DropzoneUploadIcon icon="upload" />
          <DropzoneTitle>Upload images only</DropzoneTitle>
          <DropzoneDescription>Only JPEG, PNG, and GIF files are allowed</DropzoneDescription>
        </DropzoneGroup>
      </DropzoneZone>
    </Dropzone>
  ),
}

// Multiple Files Disabled
export const SingleFileOnly: Story = {
  render: () => (
    <Dropzone multiple={false}>
      <DropzoneZone className="w-96">
        <DropzoneInput />
        <DropzoneGroup>
          <DropzoneUploadIcon icon="upload" />
          <DropzoneTitle>Upload single file</DropzoneTitle>
          <DropzoneDescription>Only one file can be uploaded at a time</DropzoneDescription>
        </DropzoneGroup>
      </DropzoneZone>
    </Dropzone>
  ),
}

// With Custom Trigger Button
export const WithTriggerButton: Story = {
  render: () => (
    <Dropzone>
      <DropzoneZone className="w-96">
        <DropzoneInput />
        <DropzoneGroup>
          <DropzoneUploadIcon icon="upload" />
          <DropzoneTitle>Drop files here</DropzoneTitle>
          <DropzoneDescription>Or click the button below to select files</DropzoneDescription>
          <DropzoneTrigger className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
            Browse Files
          </DropzoneTrigger>
        </DropzoneGroup>
      </DropzoneZone>
    </Dropzone>
  ),
}

// Interactive Example with State
export const Interactive: Story = {
  render: () => {
    const [files, setFiles] = useState<File[]>([])

    return (
      <div className="space-y-4">
        <Dropzone
          onDrop={acceptedFiles => {
            setFiles(prev => [...prev, ...acceptedFiles])
          }}
        >
          <DropzoneZone className="w-96">
            <DropzoneInput />
            <DropzoneGroup>
              <DropzoneUploadIcon icon="upload" />
              <DropzoneTitle>Interactive Upload</DropzoneTitle>
              <DropzoneDescription>Files will be added to the list below</DropzoneDescription>
            </DropzoneGroup>

            <DropzoneAccepted>
              {acceptedFiles =>
                acceptedFiles.length > 0 && (
                  <div className="mt-4 p-2 bg-green-100 rounded text-green-800 text-sm">
                    ✓ {acceptedFiles.length} file(s) accepted
                  </div>
                )
              }
            </DropzoneAccepted>

            <DropzoneRejected>
              {rejectedFiles =>
                rejectedFiles.length > 0 && (
                  <div className="mt-4 p-2 bg-red-100 rounded text-red-800 text-sm">
                    ✗ {rejectedFiles.length} file(s) rejected
                  </div>
                )
              }
            </DropzoneRejected>
          </DropzoneZone>
        </Dropzone>

        {files.length > 0 && (
          <div className="w-96">
            <h3 className="font-medium mb-2">Uploaded Files:</h3>
            <div className="space-y-2">
              {files.map((file, index) => (
                <div
                  key={`${file.name}-${file.size}-${index}`}
                  className="flex justify-between items-center p-2 bg-gray-100 rounded"
                >
                  <span className="text-sm">{file.name}</span>
                  <button
                    type="button"
                    onClick={() => setFiles(prev => prev.filter((_, i) => i !== index))}
                    className="text-red-500 hover:text-red-700 text-sm"
                  >
                    Remove
                  </button>
                </div>
              ))}
            </div>
            <button
              type="button"
              onClick={() => setFiles([])}
              className="mt-2 text-sm text-gray-500 hover:text-gray-700"
            >
              Clear All
            </button>
          </div>
        )}
      </div>
    )
  },
}

// Disabled State
export const Disabled: Story = {
  render: () => (
    <Dropzone disabled>
      <DropzoneZone className="w-96">
        <DropzoneInput />
        <DropzoneGroup>
          <DropzoneUploadIcon icon="upload" />
          <DropzoneTitle>Upload Disabled</DropzoneTitle>
          <DropzoneDescription>File upload is currently disabled</DropzoneDescription>
        </DropzoneGroup>
      </DropzoneZone>
    </Dropzone>
  ),
}

// With Max File Size
export const WithMaxFileSize: Story = {
  render: () => (
    <Dropzone maxSize={1024 * 1024 * 5}>
      {" "}
      {/* 5MB */}
      <DropzoneZone className="w-96">
        <DropzoneInput />
        <DropzoneGroup>
          <DropzoneUploadIcon icon="upload" />
          <DropzoneTitle>Upload with Size Limit</DropzoneTitle>
          <DropzoneDescription>Maximum file size: 5MB</DropzoneDescription>
        </DropzoneGroup>

        <DropzoneRejected>
          {rejectedFiles =>
            rejectedFiles.length > 0 && (
              <div className="mt-4 p-2 bg-red-100 rounded text-red-800 text-sm">
                {rejectedFiles.map((file, index) => (
                  <div key={`${file.file.name}-${file.file.size}-${index}`}>
                    {file.file.name}: {file.errors.map(error => error.message).join(", ")}
                  </div>
                ))}
              </div>
            )
          }
        </DropzoneRejected>
      </DropzoneZone>
    </Dropzone>
  ),
}

// No Click (Drag Only)
export const DragOnly: Story = {
  render: () => (
    <Dropzone noClick>
      <DropzoneZone className="w-96">
        <DropzoneInput />
        <DropzoneGroup>
          <DropzoneUploadIcon icon="upload" />
          <DropzoneTitle>Drag Only</DropzoneTitle>
          <DropzoneDescription>
            Files can only be uploaded by dragging them here
          </DropzoneDescription>
        </DropzoneGroup>
      </DropzoneZone>
    </Dropzone>
  ),
}