import { List, ListItem } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof List> = {
  title: "Components/List",
  component: List,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "Flexible list components for ordered, unordered, and custom lists.",
      },
    },
  },
  argTypes: {
    type: {
      control: { type: "select" },
      options: ["ul", "ol"],
      description: "List type (ul or ol)",
    },
    variant: {
      control: { type: "select" },
      options: ["default", "unstyled"],
      description: "List styling variant",
    },
    children: {
      control: { type: "text" },
      description: "List content",
    },
  },
  args: {
    type: "ul",
    variant: "default",
    children: "List content",
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

// Default list
export const Default: Story = {
  render: () => (
    <List>
      <ListItem>First item</ListItem>
      <ListItem>Second item</ListItem>
      <ListItem>Third item</ListItem>
    </List>
  ),
};

// Unordered list
export const Unordered: Story = {
  render: () => (
    <List type="ul">
      <ListItem>Apple</ListItem>
      <ListItem>Banana</ListItem>
      <ListItem>Cherry</ListItem>
      <ListItem>Date</ListItem>
    </List>
  ),
};

// Ordered list
export const Ordered: Story = {
  render: () => (
    <List type="ol">
      <ListItem>First step</ListItem>
      <ListItem>Second step</ListItem>
      <ListItem>Third step</ListItem>
      <ListItem>Fourth step</ListItem>
    </List>
  ),
};

// Unstyled list
export const Unstyled: Story = {
  render: () => (
    <List variant="unstyled" className="space-y-3">
      <ListItem className="flex items-center gap-3 rounded-lg bg-gray-50 p-3">
        <div className="h-3 w-3 rounded-full bg-blue-500"></div>
        <span>Unstyled item 1</span>
      </ListItem>
      <ListItem className="flex items-center gap-3 rounded-lg bg-gray-50 p-3">
        <div className="h-3 w-3 rounded-full bg-green-500"></div>
        <span>Unstyled item 2</span>
      </ListItem>
      <ListItem className="flex items-center gap-3 rounded-lg bg-gray-50 p-3">
        <div className="h-3 w-3 rounded-full bg-purple-500"></div>
        <span>Unstyled item 3</span>
      </ListItem>
    </List>
  ),
};

// Compact list
export const Compact: Story = {
  render: () => (
    <List className="space-y-1">
      <ListItem>Compact item 1</ListItem>
      <ListItem>Compact item 2</ListItem>
      <ListItem>Compact item 3</ListItem>
    </List>
  ),
};

// Spaced list
export const Spaced: Story = {
  render: () => (
    <List className="space-y-4">
      <ListItem>Spaced item 1</ListItem>
      <ListItem>Spaced item 2</ListItem>
      <ListItem>Spaced item 3</ListItem>
    </List>
  ),
};

// Navigation list
export const Navigation: Story = {
  render: () => (
    <List variant="unstyled" className="space-y-1">
      <ListItem>
        <a
          href="#dashboard"
          className="block rounded px-4 py-2 text-gray-700 hover:bg-gray-100"
        >
          Dashboard
        </a>
      </ListItem>
      <ListItem>
        <a
          href="#profile"
          className="block rounded px-4 py-2 text-gray-700 hover:bg-gray-100"
        >
          Profile
        </a>
      </ListItem>
      <ListItem>
        <a
          href="#settings"
          className="block rounded px-4 py-2 text-gray-700 hover:bg-gray-100"
        >
          Settings
        </a>
      </ListItem>
      <ListItem>
        <a
          href="#logout"
          className="block rounded px-4 py-2 text-red-600 hover:bg-red-50"
        >
          Logout
        </a>
      </ListItem>
    </List>
  ),
  parameters: {
    docs: {
      description: {
        story: "Navigation menu using unstyled list.",
      },
    },
  },
};

// Feature list
export const FeatureList: Story = {
  render: () => (
    <List variant="unstyled" className="space-y-4">
      <ListItem className="flex items-start gap-3">
        <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
          <span className="text-sm text-green-600">✓</span>
        </div>
        <div>
          <h4 className="font-medium text-gray-900">Feature 1</h4>
          <p className="text-sm text-gray-600">
            Description of the first feature
          </p>
        </div>
      </ListItem>
      <ListItem className="flex items-start gap-3">
        <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
          <span className="text-sm text-green-600">✓</span>
        </div>
        <div>
          <h4 className="font-medium text-gray-900">Feature 2</h4>
          <p className="text-sm text-gray-600">
            Description of the second feature
          </p>
        </div>
      </ListItem>
      <ListItem className="flex items-start gap-3">
        <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
          <span className="text-sm text-green-600">✓</span>
        </div>
        <div>
          <h4 className="font-medium text-gray-900">Feature 3</h4>
          <p className="text-sm text-gray-600">
            Description of the third feature
          </p>
        </div>
      </ListItem>
    </List>
  ),
  parameters: {
    docs: {
      description: {
        story: "Feature list with icons and descriptions.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="space-y-8">
      <div>
        <h3 className="mb-3 text-lg font-semibold">List Types</h3>
        <div className="grid grid-cols-2 gap-8">
          <div>
            <h4 className="mb-2 font-medium">Unordered</h4>
            <List type="ul">
              <ListItem>Item 1</ListItem>
              <ListItem>Item 2</ListItem>
              <ListItem>Item 3</ListItem>
            </List>
          </div>
          <div>
            <h4 className="mb-2 font-medium">Ordered</h4>
            <List type="ol">
              <ListItem>Step 1</ListItem>
              <ListItem>Step 2</ListItem>
              <ListItem>Step 3</ListItem>
            </List>
          </div>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-lg font-semibold">Variants</h3>
        <div className="grid grid-cols-2 gap-6">
          <div>
            <h4 className="mb-2 font-medium">Default</h4>
            <List variant="default">
              <ListItem>Default item</ListItem>
              <ListItem>Default item</ListItem>
            </List>
          </div>
          <div>
            <h4 className="mb-2 font-medium">Unstyled</h4>
            <List variant="unstyled">
              <ListItem>Unstyled item</ListItem>
              <ListItem>Unstyled item</ListItem>
            </List>
          </div>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all list variants and sizes.",
      },
    },
  },
};