"use client";

import React, { useMemo } from "react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { Database, FolderTree, Hash, Link2, FileCode2 } from "lucide-react";
import type { ColumnTypeInfo, TableInfo } from "./types";
import { INPUT_TYPE_COLORS } from "./types";
import type { ReferenceTableColumn } from "@/lib/api/entityJoin";

export interface ReferenceListViewProps {
  columns: ColumnTypeInfo[];
  tables?: TableInfo[];
  referenceTableColumns?: Record<string, ReferenceTableColumn[]>;
  onSelectColumn?: (columnName: string) => void;
  selectedColumn?: string | null;
}

type RefKind = "entity" | "code" | "category" | "numbering";

const KIND_META: Record<
  RefKind,
  { icon: React.FC<{ className?: string }>; label: string; color: string; bgColor: string }
> = {
  entity:    { icon: Link2,      label: "테이블 참조", color: "text-violet-600",  bgColor: "bg-violet-50" },
  code:      { icon: FileCode2,  label: "공통코드",    color: "text-emerald-600", bgColor: "bg-emerald-50" },
  category:  { icon: FolderTree, label: "카테고리",    color: "text-teal-600",    bgColor: "bg-teal-50" },
  numbering: { icon: Hash,       label: "채번",        color: "text-orange-600",  bgColor: "bg-orange-50" },
};

function getRefKind(col: ColumnTypeInfo): RefKind | null {
  const t = col.input_type;
  if (t === "entity" || t === "code" || t === "category" || t === "numbering") return t;
  return null;
}

