import type { Meta, StoryObj } from '@storybook/react'
import React, { useState } from 'react'
import { Checkbox, Input, NumberInput, Radio, SearchInput, Select, Slider, Textarea, Toggle } from './Input'

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

export const TextInputs: StoryObj = {
  render: () => (
    <div className="space-y-4 w-72">
      <Input label="도구 이름" placeholder="도구 이름을 입력하세요" />
      <Input label="API 키" placeholder="sk-..." error="유효하지 않은 API 키입니다." />
      <Input label="설명" placeholder="비활성화됨" disabled />
      <Input label="검색" leftIcon="search" placeholder="검색..." />
    </div>
  ),
}

export const FormControls: StoryObj = {
  render: () => {
    const [checked, setChecked] = useState(false)
    const [radio, setRadio] = useState('auto')
    const [tog, setTog] = useState(true)
    return (
      <div className="space-y-4 w-72">
        <Toggle checked={tog} onChange={setTog} label="자동 실행" />
        <Checkbox checked={checked} onChange={setChecked} label="이메일 알림" />
        <div className="space-y-2">
          <Radio checked={radio === 'auto'} onChange={() => setRadio('auto')} label="자동 모드" />
          <Radio checked={radio === 'manual'} onChange={() => setRadio('manual')} label="수동 모드" />
        </div>
      </div>
    )
  },
}

export const NumberInputStory: StoryObj = {
  name: 'NumberInput',
  render: () => {
    const [val, setVal] = useState(3)
    const [delay, setDelay] = useState(30)
    return (
      <div className="space-y-4">
        <NumberInput label="반복 횟수" value={val} onChange={setVal} min={1} max={100} />
        <NumberInput label="대기 시간" value={delay} onChange={setDelay} min={0} max={3600} step={10} unit="초" />
      </div>
    )
  },
}

export const SliderStory: StoryObj = {
  name: 'Slider',
  render: () => {
    const [temp, setTemp] = useState(0.7)
    return (
      <div className="w-72">
        <Slider label="온도 (Temperature)" value={temp} onChange={setTemp} min={0} max={1} step={0.1} />
      </div>
    )
  },
}

export const SelectStory: StoryObj = {
  name: 'Select',
  render: () => (
    <div className="w-72 space-y-4">
      <Select label="카테고리">
        <option>텍스트 생성</option>
        <option>이미지 처리</option>
        <option>데이터 분석</option>
      </Select>
      <Select label="국가" error="국가를 선택해주세요">
        <option>한국</option>
        <option>미국</option>
      </Select>
    </div>
  ),
}

export const TextareaStory: StoryObj = {
  name: 'Textarea',
  render: () => (
    <div className="w-72 space-y-4">
      <Textarea label="프롬프트 입력" placeholder="회의 내용을 요약해서 핵심 포인트 3가지로 정리해주세요..." rows={3} />
      <SearchInput placeholder="도구 검색..." />
    </div>
  ),
}