/**
 * CardView - DataView의 카드 뷰
 * - 카드 그리드 레이아웃
 * - Phase A: 기본 카드 렌더링만 구현
 */

"use client";

import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

interface CardViewProps {
  data: any[];
  columns: string[];
  tableName: string;
  loading?: boolean;
  onCardClick?: (row: any) => void;
}

export function CardView({ data, columns, tableName, loading = false, onCardClick }: CardViewProps) {
  // 로딩 스켈레톤
  if (loading) {
    return (
      <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <Skeleton key={i} className="h-32 w-full" />
        ))}
      </div>
    );
  }

  // 데이터 없음
  if (data.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <div className="mb-2 text-sm font-semibold">데이터가 없습니다</div>
        <p className="text-xs text-muted-foreground">아직 등록된 항목이 없습니다</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3">
      {data.map((row, index) => {
        const rowId = row.id || String(index);
        const titleColumn = columns[0]; // 첫 번째 컬럼을 제목으로 사용

        return (
          <Card
            key={rowId}
            className={cn(
              "cursor-pointer transition-all hover:shadow-md",
              onCardClick && "hover:border-primary"
            )}
            onClick={() => onCardClick?.(row)}
          >
            <CardHeader className="p-4">
              <CardTitle className="text-sm font-semibold">{row[titleColumn] || "(제목 없음)"}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-1 p-4 pt-0">
              {columns.slice(1).map((column) => (
                <div key={column} className="flex justify-between text-xs">
                  <span className="text-muted-foreground">{column}:</span>
                  <span className="font-medium">{formatValue(row[column])}</span>
                </div>
              ))}
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}

// 값 포맷팅
function formatValue(value: any): string {
  if (value === null || value === undefined) {
    return "-";
  }

  if (typeof value === "boolean") {
    return value ? "O" : "X";
  }

  if (value instanceof Date) {
    return value.toLocaleDateString("ko-KR");
  }

  if (typeof value === "object") {
    return JSON.stringify(value);
  }

  return String(value);
}