"use client";

import React, { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { TableListConfig, ColumnConfig } from "./types";
import {
  Plus,
  Trash2,
  ArrowUp,
  ArrowDown,
  Eye,
  EyeOff,
  Settings,
  Columns,
  Filter,
  Palette,
  MousePointer,
} from "lucide-react";

export interface TableListConfigPanelProps {
  config: TableListConfig;
  onChange: (config: Partial<TableListConfig>) => void;
  screenTableName?: string; // 화면에 연결된 테이블명
  tableColumns?: any[]; // 테이블 컬럼 정보
}

/**
 * TableList 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
  config,
  onChange,
  screenTableName,
  tableColumns,
}) => {
  console.log("🔍 TableListConfigPanel props:", { config, screenTableName, tableColumns });

  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [availableColumns, setAvailableColumns] = useState<
    Array<{ columnName: string; dataType: string; label?: string }>
  >([]);

  // 화면 테이블명이 있으면 자동으로 설정
  useEffect(() => {
    if (screenTableName && (!config.selectedTable || config.selectedTable !== screenTableName)) {
      console.log("🔄 화면 테이블명 자동 설정:", screenTableName);
      onChange({ selectedTable: screenTableName });
    }
  }, [screenTableName, config.selectedTable, onChange]);

  // 테이블 목록 가져오기
  useEffect(() => {
    const fetchTables = async () => {
      setLoadingTables(true);
      try {
        const response = await fetch("/api/tables");
        if (response.ok) {
          const result = await response.json();
          if (result.success && result.data) {
            setAvailableTables(
              result.data.map((table: any) => ({
                tableName: table.tableName,
                displayName: table.displayName || table.tableName,
              })),
            );
          }
        }
      } catch (error) {
        console.error("테이블 목록 가져오기 실패:", error);
      } finally {
        setLoadingTables(false);
      }
    };

    fetchTables();
  }, []);

  // 선택된 테이블의 컬럼 목록 설정 (tableColumns prop 우선 사용)
  useEffect(() => {
    console.log("🔍 useEffect 실행됨 - tableColumns:", tableColumns, "length:", tableColumns?.length);
    if (tableColumns && tableColumns.length > 0) {
      // tableColumns prop이 있으면 사용
      console.log("🔧 tableColumns prop 사용:", tableColumns);
      console.log("🔧 첫 번째 컬럼 상세:", tableColumns[0]);
      const mappedColumns = tableColumns.map((column: any) => ({
        columnName: column.columnName || column.name,
        dataType: column.dataType || column.type || "text",
        label: column.label || column.displayName || column.columnLabel || column.columnName || column.name,
      }));
      console.log("🏷️ availableColumns 설정됨:", mappedColumns);
      console.log("🏷️ 첫 번째 mappedColumn:", mappedColumns[0]);
      setAvailableColumns(mappedColumns);
    } else if (config.selectedTable || screenTableName) {
      // API에서 컬럼 정보 가져오기
      const fetchColumns = async () => {
        const tableName = config.selectedTable || screenTableName;
        if (!tableName) {
          setAvailableColumns([]);
          return;
        }

        console.log("🔧 API에서 컬럼 정보 가져오기:", tableName);
        try {
          const response = await fetch(`/api/tables/${tableName}/columns`);
          if (response.ok) {
            const result = await response.json();
            if (result.success && result.data) {
              console.log("🔧 API 응답 컬럼 데이터:", result.data);
              setAvailableColumns(
                result.data.map((col: any) => ({
                  columnName: col.columnName,
                  dataType: col.dataType,
                  label: col.displayName || col.columnName,
                })),
              );
            }
          }
        } catch (error) {
          console.error("컬럼 목록 가져오기 실패:", error);
        }
      };

      fetchColumns();
    } else {
      setAvailableColumns([]);
    }
  }, [config.selectedTable, screenTableName, tableColumns]);

  const handleChange = (key: keyof TableListConfig, value: any) => {
    onChange({ [key]: value });
  };

  const handleNestedChange = (parentKey: keyof TableListConfig, childKey: string, value: any) => {
    const parentValue = config[parentKey] as any;
    onChange({
      [parentKey]: {
        ...parentValue,
        [childKey]: value,
      },
    });
  };

  // 컬럼 추가
  const addColumn = (columnName: string) => {
    const existingColumn = config.columns?.find((col) => col.columnName === columnName);
    if (existingColumn) return;

    // tableColumns에서 해당 컬럼의 라벨 정보 찾기
    const columnInfo = tableColumns?.find((col: any) => (col.columnName || col.name) === columnName);

    // 라벨명 우선 사용, 없으면 컬럼명 사용
    const displayName = columnInfo?.label || columnInfo?.displayName || columnName;

    const newColumn: ColumnConfig = {
      columnName,
      displayName,
      visible: true,
      sortable: true,
      searchable: true,
      align: "left",
      format: "text",
      order: config.columns?.length || 0,
    };

    handleChange("columns", [...(config.columns || []), newColumn]);
  };

  // 컬럼 제거
  const removeColumn = (columnName: string) => {
    const updatedColumns = config.columns?.filter((col) => col.columnName !== columnName) || [];
    handleChange("columns", updatedColumns);
  };

  // 컬럼 업데이트
  const updateColumn = (columnName: string, updates: Partial<ColumnConfig>) => {
    const updatedColumns =
      config.columns?.map((col) => (col.columnName === columnName ? { ...col, ...updates } : col)) || [];
    handleChange("columns", updatedColumns);
  };

  // 컬럼 순서 변경
  const moveColumn = (columnName: string, direction: "up" | "down") => {
    const columns = [...(config.columns || [])];
    const index = columns.findIndex((col) => col.columnName === columnName);

    if (index === -1) return;

    const targetIndex = direction === "up" ? index - 1 : index + 1;
    if (targetIndex < 0 || targetIndex >= columns.length) return;

    [columns[index], columns[targetIndex]] = [columns[targetIndex], columns[index]];

    // order 값 재정렬
    columns.forEach((col, idx) => {
      col.order = idx;
    });

    handleChange("columns", columns);
  };

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">테이블 리스트 설정</div>

      <Tabs defaultValue="basic" className="w-full">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="basic" className="flex items-center gap-1">
            <Settings className="h-3 w-3" />
            기본
          </TabsTrigger>
          <TabsTrigger value="columns" className="flex items-center gap-1">
            <Columns className="h-3 w-3" />
            컬럼
          </TabsTrigger>
          <TabsTrigger value="filter" className="flex items-center gap-1">
            <Filter className="h-3 w-3" />
            필터
          </TabsTrigger>
          <TabsTrigger value="actions" className="flex items-center gap-1">
            <MousePointer className="h-3 w-3" />
            액션
          </TabsTrigger>
          <TabsTrigger value="style" className="flex items-center gap-1">
            <Palette className="h-3 w-3" />
            스타일
          </TabsTrigger>
        </TabsList>

        {/* 기본 설정 탭 */}
        <TabsContent value="basic" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">연결된 테이블</CardTitle>
              <CardDescription>화면에 연결된 테이블 정보가 자동으로 매핑됩니다</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>현재 연결된 테이블</Label>
                <div className="rounded-md bg-gray-50 p-3">
                  <div className="text-sm font-medium">
                    {screenTableName ? (
                      <span className="text-blue-600">{screenTableName}</span>
                    ) : (
                      <span className="text-gray-500">테이블이 연결되지 않았습니다</span>
                    )}
                  </div>
                  {screenTableName && (
                    <div className="mt-1 text-xs text-gray-500">화면 설정에서 자동으로 연결된 테이블입니다</div>
                  )}
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="title">제목</Label>
                <Input
                  id="title"
                  value={config.title || ""}
                  onChange={(e) => handleChange("title", e.target.value)}
                  placeholder="테이블 제목 (선택사항)"
                />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-base">표시 설정</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="showHeader"
                  checked={config.showHeader}
                  onCheckedChange={(checked) => handleChange("showHeader", checked)}
                />
                <Label htmlFor="showHeader">헤더 표시</Label>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="showFooter"
                  checked={config.showFooter}
                  onCheckedChange={(checked) => handleChange("showFooter", checked)}
                />
                <Label htmlFor="showFooter">푸터 표시</Label>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="autoLoad"
                  checked={config.autoLoad}
                  onCheckedChange={(checked) => handleChange("autoLoad", checked)}
                />
                <Label htmlFor="autoLoad">자동 데이터 로드</Label>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-base">높이 설정</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>높이 모드</Label>
                <Select
                  value={config.height}
                  onValueChange={(value: "auto" | "fixed" | "viewport") => handleChange("height", value)}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="auto">자동</SelectItem>
                    <SelectItem value="fixed">고정</SelectItem>
                    <SelectItem value="viewport">화면 높이</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {config.height === "fixed" && (
                <div className="space-y-2">
                  <Label htmlFor="fixedHeight">고정 높이 (px)</Label>
                  <Input
                    id="fixedHeight"
                    type="number"
                    value={config.fixedHeight || 400}
                    onChange={(e) => handleChange("fixedHeight", parseInt(e.target.value) || 400)}
                    min={200}
                    max={1000}
                  />
                </div>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-base">페이지네이션</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="paginationEnabled"
                  checked={config.pagination?.enabled}
                  onCheckedChange={(checked) => handleNestedChange("pagination", "enabled", checked)}
                />
                <Label htmlFor="paginationEnabled">페이지네이션 사용</Label>
              </div>

              {config.pagination?.enabled && (
                <>
                  <div className="space-y-2">
                    <Label htmlFor="pageSize">페이지 크기</Label>
                    <Select
                      value={config.pagination?.pageSize?.toString() || "20"}
                      onValueChange={(value) => handleNestedChange("pagination", "pageSize", parseInt(value))}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="10">10개씩</SelectItem>
                        <SelectItem value="20">20개씩</SelectItem>
                        <SelectItem value="50">50개씩</SelectItem>
                        <SelectItem value="100">100개씩</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="showSizeSelector"
                      checked={config.pagination?.showSizeSelector}
                      onCheckedChange={(checked) => handleNestedChange("pagination", "showSizeSelector", checked)}
                    />
                    <Label htmlFor="showSizeSelector">페이지 크기 선택기 표시</Label>
                  </div>

                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="showPageInfo"
                      checked={config.pagination?.showPageInfo}
                      onCheckedChange={(checked) => handleNestedChange("pagination", "showPageInfo", checked)}
                    />
                    <Label htmlFor="showPageInfo">페이지 정보 표시</Label>
                  </div>
                </>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* 컬럼 설정 탭 */}
        <TabsContent value="columns" className="space-y-4">
          {!screenTableName ? (
            <Card>
              <CardContent className="pt-6">
                <div className="text-center text-gray-500">
                  <p>테이블이 연결되지 않았습니다.</p>
                  <p className="text-sm">화면에 테이블을 연결한 후 컬럼을 설정할 수 있습니다.</p>
                </div>
              </CardContent>
            </Card>
          ) : (
            <>
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">컬럼 추가 - {screenTableName}</CardTitle>
                  <CardDescription>
                    {availableColumns.length > 0
                      ? `${availableColumns.length}개의 사용 가능한 컬럼에서 선택하세요`
                      : "컬럼 정보를 불러오는 중..."}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  {availableColumns.length > 0 ? (
                    <div className="flex flex-wrap gap-2">
                      {availableColumns
                        .filter((col) => !config.columns?.find((c) => c.columnName === col.columnName))
                        .map((column) => (
                          <Button
                            key={column.columnName}
                            variant="outline"
                            size="sm"
                            onClick={() => addColumn(column.columnName)}
                            className="flex items-center gap-1"
                          >
                            <Plus className="h-3 w-3" />
                            {column.label || column.columnName}
                            <Badge variant="secondary" className="text-xs">
                              {column.dataType}
                            </Badge>
                          </Button>
                        ))}
                    </div>
                  ) : (
                    <div className="py-4 text-center text-gray-500">
                      <p>컬럼 정보를 불러오는 중입니다...</p>
                    </div>
                  )}
                </CardContent>
              </Card>
            </>
          )}

          {screenTableName && (
            <Card>
              <CardHeader>
                <CardTitle className="text-base">컬럼 설정</CardTitle>
                <CardDescription>선택된 컬럼들의 표시 옵션을 설정하세요</CardDescription>
              </CardHeader>
              <CardContent>
                <ScrollArea className="h-64">
                  <div className="space-y-3">
                    {config.columns?.map((column, index) => (
                      <div key={column.columnName} className="space-y-3 rounded-lg border p-3">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center space-x-2">
                            <Checkbox
                              checked={column.visible}
                              onCheckedChange={(checked) =>
                                updateColumn(column.columnName, { visible: checked as boolean })
                              }
                            />
                            <span className="font-medium">
                              {availableColumns.find((col) => col.columnName === column.columnName)?.label ||
                                column.displayName ||
                                column.columnName}
                            </span>
                          </div>

                          <div className="flex items-center space-x-1">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => moveColumn(column.columnName, "up")}
                              disabled={index === 0}
                            >
                              <ArrowUp className="h-3 w-3" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => moveColumn(column.columnName, "down")}
                              disabled={index === (config.columns?.length || 0) - 1}
                            >
                              <ArrowDown className="h-3 w-3" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => removeColumn(column.columnName)}
                              className="text-red-500 hover:text-red-600"
                            >
                              <Trash2 className="h-3 w-3" />
                            </Button>
                          </div>
                        </div>

                        {column.visible && (
                          <div className="grid grid-cols-2 gap-3">
                            <div className="space-y-1">
                              <Label className="text-xs">표시명</Label>
                              <Input
                                value={
                                  availableColumns.find((col) => col.columnName === column.columnName)?.label ||
                                  column.displayName ||
                                  column.columnName
                                }
                                onChange={(e) => updateColumn(column.columnName, { displayName: e.target.value })}
                                className="h-8"
                              />
                            </div>

                            <div className="space-y-1">
                              <Label className="text-xs">정렬</Label>
                              <Select
                                value={column.align}
                                onValueChange={(value: "left" | "center" | "right") =>
                                  updateColumn(column.columnName, { align: value })
                                }
                              >
                                <SelectTrigger className="h-8">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="left">왼쪽</SelectItem>
                                  <SelectItem value="center">가운데</SelectItem>
                                  <SelectItem value="right">오른쪽</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>

                            <div className="space-y-1">
                              <Label className="text-xs">형식</Label>
                              <Select
                                value={column.format}
                                onValueChange={(value: "text" | "number" | "date" | "currency" | "boolean") =>
                                  updateColumn(column.columnName, { format: value })
                                }
                              >
                                <SelectTrigger className="h-8">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="text">텍스트</SelectItem>
                                  <SelectItem value="number">숫자</SelectItem>
                                  <SelectItem value="date">날짜</SelectItem>
                                  <SelectItem value="currency">통화</SelectItem>
                                  <SelectItem value="boolean">불린</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>

                            <div className="space-y-1">
                              <Label className="text-xs">너비 (px)</Label>
                              <Input
                                type="number"
                                value={column.width || ""}
                                onChange={(e) =>
                                  updateColumn(column.columnName, {
                                    width: e.target.value ? parseInt(e.target.value) : undefined,
                                  })
                                }
                                placeholder="자동"
                                className="h-8"
                              />
                            </div>

                            <div className="flex items-center space-x-4">
                              <div className="flex items-center space-x-1">
                                <Checkbox
                                  checked={column.sortable}
                                  onCheckedChange={(checked) =>
                                    updateColumn(column.columnName, { sortable: checked as boolean })
                                  }
                                />
                                <Label className="text-xs">정렬 가능</Label>
                              </div>
                              <div className="flex items-center space-x-1">
                                <Checkbox
                                  checked={column.searchable}
                                  onCheckedChange={(checked) =>
                                    updateColumn(column.columnName, { searchable: checked as boolean })
                                  }
                                />
                                <Label className="text-xs">검색 가능</Label>
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              </CardContent>
            </Card>
          )}
        </TabsContent>

        {/* 필터 설정 탭 */}
        <TabsContent value="filter" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">검색 및 필터</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="filterEnabled"
                  checked={config.filter?.enabled}
                  onCheckedChange={(checked) => handleNestedChange("filter", "enabled", checked)}
                />
                <Label htmlFor="filterEnabled">필터 기능 사용</Label>
              </div>

              {config.filter?.enabled && (
                <>
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="quickSearch"
                      checked={config.filter?.quickSearch}
                      onCheckedChange={(checked) => handleNestedChange("filter", "quickSearch", checked)}
                    />
                    <Label htmlFor="quickSearch">빠른 검색</Label>
                  </div>

                  {config.filter?.quickSearch && (
                    <div className="ml-6 flex items-center space-x-2">
                      <Checkbox
                        id="showColumnSelector"
                        checked={config.filter?.showColumnSelector}
                        onCheckedChange={(checked) => handleNestedChange("filter", "showColumnSelector", checked)}
                      />
                      <Label htmlFor="showColumnSelector">검색 컬럼 선택기 표시</Label>
                    </div>
                  )}

                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="advancedFilter"
                      checked={config.filter?.advancedFilter}
                      onCheckedChange={(checked) => handleNestedChange("filter", "advancedFilter", checked)}
                    />
                    <Label htmlFor="advancedFilter">고급 필터</Label>
                  </div>
                </>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* 액션 설정 탭 */}
        <TabsContent value="actions" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">행 액션</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="showActions"
                  checked={config.actions?.showActions}
                  onCheckedChange={(checked) => handleNestedChange("actions", "showActions", checked)}
                />
                <Label htmlFor="showActions">행 액션 버튼 표시</Label>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="bulkActions"
                  checked={config.actions?.bulkActions}
                  onCheckedChange={(checked) => handleNestedChange("actions", "bulkActions", checked)}
                />
                <Label htmlFor="bulkActions">일괄 액션 사용</Label>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 스타일 설정 탭 */}
        <TabsContent value="style" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">테이블 스타일</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>테마</Label>
                <Select
                  value={config.tableStyle?.theme}
                  onValueChange={(value: "default" | "striped" | "bordered" | "minimal") =>
                    handleNestedChange("tableStyle", "theme", value)
                  }
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="default">기본</SelectItem>
                    <SelectItem value="striped">줄무늬</SelectItem>
                    <SelectItem value="bordered">테두리</SelectItem>
                    <SelectItem value="minimal">미니멀</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label>행 높이</Label>
                <Select
                  value={config.tableStyle?.rowHeight}
                  onValueChange={(value: "compact" | "normal" | "comfortable") =>
                    handleNestedChange("tableStyle", "rowHeight", value)
                  }
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="compact">좁음</SelectItem>
                    <SelectItem value="normal">보통</SelectItem>
                    <SelectItem value="comfortable">넓음</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="alternateRows"
                  checked={config.tableStyle?.alternateRows}
                  onCheckedChange={(checked) => handleNestedChange("tableStyle", "alternateRows", checked)}
                />
                <Label htmlFor="alternateRows">교대로 행 색상 변경</Label>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="hoverEffect"
                  checked={config.tableStyle?.hoverEffect}
                  onCheckedChange={(checked) => handleNestedChange("tableStyle", "hoverEffect", checked)}
                />
                <Label htmlFor="hoverEffect">마우스 오버 효과</Label>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="stickyHeader"
                  checked={config.stickyHeader}
                  onCheckedChange={(checked) => handleChange("stickyHeader", checked)}
                />
                <Label htmlFor="stickyHeader">헤더 고정</Label>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
};