"use client";

import { useState, useEffect, ChangeEvent } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useToast } from "@/hooks/use-toast";
import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";

interface TableColumn {
  column_name: string;
  data_type: string;
  is_nullable: string;
  column_default: string | null;
}

interface TableInfo {
  table_name: string;
  columns: TableColumn[];
  description: string | null;
}

interface QueryResult {
  [key: string]: string | number | boolean | null | undefined;
}

interface TableColumn {
  column_name: string;
  data_type: string;
  is_nullable: string;
  column_default: string | null;
}

interface TableInfo {
  table_name: string;
  columns: TableColumn[];
  description: string | null;
}

interface SqlQueryModalProps {
  isOpen: boolean;
  onClose: () => void;
  connectionId: number;
  connectionName: string;
}

export const SqlQueryModal: React.FC<SqlQueryModalProps> = ({ isOpen, onClose, connectionId, connectionName }) => {
  const { toast } = useToast();
  const [query, setQuery] = useState("SELECT * FROM ");
  const [results, setResults] = useState<QueryResult[]>([]);
  const [loading, setLoading] = useState(false);
  const [tables, setTables] = useState<TableInfo[]>([]);
  const [selectedTable, setSelectedTable] = useState("");
  const [loadingTables, setLoadingTables] = useState(false);

  // 테이블 목록 로딩
  useEffect(() => {
    console.log("SqlQueryModal - connectionId:", connectionId);
    const loadTables = async () => {
      setLoadingTables(true);
      try {
        const result = await ExternalDbConnectionAPI.getTables(connectionId);
        if (result.success && result.data) {
          setTables(result.data as unknown as TableInfo[]);
        }
      } catch (error) {
        console.error("테이블 목록 로딩 오류:", error);
        toast({
          title: "오류",
          description: "테이블 목록을 불러오는데 실패했습니다.",
          variant: "destructive",
        });
      } finally {
        setLoadingTables(false);
      }
    };
    loadTables();
  }, []);

  const handleExecute = async () => {
    console.log("실행 버튼 클릭");
    if (!query.trim()) {
      toast({
        title: "오류",
        description: "실행할 쿼리를 입력해주세요.",
        variant: "destructive",
      });
      return;
    }

    console.log("쿼리 실행 시작:", { connectionId, query });
    setLoading(true);
    try {
      const result = await ExternalDbConnectionAPI.executeQuery(connectionId, query);
      console.log("쿼리 실행 결과:", result);
      if (result.success && result.data) {
        setResults(result.data);
        toast({
          title: "성공",
          description: "쿼리가 성공적으로 실행되었습니다.",
        });
      } else {
        toast({
          title: "오류",
          description: result.message || "쿼리 실행 중 오류가 발생했습니다.",
          variant: "destructive",
        });
      }
      } catch (error) {
        console.error("쿼리 실행 오류:", error);
        toast({
          title: "오류",
          description: error instanceof Error ? error.message : "쿼리 실행 중 오류가 발생했습니다.",
          variant: "destructive",
        });
    } finally {
      setLoading(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-h-[90vh] max-w-5xl" aria-describedby="modal-description">
        <DialogHeader>
          <DialogTitle>{connectionName} - SQL 쿼리 실행</DialogTitle>
          <DialogDescription>
            데이터베이스에 대해 SQL SELECT 쿼리를 실행하고 결과를 확인할 수 있습니다.
          </DialogDescription>
        </DialogHeader>
        
        {/* 쿼리 입력 영역 */}
        <div className="mb-4 space-y-4">
          <div className="space-y-2">
            {/* 테이블 선택 */}
            <div className="flex flex-col gap-4">
              <div className="flex items-center gap-2">
                <Select
                  value={selectedTable}
                  onValueChange={(value) => {
                    setSelectedTable(value);
                    // 현재 커서 위치에 테이블 이름 삽입
                    setQuery((prev) => {
                      const fromIndex = prev.toUpperCase().lastIndexOf("FROM");
                      if (fromIndex === -1) {
                        return `SELECT * FROM ${value}`;
                      }
                      const beforeFrom = prev.substring(0, fromIndex + 4);
                      return `${beforeFrom} ${value}`;
                    });
                  }}
                  disabled={loadingTables}
                >
                  <SelectTrigger className="w-[200px]">
                    <SelectValue placeholder={loadingTables ? "테이블 로딩 중..." : "테이블 선택"} />
                  </SelectTrigger>
                  <SelectContent>
                    {tables.map((table) => (
                      <SelectItem key={table.table_name} value={table.table_name}>
                        {table.table_name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* 테이블 정보 */}
              <div className="bg-muted/50 rounded-md border p-4">
                <h3 className="mb-2 font-medium">사용 가능한 테이블</h3>
                <div className="space-y-4">
                  {tables.map((table) => (
                    <div key={table.table_name} className="border-b pb-2 last:border-b-0 last:pb-0">
                      <div className="flex items-center justify-between">
                        <h4 className="font-mono font-bold">{table.table_name}</h4>
                <Button variant="ghost" size="sm" onClick={() => setQuery(`SELECT * FROM ${table.table_name}`)}>
                          선택
                        </Button>
                      </div>
                      {table.description && (
                        <p className="text-muted-foreground mt-1 text-sm">{table.description}</p>
                      )}
                      <div className="mt-2 grid grid-cols-3 gap-2">
                        {table.columns.map((column: TableColumn) => (
                          <div key={column.column_name} className="text-sm">
                            <span className="font-mono">{column.column_name}</span>
                            <span className="text-muted-foreground ml-1">({column.data_type})</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* 쿼리 입력 */}
            <div className="relative">
              <Textarea
                value={query}
                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setQuery(e.target.value)}
                placeholder="SELECT * FROM table_name"
                className="min-h-[120px] pr-24 font-mono"
              />
              <Button
                onClick={() => {
                  console.log("버튼 클릭됨");
                  handleExecute();
                }}
                disabled={loading}
                className="absolute top-2 right-2 w-20"
                size="sm"
              >
                {loading ? "실행 중..." : "실행"}
              </Button>
            </div>
          </div>
        </div>

        {/* 결과 섹션 */}
        <div className="mt-4 space-y-4">
          <div className="flex items-center justify-between">
            <div className="text-muted-foreground text-sm">
              {loading ? "쿼리 실행 중..." : results.length > 0 ? `${results.length}개의 결과가 있습니다.` : "실행된 쿼리가 없습니다."}
            </div>
          </div>
          
          {/* 결과 그리드 */}
          <div className="rounded-md border">
            <div className="max-h-[400px] overflow-auto">
              <Table>
                {results.length > 0 ? (
                  <>
                    <TableHeader className="sticky top-0 bg-white">
                      <TableRow>
                        {Object.keys(results[0]).map((key) => (
                          <TableHead key={key} className="font-mono font-bold">
                            {key}
                          </TableHead>
                        ))}
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {results.map((row: QueryResult, i: number) => (
                        <TableRow key={i} className="hover:bg-muted/50">
                          {Object.values(row).map((value, j) => (
                            <TableCell key={j} className="font-mono">
                              {value === null ? (
                                <span className="text-muted-foreground italic">NULL</span>
                              ) : (
                                String(value)
                              )}
                            </TableCell>
                          ))}
                        </TableRow>
                      ))}
                    </TableBody>
                  </>
                ) : (
                  <TableBody>
                    <TableRow>
                      <TableCell className="text-muted-foreground h-32 text-center">
                        {loading ? "쿼리 실행 중..." : "쿼리를 실행하면 결과가 여기에 표시됩니다."}
                      </TableCell>
                    </TableRow>
                  </TableBody>
                )}
              </Table>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};