"use client";

/**
 * CardModeRenderer — shared card grid renderer
 *
 * 2026-05-20 table-list / v2-table-list 의 중복 CardModeRenderer 를 흡수.
 * `variant="v2"` prop 으로 v2 전용 이미지 URL 정규화 (objid → getFilePreviewUrl,
 * path → getFullImageUrl) 와 이미지 로드 실패 시 fallback DOM 삽입을 분기 처리.
 *
 * 이 파일은 legacy table-list / v2-table-list local type files 를 import 하지 않는다.
 * shared 타입은 `./tableListConfigTypes` 에서 가져온다.
 */

import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Eye, Edit, Trash2, MoreHorizontal } from "lucide-react";
import type { CardDisplayConfig, ColumnConfig } from "./tableListConfigTypes";
import { getFullImageUrl } from "@/lib/api/client";
import { getFilePreviewUrl } from "@/lib/api/file";

export type CardModeVariant = "default" | "v2";

interface CardModeRendererProps {
  /** 시각/동작 분기 — 기본은 table-list 기존 동작, "v2" 는 v2-table-list 흡수 분기 */
  variant?: CardModeVariant;
  data: Record<string, any>[];
  cardConfig: CardDisplayConfig;
  visibleColumns: ColumnConfig[];
  onRowClick?: (row: Record<string, any>, index: number, e: React.MouseEvent) => void;
  onRowSelect?: (row: Record<string, any>, selected: boolean) => void;
  selectedRows?: string[];
}

/**
 * 카드 모드 렌더러
 * 테이블 데이터를 카드 형태로 표시
 */
