import { TrkSectionHeader, Trk } from '../lib/Trk';
import { Button } from '@shared/components/ui/button';
import {
  BUTTON_VARIANT_META,
  BUTTON_VARIANT_ORDER,
  BUTTON_SIZE_ORDER,
} from '@lib/theme/variantMeta';
import { Plus, Download, Trash2, Search, Save } from 'lucide-react';

export function ButtonSection() {
  return (
    <>
      <TrkSectionHeader
        id="TRK-SEC-button"
        title="Button"
        description={`${BUTTON_VARIANT_ORDER.length} variant × ${BUTTON_SIZE_ORDER.length} size = ${BUTTON_VARIANT_ORDER.length * BUTTON_SIZE_ORDER.length} 변형. CVA 기반, 직접 className 작성 금지.`}
      />

      {/* 매트릭스 */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-2">변형 매트릭스</h3>
      <Trk id="TRK-BUTTON-matrix" className="ds-sample">
        <div className="overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
              <tr>
                <th className="text-left text-[10px] text-hint font-mono pb-2 pr-3">
                  variant ↓ / size →
                </th>
                {BUTTON_SIZE_ORDER.map((size) => (
                  <th key={size} className="text-left text-[10px] text-hint font-mono pb-2 px-3">
                    {size}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {BUTTON_VARIANT_ORDER.map((variant) => (
                <tr key={variant}>
                  <td className="text-[11px] text-label font-mono pr-3 py-2">{variant}</td>
                  {BUTTON_SIZE_ORDER.map((size) => (
                    <td key={size} className="px-3 py-2">
                      <Trk id={`TRK-BUTTON-${variant}-${size}`} inline>
                        <Button variant={variant} size={size}>
                          {variant}
                        </Button>
                      </Trk>
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Trk>

      {/* 아이콘 버튼 */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">아이콘 포함 패턴</h3>
      <Trk id="TRK-BUTTON-with-icon" className="ds-sample">
        <div className="flex flex-wrap items-center gap-3">
          <Button variant="primary" icon={<Plus className="w-4 h-4" />}>
            새 항목 추가
          </Button>
          <Button variant="secondary" icon={<Download className="w-4 h-4" />}>
            다운로드
          </Button>
          <Button variant="outline" icon={<Search className="w-4 h-4" />}>
            검색
          </Button>
          <Button variant="ghost" icon={<Save className="w-4 h-4" />}>
            저장
          </Button>
          <Button variant="destructive" icon={<Trash2 className="w-4 h-4" />}>
            삭제
          </Button>
        </div>
      </Trk>

      {/* 상태 */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">상태</h3>
      <Trk id="TRK-BUTTON-states" className="ds-sample">
        <div className="flex flex-wrap items-center gap-3">
          <Button variant="primary">Normal</Button>
          <Button variant="primary" disabled>
            Disabled
          </Button>
        </div>
      </Trk>

      {/* variant 의미 가이드 (variantMeta에서 자동 열거) */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">Variant 의미 가이드</h3>
      <div className="ds-grid ds-grid-2">
        {BUTTON_VARIANT_ORDER.map((variant) => {
          const meta = BUTTON_VARIANT_META[variant];
          return (
            <Trk key={variant} id={`TRK-BUTTON-usage-${variant}`} className="ds-sample">
              <div className="flex items-center gap-3">
                <Button variant={variant} size="sm">
                  {meta.titleKo}
                </Button>
                <span className="text-xs text-label flex-1">{meta.description}</span>
              </div>
            </Trk>
          );
        })}
      </div>

      {/* 사용 예시 */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">사용 예시</h3>
      <Trk id="TRK-BUTTON-usage-code" className="ds-sample">
        <code className="ds-code">
          {`import { Button } from '@shared/components/ui/button';
import { Plus } from 'lucide-react';

<Button variant="primary" size="md" icon={<Plus className="w-4 h-4" />}>
  새 보고서
</Button>

<Button variant="destructive" onClick={handleDelete} disabled={loading}>
  삭제
</Button>

// 금지
// ❌ <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">
// ❌ <Button className="bg-red-500">  → variant="destructive" 사용`}
        </code>
      </Trk>
    </>
  );
}