import { ReactNode } from "react";
import { TableRow, TableCell } from "../ui/table";
import { Checkbox } from "../ui/checkbox";

/**
 * 목록 테이블 행 컴포넌트
 * 
 * 데스크톱 환경에서 사용하는 공통 테이블 행 컴포넌트입니다.
 * 체크박스와 선택 상태를 지원합니다.
 * 
 * @example
 * ```tsx
 * <ListTableRow
 *   id="item-1"
 *   isSelected={false}
 *   onToggleSelection={() => handleToggle("item-1")}
 *   onRowClick={() => handleView("item-1")}
 * >
 *   <TableCell>Q2024-001</TableCell>
 *   <TableCell>ABC건설</TableCell>
 *   <TableCell>10,000,000원</TableCell>
 * </ListTableRow>
 * ```
 */

export interface ListTableRowProps {
  /** 아이템 고유 ID */
  id: string;
  
  /** 선택 상태 */
  isSelected: boolean;
  
  /** 체크박스 토글 핸들러 */
  onToggleSelection: () => void;
  
  /** 행 클릭 핸들러 */
  onRowClick?: () => void;
  
  /** 테이블 셀 내용 (children) */
  children: ReactNode;
  
  /** 추가 className */
  className?: string;
  
  /** 체크박스 표시 여부 */
  showCheckbox?: boolean;
}

export function ListTableRow({
  id,
  isSelected,
  onToggleSelection,
  onRowClick,
  children,
  className = "",
  showCheckbox = true
}: ListTableRowProps) {
  return (
    <TableRow 
      key={id}
      className={`cursor-pointer hover:bg-muted/50 ${isSelected ? "bg-blue-50" : ""} ${className}`}
      onClick={onRowClick}
    >
      {showCheckbox && (
        <TableCell 
          onClick={(e) => e.stopPropagation()} 
          className="text-center"
        >
          <Checkbox
            checked={isSelected}
            onCheckedChange={onToggleSelection}
          />
        </TableCell>
      )}
      {children}
    </TableRow>
  );
}

/**
 * 코드 셀 컴포넌트
 * 
 * 코드나 ID를 표시하는 셀입니다.
 */
export interface CodeCellProps {
  code: string;
  onClick?: (e: React.MouseEvent) => void;
}

export function CodeCell({ code, onClick }: CodeCellProps) {
  return (
    <TableCell onClick={onClick}>
      <code className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded font-mono">
        {code || "-"}
      </code>
    </TableCell>
  );
}

/**
 * 액션 셀 컴포넌트
 * 
 * 액션 버튼들을 표시하는 셀입니다.
 */
export interface ActionCellProps {
  children: ReactNode;
  isSelected: boolean;
}

export function ActionCell({ children, isSelected }: ActionCellProps) {
  if (!isSelected) {
    return <TableCell />;
  }
  
  return (
    <TableCell onClick={(e) => e.stopPropagation()}>
      {children}
    </TableCell>
  );
}
