"use client";

import React from "react";
import { Table, Filter, Search, Download, RefreshCw, Plus, Edit, Trash2 } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";

/**
 * 데이터 테이블 템플릿 컴포넌트
 * 기존 하드코딩된 데이터 테이블 기능을 독립적인 컴포넌트로 분리
 */

export interface DataTableTemplateProps {
  /**
   * 테이블 제목
   */
  title?: string;

  /**
   * 테이블 설명
   */
  description?: string;

  /**
   * 컬럼 정의
   */
  columns?: Array<{
    id: string;
    label: string;
    type: string;
    visible: boolean;
    sortable: boolean;
    filterable: boolean;
    width?: number;
  }>;

  /**
   * 필터 설정
   */
  filters?: Array<{
    id: string;
    label: string;
    type: "text" | "select" | "date" | "number";
    options?: Array<{ label: string; value: string }>;
  }>;

  /**
   * 페이징 설정
   */
  pagination?: {
    enabled: boolean;
    pageSize: number;
    pageSizeOptions: number[];
    showPageSizeSelector: boolean;
    showPageInfo: boolean;
    showFirstLast: boolean;
  };

  /**
   * 액션 버튼 설정
   */
  actions?: {
    showSearchButton: boolean;
    searchButtonText: string;
    enableExport: boolean;
    enableRefresh: boolean;
    enableAdd: boolean;
    enableEdit: boolean;
    enableDelete: boolean;
    addButtonText: string;
    editButtonText: string;
    deleteButtonText: string;
  };

  /**
   * 스타일 설정
   */
  style?: React.CSSProperties;

  /**
   * 클래스명
   */
  className?: string;

  /**
   * 미리보기 모드 (실제 데이터 없이 구조만 표시)
   */
  isPreview?: boolean;
}