export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
  variant = "default",
  data,
  cardConfig,
  visibleColumns,
  onRowClick,
  selectedRows = [],
}) => {
  const isV2 = variant === "v2";
  // 기본값과 병합
  const config = {
    idColumn: cardConfig?.idColumn || "",
    titleColumn: cardConfig?.titleColumn || "",
    subtitleColumn: cardConfig?.subtitleColumn,
    descriptionColumn: cardConfig?.descriptionColumn,
    imageColumn: cardConfig?.imageColumn,
    cardsPerRow: cardConfig?.cardsPerRow ?? 3,
    cardSpacing: cardConfig?.cardSpacing ?? 16,
    showActions: cardConfig?.showActions ?? true,
    cardHeight: cardConfig?.cardHeight as number | "auto" | undefined,
  };

  // 디버깅: cardConfig 확인
  console.log("🃏 CardModeRenderer config:", { cardConfig, mergedConfig: config });

  // 카드 그리드 스타일 계산
  const gridStyle: React.CSSProperties = {
    display: "grid",
    gridTemplateColumns: `repeat(${config.cardsPerRow}, 1fr)`,
    gap: `${config.cardSpacing}px`,
    padding: `${config.cardSpacing}px`,
    overflow: "auto",
  };

  // 카드 높이 스타일
  const cardStyle: React.CSSProperties = {
    height: config.cardHeight === "auto" ? "auto" : `${config.cardHeight}px`,
    cursor: onRowClick ? "pointer" : "default",
  };

  // 컬럼 값 가져오기 함수
  const getColumnValue = (row: Record<string, any>, columnName?: string): string => {
    if (!columnName || !row) return "";
    return String(row[columnName] || "");
  };

  // 액션 버튼 렌더링
  const renderActions = (_row: Record<string, any>) => {
    if (!config.showActions) return null;

    return (
      <div className="mt-3 flex items-center justify-end space-x-1 border-t border-border pt-3">
        <Button
          variant="ghost"
          size="sm"
          onClick={(e) => {
            e.stopPropagation();
            // 상세보기 액션
          }}
        >
          <Eye className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={(e) => {
            e.stopPropagation();
            // 편집 액션
          }}
        >
          <Edit className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={(e) => {
            e.stopPropagation();
            // 삭제 액션
          }}
        >
          <Trash2 className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={(e) => {
            e.stopPropagation();
            // 더보기 액션
          }}
        >
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </div>
    );
  };

  // 데이터가 없는 경우
  if (!data || data.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <div className="bg-muted mb-4 flex h-16 w-16 items-center justify-center rounded-2xl">
          <div className="bg-muted-foreground/20 h-8 w-8 rounded-lg"></div>
        </div>
        <div className="text-muted-foreground mb-1 text-sm font-medium">표시할 데이터가 없습니다</div>
        <div className="text-muted-foreground/60 text-xs">조건을 변경하거나 새로운 데이터를 추가해보세요</div>
      </div>
    );
  }

  return (
    <div style={gridStyle} className="w-full">
      {data.map((row, index) => {
        const idValue = getColumnValue(row, config.idColumn);
        const titleValue = getColumnValue(row, config.titleColumn);
        const subtitleValue = getColumnValue(row, config.subtitleColumn);
        const descriptionValue = getColumnValue(row, config.descriptionColumn);
        const imageValue = getColumnValue(row, config.imageColumn);

        const isSelected = selectedRows.includes(idValue);

        return (
          <Card
            key={`card-${index}-${idValue}`}
            style={cardStyle}
            className={`transition-all duration-200 hover:shadow-md ${
              isSelected ? "bg-primary/10/30 ring-2 ring-ring" : ""
            }`}
            onClick={(e) => onRowClick?.(row, index, e)}
          >
            <CardHeader className="pb-3">
              <div className="flex items-start justify-between">
                <div className="min-w-0 flex-1">
                  <CardTitle className="truncate text-sm font-medium">{titleValue || "제목 없음"}</CardTitle>
                  {subtitleValue && <div className="mt-1 truncate text-xs text-muted-foreground">{subtitleValue}</div>}
                </div>

                {/* ID 뱃지 */}
                {idValue && (
                  <Badge variant="secondary" className="ml-2 text-xs">
                    {idValue}
                  </Badge>
                )}
              </div>
            </CardHeader>

            <CardContent className="pt-0">
              {/* 이미지 표시 */}
              {imageValue && (
                <div className="mb-3">
                  <img
                    src={
                      isV2
                        ? (() => {
                            // ★ v2 전용: 숫자 objid → getFilePreviewUrl, 그 외 path → getFullImageUrl 정규화
                            const strValue = String(imageValue);
                            const isObjid = /^\d+$/.test(strValue);
                            return isObjid ? getFilePreviewUrl(strValue) : getFullImageUrl(strValue);
                          })()
                        : imageValue
                    }
                    alt={titleValue}
                    className="h-24 w-full rounded-md bg-muted object-cover"
                    onError={(e) => {
                      const target = e.target as HTMLImageElement;
                      // 이미지 로드 실패 시 폴백 표시
                      target.style.display = "none";
                      // ★ v2 전용: 폴백 DOM 삽입 (data-image-fallback). default 는 단순 hide 만.
                      if (!isV2) return;
                      const parent = target.parentElement;
                      if (parent && !parent.querySelector("[data-image-fallback]")) {
                        const fallback = document.createElement("div");
                        fallback.setAttribute("data-image-fallback", "true");
                        fallback.className = "flex items-center justify-center h-24 w-full rounded-md bg-muted text-muted-foreground";
                        fallback.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="2" x2="22" y2="22"/><path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/><line x1="13.5" y1="13.5" x2="6" y2="21"/><line x1="18" y1="12" x2="21" y2="15"/><path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/><path d="M21 15V5a2 2 0 0 0-2-2H9"/></svg>`;
                        parent.appendChild(fallback);
                      }
                    }}
                  />
                </div>
              )}

              {/* 설명 표시 */}
              {descriptionValue && <div className="mb-3 line-clamp-2 text-xs text-muted-foreground">{descriptionValue}</div>}

              {/* 추가 필드들 표시 (선택적) */}
              <div className="space-y-1">
                {(visibleColumns || [])
                  .filter(
                    (col) =>
                      col.columnName !== config.idColumn &&
                      col.columnName !== config.titleColumn &&
                      col.columnName !== config.subtitleColumn &&
                      col.columnName !== config.descriptionColumn &&
                      col.columnName !== config.imageColumn &&
                      col.columnName !== "__checkbox__" &&
                      col.visible,
                  )
                  .slice(0, 3) // 최대 3개 추가 필드만 표시
                  .map((col) => {
                    const value = getColumnValue(row, col.columnName);
                    if (!value) return null;

                    return (
                      <div key={col.columnName} className="flex items-center justify-between text-xs">
                        <span className="truncate text-muted-foreground">{col.displayName}:</span>
                        <span className="ml-2 truncate font-medium">{value}</span>
                      </div>
                    );
                  })}
              </div>

              {/* 액션 버튼들 */}
              {renderActions(row)}
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
};