import type { Meta, StoryObj } from '@storybook/react'
import React, { useState } from 'react'
import { BulkActionBar } from './BulkActionBar'
import { DescriptionList } from './DescriptionList'
import { BadgeStatus } from './Badge'
import { Tooltip } from './Tooltip'
import { DropZone, FileItem } from './Upload'

const meta: Meta = {
  title: 'Components/Misc',
  parameters: { layout: 'centered' },
}
export default meta

export const TooltipStory: StoryObj = {
  name: 'Tooltip',
  render: () => (
    <div className="flex gap-8 p-16">
      <Tooltip content="API 키는 설정 페이지에서 발급할 수 있습니다.">
        <button className="text-slate-400 hover:text-slate-600">
          <span className="material-symbols-outlined text-[16px]">help</span>
        </button>
      </Tooltip>
      <Tooltip content="하단에 표시됩니다" placement="bottom">
        <button className="text-slate-400 hover:text-slate-600">
          <span className="material-symbols-outlined text-[16px]">info</span>
        </button>
      </Tooltip>
      <Tooltip content="이 도구는 회의 녹취를 분석하여 핵심 포인트를 자동으로 추출합니다." maxWidth>
        <button className="text-slate-400 hover:text-slate-600 text-xs font-semibold underline decoration-dashed">
          자세히
        </button>
      </Tooltip>
    </div>
  ),
}

export const DescriptionListStory: StoryObj = {
  name: 'DescriptionList',
  render: () => (
    <div className="space-y-8 w-80">
      <DescriptionList
        items={[
          { label: '버전', value: 'v2.1.0' },
          { label: '상태', value: <BadgeStatus status="active">활성</BadgeStatus> },
          { label: '최근 사용', value: '2분 전' },
          { label: '생성일', value: '2026.03.15' },
        ]}
      />
      <DescriptionList
        divider
        items={[
          { label: '버전', value: 'v2.1.0' },
          { label: '상태', value: <BadgeStatus status="active">활성</BadgeStatus> },
          { label: '생성일', value: '2026.03.15' },
        ]}
      />
    </div>
  ),
}

export const DropZoneStory: StoryObj = {
  name: 'DropZone',
  render: () => (
    <div className="space-y-3 w-96">
      <DropZone
        accept=".csv,.xlsx"
        label="파일을 드래그하거나 클릭하여 업로드"
        description="CSV, XLSX (최대 10MB)"
        onFileSelect={(files) => console.log(files)}
      />
      <FileItem name="회의록_2026-03.csv" size="2.4 MB" status="complete" onRemove={() => {}} />
      <FileItem name="데이터.xlsx" size="5.1 MB" status="uploading" progress={65} onRemove={() => {}} />
      <FileItem name="오류파일.csv" size="1.2 MB" status="error" onRemove={() => {}} />
    </div>
  ),
}

export const BulkActionBarStory: StoryObj = {
  name: 'BulkActionBar',
  render: () => {
    const [count, setCount] = useState(5)
    return (
      <div className="relative w-[640px] h-32 flex items-center justify-center">
        <button onClick={() => setCount((c) => (c > 0 ? c - 1 : 5))} className="text-xs text-teal-500 underline">
          선택 수 조절 ({count}개)
        </button>
        <BulkActionBar
          selectedCount={count}
          onClearSelection={() => setCount(0)}
          position="bottom-sticky"
          actions={[
            { label: '거부', icon: 'close', onClick: () => {}, variant: 'secondary' },
            { label: '재처리', icon: 'refresh', onClick: () => {}, variant: 'secondary' },
            { label: '수락', icon: 'check', onClick: () => {}, variant: 'primary' },
          ]}
        />
      </div>
    )
  },
}