import type { Meta, StoryObj } from "@storybook/react"
import { ScrollArea } from "./ScrollArea"

/**
 * Provides a custom scrollable area with styled scrollbars.
 *
 * ## Props
 * - `scrollbars`: "vertical" | "horizontal" | "both" (default: "both")
 * - `radius`: "none" | "small" | "medium" | "large" | "full"
 * - `size`: "1" | "2" | "3" (default: "1")
 * - `asChild`: boolean
 */
const meta = {
  title: "base/containment/ScrollArea",
  component: ScrollArea,
  tags: ["autodocs"],
  argTypes: {
    scrollbars: {
      control: "select",
      options: ["vertical", "horizontal", "both"],
      description: "Which scrollbars to show",
    },
    radius: {
      control: "select",
      options: ["none", "small", "medium", "large", "full"],
      description: "Border radius of the scroll area",
    },
    size: {
      control: "select",
      options: ["1", "2", "3"],
      description: "Size of the scroll area",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    style: { width: 300, height: 200 },
  },
} satisfies Meta<typeof ScrollArea>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic scroll area with long content.
 */
export const Default: Story = {
  render: args => (
    <ScrollArea {...args}>
      <div className="p-4 space-y-4">
        <h3 className="text-lg font-semibold">Scrollable Content</h3>
        {Array.from({ length: 20 }, (_, i) => (
          <div key={`content-item-${i + 1}`} className="p-3 bg-gray-100 rounded">
            <p className="text-sm">Content item {i + 1}</p>
            <p className="text-xs text-gray-600 mt-1">
              This is some additional text to make the content longer and demonstrate scrolling.
            </p>
          </div>
        ))}
      </div>
    </ScrollArea>
  ),
}

/**
 * Scroll area with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex gap-4">
      <div>
        <h4 className="text-sm font-medium mb-2">Small (1)</h4>
        <ScrollArea size="1" style={{ width: 250, height: 150 }}>
          <div className="p-3 space-y-2">
            {Array.from({ length: 10 }, (_, i) => (
              <div key={`small-item-${i + 1}`} className="p-2 bg-gray-100 rounded text-sm">
                Item {i + 1}
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Medium (2)</h4>
        <ScrollArea size="2" style={{ width: 250, height: 150 }}>
          <div className="p-4 space-y-3">
            {Array.from({ length: 10 }, (_, i) => (
              <div key={`medium-item-${i + 1}`} className="p-3 bg-gray-100 rounded">
                <p className="text-sm">Item {i + 1}</p>
                <p className="text-xs text-gray-600 mt-1">Additional content</p>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Large (3)</h4>
        <ScrollArea size="3" style={{ width: 250, height: 150 }}>
          <div className="p-5 space-y-4">
            {Array.from({ length: 10 }, (_, i) => (
              <div key={`large-item-${i + 1}`} className="p-4 bg-gray-100 rounded">
                <p className="text-base">Item {i + 1}</p>
                <p className="text-sm text-gray-600 mt-2">More detailed content</p>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>
    </div>
  ),
}

/**
 * Scroll area with different scrollbar configurations.
 */
export const ScrollbarTypes: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">Vertical Only</h4>
        <ScrollArea scrollbars="vertical" style={{ width: 300, height: 200 }}>
          <div className="p-4 space-y-3">
            {Array.from({ length: 15 }, (_, i) => (
              <div
                key={`vertical-section-${i + 1}`}
                className="p-3 bg-blue-50 border border-blue-200 rounded"
              >
                <p className="text-sm font-medium">Section {i + 1}</p>
                <p className="text-xs text-gray-600 mt-1">
                  This content is long enough to require vertical scrolling.
                </p>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Horizontal Only</h4>
        <ScrollArea scrollbars="horizontal" style={{ width: 300, height: 150 }}>
          <div className="p-4" style={{ width: 800 }}>
            <div className="flex gap-4">
              {Array.from({ length: 10 }, (_, i) => (
                <div
                  key={`horizontal-card-${i + 1}`}
                  className="flex-shrink-0 w-60 p-3 bg-green-50 border border-green-200 rounded"
                >
                  <p className="text-sm font-medium">Card {i + 1}</p>
                  <p className="text-xs text-gray-600 mt-1">
                    This card has a fixed width to demonstrate horizontal scrolling.
                  </p>
                </div>
              ))}
            </div>
          </div>
        </ScrollArea>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Both (Default)</h4>
        <ScrollArea scrollbars="both" style={{ width: 300, height: 200 }}>
          <div className="p-4" style={{ width: 600 }}>
            <div className="space-y-3">
              {Array.from({ length: 8 }, (_, i) => (
                <div key={`both-row-${i + 1}`} className="flex gap-4">
                  {Array.from({ length: 5 }, (_, j) => (
                    <div
                      key={`both-item-${i + 1}-${j + 1}`}
                      className="flex-shrink-0 w-32 p-2 bg-purple-50 border border-purple-200 rounded text-xs"
                    >
                      Item {i + 1}-{j + 1}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </ScrollArea>
      </div>
    </div>
  ),
}

/**
 * Scroll area with different border radius.
 */
export const BorderRadius: Story = {
  render: () => (
    <div className="grid grid-cols-2 gap-6">
      <div>
        <h4 className="text-sm font-medium mb-2">No Radius</h4>
        <ScrollArea radius="none" style={{ width: 250, height: 150 }}>
          <div className="p-4 space-y-2">
            {Array.from({ length: 8 }, (_, i) => (
              <div key={`no-radius-item-${i + 1}`} className="p-2 bg-gray-100 text-sm">
                Item {i + 1}
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Small Radius</h4>
        <ScrollArea radius="small" style={{ width: 250, height: 150 }}>
          <div className="p-4 space-y-2">
            {Array.from({ length: 8 }, (_, i) => (
              <div
                key={`small-radius-item-${i + 1}`}
                className="p-2 bg-gray-100 rounded-sm text-sm"
              >
                Item {i + 1}
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Medium Radius</h4>
        <ScrollArea radius="medium" style={{ width: 250, height: 150 }}>
          <div className="p-4 space-y-2">
            {Array.from({ length: 8 }, (_, i) => (
              <div key={`medium-radius-item-${i + 1}`} className="p-2 bg-gray-100 rounded text-sm">
                Item {i + 1}
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Large Radius</h4>
        <ScrollArea radius="large" style={{ width: 250, height: 150 }}>
          <div className="p-4 space-y-2">
            {Array.from({ length: 8 }, (_, i) => (
              <div
                key={`large-radius-item-${i + 1}`}
                className="p-2 bg-gray-100 rounded-lg text-sm"
              >
                Item {i + 1}
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>
    </div>
  ),
}

/**
 * Code editor example.
 */
export const CodeEditor: Story = {
  render: () => (
    <ScrollArea style={{ width: 400, height: 300 }}>
      <div className="p-4 bg-gray-900 text-green-400 font-mono text-sm">
        <div className="space-y-1">
          <div>
            <span className="text-blue-400">function</span>{" "}
            <span className="text-yellow-400">calculateSum</span>(
            <span className="text-orange-400">a</span>, <span className="text-orange-400">b</span>){" "}
            {"{"}
          </div>
          <div className="ml-4">
            <span className="text-blue-400">return</span> a + b;
          </div>
          <div>{"}"}</div>
          <div />
          <div>
            <span className="text-blue-400">const</span>{" "}
            <span className="text-yellow-400">result</span> = calculateSum(
            <span className="text-orange-400">5</span>, <span className="text-orange-400">10</span>
            );
          </div>
          <div>
            console.<span className="text-yellow-400">log</span>(result);{" "}
            <span className="text-gray-500">{"// 15"}</span>
          </div>
          <div />
          <div>
            <span className="text-blue-400">class</span>{" "}
            <span className="text-yellow-400">Calculator</span> {"{"}
          </div>
          <div className="ml-4">
            <span className="text-blue-400">constructor</span>() {"{"}
          </div>
          <div className="ml-8">
            <span className="text-blue-400">this</span>.
            <span className="text-yellow-400">history</span> = [];
          </div>
          <div className="ml-4">{"}"}</div>
          <div />
          <div className="ml-4">
            <span className="text-yellow-400">add</span>(a, b) {"{"}
          </div>
          <div className="ml-8">
            <span className="text-blue-400">const</span> result = a + b;
          </div>
          <div className="ml-8">
            <span className="text-blue-400">this</span>.history.push({"{"} a, b, result {"}"});
          </div>
          <div className="ml-8">
            <span className="text-blue-400">return</span> result;
          </div>
          <div className="ml-4">{"}"}</div>
          <div>{"}"}</div>
          <div />
          <div>
            <span className="text-blue-400">const</span>{" "}
            <span className="text-yellow-400">calc</span> ={" "}
            <span className="text-blue-400">new</span> Calculator();
          </div>
          <div>
            calc.add(<span className="text-orange-400">3</span>,{" "}
            <span className="text-orange-400">7</span>);{" "}
            <span className="text-gray-500">{"// 10"}</span>
          </div>
        </div>
      </div>
    </ScrollArea>
  ),
}

/**
 * Chat interface example.
 */
export const ChatInterface: Story = {
  render: () => (
    <div className="space-y-4">
      <ScrollArea style={{ width: 350, height: 300 }}>
        <div className="p-4 space-y-3">
          <div className="flex justify-end">
            <div className="max-w-full p-3 bg-blue-600 text-white rounded-lg">
              <p className="text-sm">Hey! How are you doing today?</p>
            </div>
          </div>

          <div className="flex justify-start">
            <div className="max-w-full p-3 bg-gray-200 rounded-lg">
              <p className="text-sm">I'm doing great, thanks for asking! How about you?</p>
            </div>
          </div>

          <div className="flex justify-end">
            <div className="max-w-full p-3 bg-blue-600 text-white rounded-lg">
              <p className="text-sm">Pretty good! Working on some new features.</p>
            </div>
          </div>

          <div className="flex justify-start">
            <div className="max-w-full p-3 bg-gray-200 rounded-lg">
              <p className="text-sm">That sounds exciting! What kind of features?</p>
            </div>
          </div>

          <div className="flex justify-end">
            <div className="max-w-full p-3 bg-blue-600 text-white rounded-lg">
              <p className="text-sm">Mostly UI improvements and performance optimizations.</p>
            </div>
          </div>

          <div className="flex justify-start">
            <div className="max-w-full p-3 bg-gray-200 rounded-lg">
              <p className="text-sm">Can't wait to see them in action!</p>
            </div>
          </div>

          <div className="flex justify-end">
            <div className="max-w-full p-3 bg-blue-600 text-white rounded-lg">
              <p className="text-sm">Thanks! I'll keep you updated on the progress.</p>
            </div>
          </div>

          <div className="flex justify-start">
            <div className="max-w-full p-3 bg-gray-200 rounded-lg">
              <p className="text-sm">Perfect! Looking forward to it.</p>
            </div>
          </div>
        </div>
      </ScrollArea>

      <div className="flex gap-2">
        <input
          type="text"
          placeholder="Type a message..."
          className="flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          type="button"
          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        >
          Send
        </button>
      </div>
    </div>
  ),
}

/**
 * File browser example.
 */
export const FileBrowser: Story = {
  render: () => (
    <ScrollArea style={{ width: 300, height: 400 }}>
      <div className="p-4 space-y-1">
        <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
          <span className="text-blue-600">📁</span>
          <span className="text-sm">Documents</span>
        </div>

        <div className="ml-4 space-y-1">
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-green-600">📄</span>
            <span className="text-sm">report.pdf</span>
          </div>
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-green-600">📄</span>
            <span className="text-sm">presentation.pptx</span>
          </div>
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-blue-600">📁</span>
            <span className="text-sm">Projects</span>
          </div>
        </div>

        <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
          <span className="text-blue-600">📁</span>
          <span className="text-sm">Pictures</span>
        </div>

        <div className="ml-4 space-y-1">
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-purple-600">🖼️</span>
            <span className="text-sm">vacation.jpg</span>
          </div>
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-purple-600">🖼️</span>
            <span className="text-sm">family.png</span>
          </div>
        </div>

        <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
          <span className="text-blue-600">📁</span>
          <span className="text-sm">Music</span>
        </div>

        <div className="ml-4 space-y-1">
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-red-600">🎵</span>
            <span className="text-sm">song1.mp3</span>
          </div>
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-red-600">🎵</span>
            <span className="text-sm">song2.mp3</span>
          </div>
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-red-600">🎵</span>
            <span className="text-sm">song3.mp3</span>
          </div>
        </div>

        <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
          <span className="text-blue-600">📁</span>
          <span className="text-sm">Downloads</span>
        </div>

        <div className="ml-4 space-y-1">
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-orange-600">📦</span>
            <span className="text-sm">setup.exe</span>
          </div>
          <div className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
            <span className="text-green-600">📄</span>
            <span className="text-sm">manual.pdf</span>
          </div>
        </div>
      </div>
    </ScrollArea>
  ),
}