export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
  title = "데이터 테이블",
  description = "데이터를 표시하고 관리하는 테이블",
  columns = [],
  filters = [],
  pagination = {
    enabled: true,
    pageSize: 10,
    pageSizeOptions: [5, 10, 20, 50],
    showPageSizeSelector: true,
    showPageInfo: true,
    showFirstLast: true,
  },
  actions = {
    showSearchButton: true,
    searchButtonText: "검색",
    enableExport: true,
    enableRefresh: true,
    enableAdd: true,
    enableEdit: true,
    enableDelete: true,
    addButtonText: "추가",
    editButtonText: "수정",
    deleteButtonText: "삭제",
  },
  style,
  className = "",
  isPreview = true,
}) => {
  // 설정된 컬럼만 사용 (자동 생성 안함)
  const defaultColumns = React.useMemo(() => {
    return columns || [];
  }, [columns]);

  // 미리보기용 샘플 데이터
  const sampleData = React.useMemo(() => {
    if (!isPreview) return [];

    return [
      { id: 1, name: "홍길동", email: "hong@example.com", status: "활성", created_date: "2024-01-15" },
      { id: 2, name: "김철수", email: "kim@example.com", status: "비활성", created_date: "2024-01-14" },
      { id: 3, name: "이영희", email: "lee@example.com", status: "활성", created_date: "2024-01-13" },
    ];
  }, [isPreview]);

  const visibleColumns = defaultColumns.filter((col) => col.visible);

  return (
    <Card className={`h-full w-full ${className}`} style={style}>
      {/* 헤더 영역 */}
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center space-x-2">
              <Table className="h-5 w-5" />
              <span>{title}</span>
            </CardTitle>
            {description && <p className="text-muted-foreground mt-1 text-sm">{description}</p>}
          </div>

          {/* 액션 버튼들 */}
          <div className="flex items-center space-x-2">
            {actions.enableRefresh && (
              <Button variant="outline" size="sm">
                <RefreshCw className="h-4 w-4" />
              </Button>
            )}

            {actions.enableExport && (
              <Button variant="outline" size="sm">
                <Download className="mr-1 h-4 w-4" />
                내보내기
              </Button>
            )}

            {actions.enableAdd && (
              <Button size="sm">
                <Plus className="mr-1 h-4 w-4" />
                {actions.addButtonText}
              </Button>
            )}
          </div>
        </div>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* 검색 및 필터 영역 */}
        <div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
          {/* 검색 입력 */}
          <div className="flex items-center space-x-2">
            <div className="relative min-w-[200px] flex-1">
              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
              <Input placeholder="검색어를 입력하세요..." className="pl-10" disabled={isPreview} />
            </div>

            {actions.showSearchButton && (
              <Button variant="outline" disabled={isPreview}>
                {actions.searchButtonText}
              </Button>
            )}
          </div>

          {/* 필터 영역 */}
          {filters.length > 0 && (
            <div className="flex items-center space-x-2">
              <Filter className="text-muted-foreground h-4 w-4" />
              {filters.slice(0, 3).map((filter, index) => (
                <Select key={filter.id || `filter-${index}`} disabled={isPreview}>
                  <SelectTrigger className="w-[140px]">
                    <SelectValue placeholder={filter.label} />
                  </SelectTrigger>
                  <SelectContent>
                    {filter.options?.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              ))}
            </div>
          )}
        </div>

        {/* 데이터 테이블 */}
        <div className="rounded-md border">
          <div className="overflow-x-auto">
            <table className="w-full">
              {/* 테이블 헤더 */}
              <thead className="bg-muted/50 border-b">
                <tr>
                  {/* 선택 체크박스 */}
                  <th className="w-12 p-3">
                    <Checkbox disabled={isPreview} />
                  </th>

                  {/* 컬럼 헤더 */}
                  {visibleColumns.map((column) => (
                    <th key={column.id} className="p-3 text-left font-medium" style={{ width: column.width }}>
                      <div className="flex items-center space-x-1">
                        <span>{column.label}</span>
                        {column.sortable && (
                          <div className="flex flex-col">
                            <div className="bg-muted-foreground h-1 w-1"></div>
                            <div className="bg-muted-foreground mt-0.5 h-1 w-1"></div>
                          </div>
                        )}
                      </div>
                    </th>
                  ))}

                  {/* 액션 컬럼 */}
                  {(actions.enableEdit || actions.enableDelete) && <th className="w-24 p-3 text-center">액션</th>}
                </tr>
              </thead>

              {/* 테이블 바디 */}
              <tbody>
                {isPreview ? (
                  // 미리보기 데이터
                  sampleData.map((row, index) => (
                    <tr key={index} className="hover:bg-muted/30 border-b">
                      <td className="p-3">
                        <Checkbox disabled />
                      </td>
                      {visibleColumns.map((column) => (
                        <td key={column.id} className="p-3">
                          {column.type === "select" && column.id === "status" ? (
                            <Badge variant={row[column.id] === "활성" ? "default" : "secondary"}>
                              {row[column.id]}
                            </Badge>
                          ) : (
                            <span className="text-sm">{row[column.id]}</span>
                          )}
                        </td>
                      ))}
                      {(actions.enableEdit || actions.enableDelete) && (
                        <td className="p-3">
                          <div className="flex items-center justify-center space-x-1">
                            {actions.enableEdit && (
                              <Button variant="ghost" size="sm" disabled>
                                <Edit className="h-3 w-3" />
                              </Button>
                            )}
                            {actions.enableDelete && (
                              <Button variant="ghost" size="sm" disabled>
                                <Trash2 className="h-3 w-3 text-red-500" />
                              </Button>
                            )}
                          </div>
                        </td>
                      )}
                    </tr>
                  ))
                ) : (
                  // 실제 데이터가 없는 경우 플레이스홀더
                  <tr>
                    <td colSpan={visibleColumns.length + 2} className="text-muted-foreground p-8 text-center">
                      데이터가 없습니다.
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        {/* 페이징 영역 */}
        {pagination.enabled && (
          <div className="flex items-center justify-between">
            <div className="text-muted-foreground flex items-center space-x-2 text-sm">
              {pagination.showPageInfo && <span>{isPreview ? "1-3 of 3" : "0-0 of 0"} 항목 표시</span>}
            </div>

            <div className="flex items-center space-x-2">
              {/* 페이지 크기 선택 */}
              {pagination.showPageSizeSelector && (
                <div className="flex items-center space-x-2">
                  <span className="text-muted-foreground text-sm">표시:</span>
                  <Select disabled={isPreview}>
                    <SelectTrigger className="w-16">
                      <SelectValue placeholder={pagination.pageSize.toString()} />
                    </SelectTrigger>
                    <SelectContent>
                      {pagination.pageSizeOptions.map((size) => (
                        <SelectItem key={size} value={size.toString()}>
                          {size}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

              {/* 페이지 네비게이션 */}
              <div className="flex items-center space-x-1">
                {pagination.showFirstLast && (
                  <Button variant="outline" size="sm" disabled>
                    «
                  </Button>
                )}
                <Button variant="outline" size="sm" disabled>
                  ‹
                </Button>
                <Button variant="outline" size="sm" className="bg-primary text-primary-foreground">
                  1
                </Button>
                <Button variant="outline" size="sm" disabled>
                  ›
                </Button>
                {pagination.showFirstLast && (
                  <Button variant="outline" size="sm" disabled>
                    »
                  </Button>
                )}
              </div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
};

/**
 * 데이터 테이블 템플릿 기본 설정
 */
export const getDefaultDataTableConfig = () => ({
  template_code: "advanced-data-table-v2",
  template_name: "고급 데이터 테이블 v2",
  template_name_eng: "Advanced Data Table v2",
  description: "검색, 필터링, 페이징, CRUD 기능이 포함된 완전한 데이터 테이블 컴포넌트",
  category: "table",
  icon_name: "table",
  default_size: {
    width: 1000,
    height: 680,
  },
  layout_config: {
    components: [
      {
        type: "datatable",
        label: "고급 데이터 테이블",
        position: { x: 0, y: 0 },
        size: { width: 1000, height: 680 },
        style: {
          border: "1px solid #e5e7eb",
          borderRadius: "8px",
          backgroundColor: "#ffffff",
          padding: "0",
        },
        // 데이터 테이블 전용 설정
        columns: [
          { id: "id", label: "ID", type: "number", visible: true, sortable: true, filterable: false, width: 80 },
          { id: "name", label: "이름", type: "text", visible: true, sortable: true, filterable: true, width: 150 },
          { id: "email", label: "이메일", type: "email", visible: true, sortable: true, filterable: true, width: 200 },
          { id: "status", label: "상태", type: "select", visible: true, sortable: true, filterable: true, width: 100 },
          {
            id: "created_date",
            label: "생성일",
            type: "date",
            visible: true,
            sortable: true,
            filterable: true,
            width: 120,
          },
        ],
        filters: [
          {
            id: "status",
            label: "상태",
            type: "select",
            options: [
              { label: "전체", value: "" },
              { label: "활성", value: "active" },
              { label: "비활성", value: "inactive" },
            ],
          },
          { id: "name", label: "이름", type: "text" },
          { id: "email", label: "이메일", type: "text" },
        ],
        pagination: {
          enabled: true,
          pageSize: 10,
          pageSizeOptions: [5, 10, 20, 50, 100],
          showPageSizeSelector: true,
          showPageInfo: true,
          showFirstLast: true,
        },
        actions: {
          showSearchButton: true,
          searchButtonText: "검색",
          enableExport: true,
          enableRefresh: true,
          enableAdd: true,
          enableEdit: true,
          enableDelete: true,
          addButtonText: "추가",
          editButtonText: "수정",
          deleteButtonText: "삭제",
        },
        // 모달 설정
        addModalConfig: {
          title: "새 데이터 추가",
          description: "테이블에 새로운 데이터를 추가합니다.",
          width: "lg",
          layout: "two-column",
          gridColumns: 2,
          fieldOrder: ["name", "email", "status"],
          requiredFields: ["name", "email"],
          hiddenFields: ["id", "created_date"],
          advancedFieldConfigs: {
            status: {
              type: "select",
              options: [
                { label: "활성", value: "active" },
                { label: "비활성", value: "inactive" },
              ],
            },
          },
          submitButtonText: "추가",
          cancelButtonText: "취소",
        },
      },
    ],
  },
});

export default DataTableTemplate;