import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Tab } from './Tab'

const meta = {
  title: 'Components/Tab',
  component: Tab,
  args: {
    items: [],
  },
} satisfies Meta<typeof Tab>

export default meta
type Story = StoryObj<typeof meta>

const defaultItems = [
  { key: 'tab1', label: '탭 1', children: <div className="p-4">탭 1의 내용입니다.</div> },
  { key: 'tab2', label: '탭 2', children: <div className="p-4">탭 2의 내용입니다.</div> },
  { key: 'tab3', label: '탭 3', children: <div className="p-4">탭 3의 내용입니다.</div> },
]

export const Default: Story = {
  args: {
    items: defaultItems,
  },
}

export const WithDefaultSelected: Story = {
  args: {
    items: defaultItems,
    defaultSelectedKey: 'tab2',
  },
}

export const Controlled: Story = {
  render: function Render() {
    const [selectedKey, setSelectedKey] = useState('tab1')
    return (
      <Tab
        items={defaultItems}
        selectedKey={selectedKey}
        onSelectionChange={(key) => setSelectedKey(key as string)}
      />
    )
  },
}

export const WithDisabledTab: Story = {
  args: {
    items: [
      { key: 'tab1', label: '탭 1', children: <div className="p-4">탭 1의 내용입니다.</div> },
      { key: 'tab2', label: '탭 2 (비활성화)', children: <div className="p-4">탭 2의 내용입니다.</div>, disabled: true },
      { key: 'tab3', label: '탭 3', children: <div className="p-4">탭 3의 내용입니다.</div> },
    ],
  },
}

export const WithRichContent: Story = {
  args: {
    items: [
      {
        key: 'overview',
        label: '개요',
        children: (
          <div className="p-4 space-y-2">
            <h3 className="text-lg font-bold">프로젝트 개요</h3>
            <p>이 프로젝트는 항공영상 탐지 시스템입니다.</p>
            <ul className="list-disc list-inside">
              <li>항공영상 업로드</li>
              <li>AI 기반 객체 탐지</li>
              <li>결과 분석 및 리포트</li>
            </ul>
          </div>
        ),
      },
      {
        key: 'details',
        label: '상세 정보',
        children: (
          <div className="p-4 space-y-2">
            <h3 className="text-lg font-bold">상세 정보</h3>
            <table className="w-full border-collapse">
              <tbody>
                <tr className="border-b">
                  <td className="py-2 font-medium">버전</td>
                  <td className="py-2">1.0.0</td>
                </tr>
                <tr className="border-b">
                  <td className="py-2 font-medium">최종 수정일</td>
                  <td className="py-2">2024-01-15</td>
                </tr>
              </tbody>
            </table>
          </div>
        ),
      },
      {
        key: 'settings',
        label: '설정',
        children: (
          <div className="p-4">
            <h3 className="text-lg font-bold mb-4">설정</h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-1">알림 설정</label>
                <select className="border border-gray-300 rounded px-3 py-2 w-full">
                  <option>모든 알림</option>
                  <option>중요 알림만</option>
                  <option>알림 끄기</option>
                </select>
              </div>
            </div>
          </div>
        ),
      },
    ],
  },
}

export const ManyTabs: Story = {
  args: {
    items: [
      { key: 'tab1', label: '첫 번째', children: <div className="p-4">첫 번째 탭</div> },
      { key: 'tab2', label: '두 번째', children: <div className="p-4">두 번째 탭</div> },
      { key: 'tab3', label: '세 번째', children: <div className="p-4">세 번째 탭</div> },
      { key: 'tab4', label: '네 번째', children: <div className="p-4">네 번째 탭</div> },
      { key: 'tab5', label: '다섯 번째', children: <div className="p-4">다섯 번째 탭</div> },
    ],
  },
}

export const WithCustomClassName: Story = {
  args: {
    items: defaultItems,
    className: 'bg-gray-50 p-4 rounded-lg',
    tabPanelClassName: 'bg-white rounded border',
  },
}