/**
 * TabbedTableTemplate 사용 예시
 * 
 * 이 템플릿은 탭과 테이블이 있는 모든 페이지에 적용할 수 있습니다.
 * - 데스크톱: 기본 TabsList + Table
 * - 모바일: 커스텀 버튼 탭 + MobileCard
 * - 페이지네이션 자동 처리
 */

import { TabbedTableTemplate, TabConfig, TableColumn } from "./TabbedTableTemplate";
import { MobileCard } from "../organisms/MobileCard";
import { TableRow, TableCell } from "../ui/table";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Edit, Trash2, Eye } from "lucide-react";

// 1. 데이터 타입 정의
interface MyDataType {
  id: string;
  code: string;
  name: string;
  type: string;
  status: string;
  createdAt: string;
}

// 2. 컴포넌트 예시
export function MyTabTablePage() {
  // 실제 데이터 (useData나 useState로 가져옴)
  const data: MyDataType[] = [
    // ... 데이터
  ];

  // 3. 탭 구성
  const tabs: TabConfig[] = [
    { value: 'all', label: '전체', count: data.length, color: 'blue' },
    { value: 'active', label: '활성', count: data.filter(d => d.status === 'active').length, color: 'green' },
    { value: 'inactive', label: '비활성', count: data.filter(d => d.status === 'inactive').length, color: 'gray' },
  ];

  // 4. 테이블 컬럼 정의
  const columns: TableColumn[] = [
    { key: 'no', label: '번호', className: 'w-16' },
    { key: 'code', label: '코드', className: 'w-32' },
    { key: 'name', label: '이름' },
    { key: 'type', label: '유형', hidden: 'md' }, // md 미만에서는 숨김
    { key: 'status', label: '상태' },
    { key: 'created', label: '등록일', hidden: 'lg' }, // lg 미만에서는 숨김
    { key: 'actions', label: '작업', className: 'text-right' },
  ];

  // 5. 모바일 카드 렌더링 함수
  const renderMobileCard = (item: MyDataType, index: number) => (
    <MobileCard
      key={item.id}
      title={item.code}
      subtitle={item.name}
      badge={{
        label: item.status === 'active' ? '활성' : '비활성',
        variant: item.status === 'active' ? 'default' : 'outline'
      }}
      fields={[
        { label: '유형', value: item.type },
        { label: '등록일', value: item.createdAt },
      ]}
      actions={[
        {
          label: '상세',
          onClick: () => console.log('view', item.id),
          icon: Eye,
          variant: 'outline'
        },
        {
          label: '수정',
          onClick: () => console.log('edit', item.id),
          icon: Edit,
          variant: 'outline'
        }
      ]}
    />
  );

  // 6. 테이블 행 렌더링 함수
  const renderTableRow = (item: MyDataType, index: number, globalIndex: number) => (
    <TableRow key={item.id} className="hover:bg-muted/50">
      <TableCell>{globalIndex + 1}</TableCell>
      <TableCell>
        <code className="text-xs bg-gray-100 px-2 py-1 rounded">
          {item.code}
        </code>
      </TableCell>
      <TableCell className="font-medium">{item.name}</TableCell>
      <TableCell className="hidden md:table-cell">{item.type}</TableCell>
      <TableCell>
        <Badge variant={item.status === 'active' ? 'default' : 'outline'}>
          {item.status === 'active' ? '활성' : '비활성'}
        </Badge>
      </TableCell>
      <TableCell className="hidden lg:table-cell text-sm text-muted-foreground">
        {item.createdAt}
      </TableCell>
      <TableCell className="text-right">
        <div className="flex items-center justify-end gap-2">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => console.log('edit', item.id)}
          >
            <Edit className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => console.log('delete', item.id)}
          >
            <Trash2 className="h-4 w-4 text-red-600" />
          </Button>
        </div>
      </TableCell>
    </TableRow>
  );

  // 7. 템플릿 사용
  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">내 페이지</h1>
      
      <TabbedTableTemplate
        title="데이터 목록"
        tabs={tabs}
        defaultTab="all"
        data={data}
        columns={columns}
        itemsPerPage={20}
        renderMobileCard={renderMobileCard}
        renderTableRow={renderTableRow}
        emptyMessage="데이터가 없습니다."
        showPagination={true}
        onTabChange={(tab) => console.log('탭 변경:', tab)}
      />
    </div>
  );
}

/**
 * 주요 Props 설명:
 * 
 * - title: 카드 타이틀 (선택사항)
 * - tabs: 탭 구성 배열
 *   - value: 탭 값 (고유)
 *   - label: 탭 라벨
 *   - count: 카운트 (모바일 탭에 표시)
 *   - color: 모바일 탭 색상 (blue, purple, orange, cyan, green, gray)
 * 
 * - defaultTab: 기본 선택 탭
 * - data: 표시할 데이터 배열
 * - columns: 테이블 컬럼 정의
 *   - key: 컬럼 키
 *   - label: 컬럼 라벨
 *   - className: 추가 CSS 클래스
 *   - hidden: 특정 브레이크포인트에서 숨김 (md, lg, xl, 2xl)
 * 
 * - itemsPerPage: 페이지당 항목 수 (기본: 20)
 * - renderMobileCard: 모바일 카드 렌더링 함수
 * - renderTableRow: 테이블 행 렌더링 함수
 * - emptyMessage: 빈 상태 메시지
 * - showPagination: 페이지네이션 표시 여부 (기본: true)
 * - onTabChange: 탭 변경 이벤트 핸들러
 */
