import React, { ReactNode } from "react";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Edit, Trash2 } from "lucide-react";

export interface MobileItemCardField {
  label: string;
  value: ReactNode;
  visible?: boolean;
}

export interface MobileItemCardAction {
  icon: ReactNode;
  onClick: () => void;
  variant?: "ghost" | "destructive";
  className?: string;
}

export interface MobileItemCardProps {
  /** 카드 고유 키 */
  id: string;
  /** 품목 코드 */
  code?: string;
  /** 코드 배경색 커스터마이징 (기본값: bg-blue-50 text-blue-700) */
  codeClassName?: string;
  /** 제목 (품목명) */
  title: string;
  /** 부제목 (옵션) */
  subtitle?: string;
  /** 배지 목록 */
  badges?: Array<{
    label: string;
    variant?: "default" | "secondary" | "outline" | "destructive";
    className?: string;
  }>;
  /** 필드 목록 */
  fields: MobileItemCardField[];
  /** 액션 버튼 */
  actions?: MobileItemCardAction[];
  /** 클릭 이벤트 */
  onClick?: () => void;
  /** 배경색 커스터마이징 */
  className?: string;
  /** 번호 표시 (옵션) */
  number?: number;
}

/**
 * 모바일 전용 아이템 카드 컴포넌트
 * 
 * @example
 * ```tsx
 * <MobileItemCard
 *   id="item-1"
 *   code="ITEM-001"
 *   title="품목명"
 *   badges={[
 *     { label: "제품", className: "bg-purple-50 text-purple-700" }
 *   ]}
 *   fields={[
 *     { label: "규격", value: "100x200x300" },
 *     { label: "단위", value: <Badge>EA</Badge> }
 *   ]}
 *   actions={[
 *     { icon: <Edit className="h-4 w-4" />, onClick: () => {} },
 *     { icon: <Trash2 className="h-4 w-4 text-red-600" />, onClick: () => {} }
 *   ]}
 * />
 * ```
 */
export function MobileItemCard({
  id,
  code,
  codeClassName = "bg-blue-50 text-blue-700",
  title,
  subtitle,
  badges = [],
  fields,
  actions = [],
  onClick,
  className = "bg-white hover:bg-muted/50",
  number,
}: MobileItemCardProps) {
  return (
    <div
      key={id}
      className={`border rounded-lg p-4 space-y-3 transition-colors shadow-sm ${className} ${onClick ? "cursor-pointer" : ""}`}
      onClick={onClick}
    >
      <div className="space-y-3">
        {/* 번호 + 코드 + 배지 */}
        <div className="flex items-center gap-2 flex-wrap">
          {number && (
            <Badge variant="outline" className="bg-gray-100 text-gray-700 font-mono text-xs">
              #{number}
            </Badge>
          )}
          {code && (
            <code className={`text-xs px-2 py-1 rounded font-mono ${codeClassName}`}>
              {code}
            </code>
          )}
          {badges.map((badge, index) => (
            <Badge
              key={index}
              variant={badge.variant || "outline"}
              className={badge.className || "text-xs"}
            >
              {badge.label}
            </Badge>
          ))}
        </div>

        {/* 제목 */}
        <div className="font-semibold text-base">
          {title}
        </div>

        {/* 부제목 */}
        {subtitle && (
          <div className="text-sm text-muted-foreground">
            {subtitle}
          </div>
        )}

        {/* 필드 목록 */}
        <div className="space-y-2">
          {fields
            .filter((field) => field.visible !== false)
            .map((field, index) => (
              <div key={index}>
                <span className="text-muted-foreground text-xs">{field.label}</span>
                <div className="font-medium mt-1">
                  {field.value || '-'}
                </div>
              </div>
            ))}
        </div>
      </div>

      {/* 액션 버튼 */}
      {actions.length > 0 && (
        <div 
          className="flex items-center justify-end gap-1 pt-2 border-t" 
          onClick={(e) => e.stopPropagation()}
        >
          {actions.map((action, index) => (
            <Button
              key={index}
              variant={action.variant || "ghost"}
              size="sm"
              onClick={action.onClick}
              className={action.className}
            >
              {action.icon}
            </Button>
          ))}
        </div>
      )}
    </div>
  );
}

/**
 * 모바일 카드 리스트 컨테이너
 */
export function MobileItemCardList({ children }: { children: ReactNode }) {
  return (
    <div className="lg:hidden space-y-3">
      {children}
    </div>
  );
}

/**
 * 빈 상태 카드
 */
export function MobileItemCardEmpty({ message = "검색 결과가 없습니다." }: { message?: string }) {
  return (
    <div className="text-center py-8 text-muted-foreground border rounded-lg">
      {message}
    </div>
  );
}
