"use client";

import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Trash2, Settings, Database, Link2 } from "lucide-react";
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
import { QueryManager } from "./QueryManager";

export function ReportDesignerRightPanel() {
  const context = useReportDesigner();
  const { selectedComponentId, components, updateComponent, removeComponent, queries } = context;
  const [activeTab, setActiveTab] = useState<string>("properties");

  const selectedComponent = components.find((c) => c.id === selectedComponentId);

  // 선택된 쿼리의 결과 필드 가져오기
  const getQueryFields = (queryId: string): string[] => {
    const result = context.getQueryResult(queryId);
    return result ? result.fields : [];
  };

  return (
    <div className="w-[450px] border-l bg-white">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full">
        <div className="border-b p-2">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="properties" className="gap-2">
              <Settings className="h-4 w-4" />
              속성
            </TabsTrigger>
            <TabsTrigger value="queries" className="gap-2">
              <Database className="h-4 w-4" />
              쿼리
            </TabsTrigger>
          </TabsList>
        </div>

        {/* 속성 탭 */}
        <TabsContent value="properties" className="mt-0 h-[calc(100vh-120px)]">
          <ScrollArea className="h-full">
            <div className="space-y-4 p-4">
              {!selectedComponent ? (
                <div className="flex h-full items-center justify-center p-4 text-center text-sm text-gray-500">
                  컴포넌트를 선택하면 속성을 편집할 수 있습니다
                </div>
              ) : (
                <Card>
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-sm">컴포넌트 속성</CardTitle>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => removeComponent(selectedComponent.id)}
                        className="text-destructive hover:bg-destructive/10 h-8 w-8 p-0"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    {/* 타입 */}
                    <div>
                      <Label className="text-xs">타입</Label>
                      <div className="mt-1 text-sm font-medium capitalize">{selectedComponent.type}</div>
                    </div>

                    {/* 위치 */}
                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <Label className="text-xs">X</Label>
                        <Input
                          type="number"
                          value={Math.round(selectedComponent.x)}
                          onChange={(e) =>
                            updateComponent(selectedComponent.id, {
                              x: parseInt(e.target.value) || 0,
                            })
                          }
                          className="h-8"
                        />
                      </div>
                      <div>
                        <Label className="text-xs">Y</Label>
                        <Input
                          type="number"
                          value={Math.round(selectedComponent.y)}
                          onChange={(e) =>
                            updateComponent(selectedComponent.id, {
                              y: parseInt(e.target.value) || 0,
                            })
                          }
                          className="h-8"
                        />
                      </div>
                    </div>

                    {/* 크기 */}
                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <Label className="text-xs">너비</Label>
                        <Input
                          type="number"
                          value={Math.round(selectedComponent.width)}
                          onChange={(e) =>
                            updateComponent(selectedComponent.id, {
                              width: parseInt(e.target.value) || 50,
                            })
                          }
                          className="h-8"
                        />
                      </div>
                      <div>
                        <Label className="text-xs">높이</Label>
                        <Input
                          type="number"
                          value={Math.round(selectedComponent.height)}
                          onChange={(e) =>
                            updateComponent(selectedComponent.id, {
                              height: parseInt(e.target.value) || 30,
                            })
                          }
                          className="h-8"
                        />
                      </div>
                    </div>

                    {/* 글꼴 크기 */}
                    <div>
                      <Label className="text-xs">글꼴 크기</Label>
                      <Input
                        type="number"
                        value={selectedComponent.fontSize || 13}
                        onChange={(e) =>
                          updateComponent(selectedComponent.id, {
                            fontSize: parseInt(e.target.value) || 13,
                          })
                        }
                        className="h-8"
                      />
                    </div>

                    {/* 글꼴 색상 */}
                    <div>
                      <Label className="text-xs">글꼴 색상</Label>
                      <Input
                        type="color"
                        value={selectedComponent.fontColor || "#000000"}
                        onChange={(e) =>
                          updateComponent(selectedComponent.id, {
                            fontColor: e.target.value,
                          })
                        }
                        className="h-8"
                      />
                    </div>

                    {/* 배경 색상 */}
                    <div>
                      <Label className="text-xs">배경 색상</Label>
                      <Input
                        type="color"
                        value={selectedComponent.backgroundColor || "#ffffff"}
                        onChange={(e) =>
                          updateComponent(selectedComponent.id, {
                            backgroundColor: e.target.value,
                          })
                        }
                        className="h-8"
                      />
                    </div>

                    {/* 데이터 바인딩 (텍스트/라벨/테이블 컴포넌트) */}
                    {(selectedComponent.type === "text" ||
                      selectedComponent.type === "label" ||
                      selectedComponent.type === "table") && (
                      <Card className="mt-4 border-blue-200 bg-blue-50">
                        <CardHeader className="pb-3">
                          <div className="flex items-center gap-2">
                            <Link2 className="h-4 w-4 text-blue-600" />
                            <CardTitle className="text-sm text-blue-900">데이터 바인딩</CardTitle>
                          </div>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          {/* 쿼리 선택 */}
                          <div>
                            <Label className="text-xs">쿼리</Label>
                            <Select
                              value={selectedComponent.queryId || "none"}
                              onValueChange={(value) =>
                                updateComponent(selectedComponent.id, {
                                  queryId: value === "none" ? undefined : value,
                                  fieldName: undefined,
                                })
                              }
                            >
                              <SelectTrigger className="h-8">
                                <SelectValue placeholder="쿼리 선택" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="none">선택 안함</SelectItem>
                                {queries.map((query) => (
                                  <SelectItem key={query.id} value={query.id}>
                                    {query.name} ({query.type})
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>

                          {/* 필드 선택 (텍스트/라벨만) */}
                          {selectedComponent.queryId &&
                            (selectedComponent.type === "text" || selectedComponent.type === "label") && (
                              <div>
                                <Label className="text-xs">필드</Label>
                                <Select
                                  value={selectedComponent.fieldName || "none"}
                                  onValueChange={(value) =>
                                    updateComponent(selectedComponent.id, {
                                      fieldName: value === "none" ? undefined : value,
                                    })
                                  }
                                >
                                  <SelectTrigger className="h-8">
                                    <SelectValue placeholder="필드 선택" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="none">선택 안함</SelectItem>
                                    {getQueryFields(selectedComponent.queryId).length > 0 ? (
                                      getQueryFields(selectedComponent.queryId).map((field) => (
                                        <SelectItem key={field} value={field}>
                                          {field}
                                        </SelectItem>
                                      ))
                                    ) : (
                                      <SelectItem value="no-result" disabled>
                                        쿼리 탭에서 실행 필요
                                      </SelectItem>
                                    )}
                                  </SelectContent>
                                </Select>
                              </div>
                            )}

                          {/* 테이블 안내 메시지 */}
                          {selectedComponent.queryId && selectedComponent.type === "table" && (
                            <div className="rounded-md bg-blue-100 p-2 text-xs text-blue-800">
                              테이블은 선택한 쿼리의 모든 필드를 자동으로 표시합니다.
                            </div>
                          )}

                          {/* 기본값 (텍스트/라벨만) */}
                          {(selectedComponent.type === "text" || selectedComponent.type === "label") && (
                            <div>
                              <Label className="text-xs">기본값</Label>
                              <Input
                                value={selectedComponent.defaultValue || ""}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    defaultValue: e.target.value,
                                  })
                                }
                                placeholder="데이터가 없을 때 표시할 값"
                                className="h-8"
                              />
                            </div>
                          )}

                          {/* 포맷 (텍스트/라벨만) */}
                          {(selectedComponent.type === "text" || selectedComponent.type === "label") && (
                            <div>
                              <Label className="text-xs">포맷</Label>
                              <Input
                                value={selectedComponent.format || ""}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    format: e.target.value,
                                  })
                                }
                                placeholder="예: YYYY-MM-DD, #,###"
                                className="h-8"
                              />
                            </div>
                          )}
                        </CardContent>
                      </Card>
                    )}
                  </CardContent>
                </Card>
              )}
            </div>
          </ScrollArea>
        </TabsContent>

        {/* 쿼리 탭 */}
        <TabsContent value="queries" className="mt-0 h-[calc(100vh-120px)]">
          <QueryManager />
        </TabsContent>
      </Tabs>
    </div>
  );
}