import { useState } from 'react';
import { TrkSectionHeader, Trk } from '../lib/Trk';
import { Input } from '@shared/components/ui/input';
import { Select } from '@shared/components/ui/select';
import { Textarea } from '@shared/components/ui/textarea';
import { Checkbox } from '@shared/components/ui/checkbox';
import { Radio } from '@shared/components/ui/radio';

export function FormSection() {
  const [radio, setRadio] = useState('a');

  return (
    <>
      <TrkSectionHeader
        id="TRK-SEC-form"
        title="Form 요소"
        description="Input · Select · Textarea · Checkbox · Radio. 공통 스타일 토큰 공유."
      />

      {/* Input 사이즈 */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-2">Input · 사이즈</h3>
      <div className="ds-grid ds-grid-3">
        {(['sm', 'md', 'lg'] as const).map((size) => (
          <Trk key={size} id={`TRK-FORM-input-${size}`} className="ds-sample">
            <label className="text-[10px] text-hint font-mono mb-1 block">size={size}</label>
            <Input size={size} placeholder={`Input size=${size}`} />
          </Trk>
        ))}
      </div>

      {/* Input 상태 */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">Input · 상태</h3>
      <div className="ds-grid ds-grid-3">
        <Trk id="TRK-FORM-input-default" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-1 block">state=default</label>
          <Input placeholder="기본 상태" />
        </Trk>
        <Trk id="TRK-FORM-input-error" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-1 block">state=error</label>
          <Input state="error" defaultValue="잘못된 값" />
        </Trk>
        <Trk id="TRK-FORM-input-success" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-1 block">state=success</label>
          <Input state="success" defaultValue="유효한 값" />
        </Trk>
        <Trk id="TRK-FORM-input-disabled" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-1 block">disabled</label>
          <Input disabled defaultValue="비활성" />
        </Trk>
        <Trk id="TRK-FORM-input-readonly" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-1 block">readOnly</label>
          <Input readOnly defaultValue="읽기 전용" />
        </Trk>
        <Trk id="TRK-FORM-input-type-number" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-1 block">type=number</label>
          <Input type="number" defaultValue={42} />
        </Trk>
      </div>

      {/* Select */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">Select</h3>
      <div className="ds-grid ds-grid-3">
        {(['sm', 'md', 'lg'] as const).map((size) => (
          <Trk key={size} id={`TRK-FORM-select-${size}`} className="ds-sample">
            <label className="text-[10px] text-hint font-mono mb-1 block">size={size}</label>
            <Select aria-label={`쇼케이스 샘플 Select ${size}`} size={size} defaultValue="">
              <option value="">전체 선택</option>
              <option value="CRITICAL">CRITICAL</option>
              <option value="HIGH">HIGH</option>
              <option value="MEDIUM">MEDIUM</option>
            </Select>
          </Trk>
        ))}
      </div>

      {/* Textarea */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">Textarea</h3>
      <Trk id="TRK-FORM-textarea" className="ds-sample">
        <Textarea placeholder="여러 줄 입력..." rows={3} />
      </Trk>

      {/* Checkbox */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">Checkbox</h3>
      <Trk id="TRK-FORM-checkbox" className="ds-sample">
        <div className="flex flex-wrap gap-4">
          <Checkbox label="옵션 1" defaultChecked />
          <Checkbox label="옵션 2" />
          <Checkbox label="비활성" disabled />
          <Checkbox label="체크됨 비활성" disabled defaultChecked />
        </div>
      </Trk>

      {/* Radio */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">Radio</h3>
      <Trk id="TRK-FORM-radio" className="ds-sample">
        <div className="flex flex-wrap gap-4">
          <Radio name="grp" label="선택 A" checked={radio === 'a'} onChange={() => setRadio('a')} />
          <Radio name="grp" label="선택 B" checked={radio === 'b'} onChange={() => setRadio('b')} />
          <Radio name="grp" label="선택 C" checked={radio === 'c'} onChange={() => setRadio('c')} />
          <Radio name="grp" label="비활성" disabled />
        </div>
      </Trk>

      {/* 사용 예시 */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">사용 예시</h3>
      <Trk id="TRK-FORM-usage-code" className="ds-sample">
        <code className="ds-code">
          {`import { Input } from '@shared/components/ui/input';
import { Select } from '@shared/components/ui/select';
import { Checkbox } from '@shared/components/ui/checkbox';

<Input size="md" placeholder="검색어 입력" value={q} onChange={(e) => setQ(e.target.value)} />

<Select size="sm" value={level} onChange={(e) => setLevel(e.target.value)}>
  <option value="">전체 등급</option>
  <option value="CRITICAL">CRITICAL</option>
</Select>

<Checkbox label="활성화" checked={active} onChange={(e) => setActive(e.target.checked)} />`}
        </code>
      </Trk>
    </>
  );
}