export function ReferenceListView({
  columns,
  tables,
  referenceTableColumns,
  onSelectColumn,
  selectedColumn = null,
}: ReferenceListViewProps) {
  const grouped = useMemo(() => {
    const groups: Record<RefKind, ColumnTypeInfo[]> = {
      entity: [],
      code: [],
      category: [],
      numbering: [],
    };
    for (const col of columns) {
      const kind = getRefKind(col);
      if (kind) groups[kind].push(col);
    }
    return groups;
  }, [columns]);

  const totalRefs =
    grouped.entity.length + grouped.code.length + grouped.category.length + grouped.numbering.length;

  if (totalRefs === 0) {
    return (
      <div className="flex flex-1 items-center justify-center py-12 text-sm text-muted-foreground">
        <div className="flex flex-col items-center gap-2">
          <Database className="h-8 w-8 text-muted-foreground/50" />
          <span>이 테이블에는 참조 컬럼이 없어요.</span>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-1 flex-col overflow-hidden">
      {/* 헤더 */}
      <div
        className="grid flex-shrink-0 items-center border-b bg-muted/50 px-4 py-2 text-xs font-semibold text-foreground"
        style={{ gridTemplateColumns: "4px 220px 110px 1fr" }}
      >
        <span />
        <span>소스 컬럼</span>
        <span>참조 종류</span>
        <span>참조 대상</span>
      </div>

      {/* 그룹별 행 */}
      <div className="flex-1 overflow-y-auto">
        {(["entity", "code", "category", "numbering"] as const).map((kind) => {
          const list = grouped[kind];
          if (list.length === 0) return null;
          const meta = KIND_META[kind];
          const KindIcon = meta.icon;
          return (
            <div key={kind} className="space-y-1 py-2">
              <div className="flex items-center gap-2 border-b border-border/60 px-4 pb-1.5">
                <KindIcon className={cn("h-4 w-4", meta.color)} />
                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  {meta.label}
                </span>
                <Badge variant="secondary" className="text-xs">
                  {list.length}
                </Badge>
              </div>
              {list.map((column) => {
                const typeConf = INPUT_TYPE_COLORS[column.input_type || "text"] || INPUT_TYPE_COLORS.text;
                const isSelected = selectedColumn === column.column_name;
                return (
                  <div
                    key={column.column_name}
                    role="button"
                    tabIndex={0}
                    onClick={() => onSelectColumn?.(column.column_name)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault();
                        onSelectColumn?.(column.column_name);
                      }
                    }}
                    className={cn(
                      "grid min-h-10 cursor-pointer items-center gap-2 rounded-md border px-4 py-2 transition-colors",
                      "bg-card border-transparent hover:border-border hover:shadow-sm",
                      isSelected && "border-primary/30 bg-primary/5 shadow-sm",
                    )}
                    style={{ gridTemplateColumns: "4px 220px 110px 1fr" }}
                  >
                    {/* 색상바 */}
                    <div className={cn("h-full min-h-8 w-1 rounded-full", typeConf.barColor)} />

                    {/* 소스 컬럼명 */}
                    <div className="min-w-0">
                      <div className="truncate text-xs font-medium">
                        {column.display_name && column.display_name !== column.column_name
                          ? `${column.display_name} (${column.column_name})`
                          : column.column_name}
                      </div>
                    </div>

                    {/* 참조 종류 칩 */}
                    <div className={cn("inline-flex w-fit items-center gap-1 rounded-md border px-2 py-0.5 text-xs", meta.bgColor, meta.color)}>
                      <span className="h-1.5 w-1.5 rounded-full bg-current opacity-70" />
                      {meta.label}
                    </div>

                    {/* 참조 대상 */}
                    <div className="flex min-w-0 flex-wrap items-center gap-1">
                      {kind === "entity" && column.reference_table && column.reference_table !== "none" ? (
                        <>
                          <Badge
                            variant="outline"
                            className="text-xs font-normal"
                            title={
                              tables
                                ? (() => {
                                    const t = tables.find((tb) => tb.table_name === column.reference_table);
                                    return t?.display_name && t.display_name !== t.table_name
                                      ? `${t.display_name} (${column.reference_table})`
                                      : column.reference_table;
                                  })()
                                : column.reference_table
                            }
                          >
                            {column.reference_table}
                          </Badge>
                          <span className="text-muted-foreground text-xs">→</span>
                          <Badge
                            variant="outline"
                            className="text-xs font-normal"
                            title={
                              referenceTableColumns?.[column.reference_table]
                                ? (() => {
                                    const refCols = referenceTableColumns[column.reference_table];
                                    const c = refCols.find((rc) => rc.column_name === (column.reference_column ?? ""));
                                    return c?.display_name && c.display_name !== c.column_name
                                      ? `${c.display_name} (${column.reference_column})`
                                      : column.reference_column ?? "—";
                                  })()
                                : column.reference_column ?? "—"
                            }
                          >
                            {column.reference_column || "—"}
                          </Badge>
                        </>
                      ) : kind === "code" ? (
                        column.code_info ? (
                          <Badge variant="outline" className="text-xs font-normal">
                            코드: {column.code_info}
                          </Badge>
                        ) : (
                          <span className="text-muted-foreground/60 text-xs">— (코드 그룹 미지정)</span>
                        )
                      ) : kind === "category" ? (
                        column.category_ref ? (
                          <Badge variant="outline" className="text-xs font-normal">
                            카테고리: {column.category_ref}
                          </Badge>
                        ) : column.category_menus && column.category_menus.length > 0 ? (
                          <Badge variant="outline" className="text-xs font-normal">
                            카테고리 메뉴 {column.category_menus.length}개
                          </Badge>
                        ) : (
                          <span className="text-muted-foreground/60 text-xs">— (카테고리 미지정)</span>
                        )
                      ) : kind === "numbering" ? (
                        column.numbering_rule_id ? (
                          <Badge variant="outline" className="text-xs font-normal">
                            채번: {column.numbering_rule_id}
                          </Badge>
                        ) : (
                          <span className="text-muted-foreground/60 text-xs">— (채번 규칙 미지정)</span>
                        )
                      ) : (
                        <span className="text-muted-foreground/60 text-xs">—</span>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
    </div>
  );
}
