"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Plus, Trash2, Play, AlertCircle, Database } from "lucide-react";
import { useReportDesigner, ReportQuery } from "@/contexts/ReportDesignerContext";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { reportApi } from "@/lib/api/reportApi";
import { useToast } from "@/hooks/use-toast";

export function QueryManager() {
  const { queries, setQueries, reportId, setQueryResult, getQueryResult } = useReportDesigner();
  const [selectedQueryId, setSelectedQueryId] = useState<string | null>(null);
  const [isTestRunning, setIsTestRunning] = useState(false);
  const [parameterValues, setParameterValues] = useState<Record<string, string>>({});
  const [parameterTypes, setParameterTypes] = useState<Record<string, string>>({});
  const { toast } = useToast();

  const selectedQuery = queries.find((q) => q.id === selectedQueryId);
  const testResult = selectedQuery ? getQueryResult(selectedQuery.id) : null;

  // 파라미터 감지 ($1, $2 등, 단 작은따옴표 안은 제외)
  const detectParameters = (sql: string): string[] => {
    // 작은따옴표 안의 내용을 제거
    const withoutStrings = sql.replace(/'[^']*'/g, "");

    // $숫자 패턴 찾기
    const matches = withoutStrings.match(/\$\d+/g);
    if (!matches) return [];

    // 중복 제거하되 등장 순서 유지
    const seen = new Set<string>();
    const result: string[] = [];
    for (const match of matches) {
      if (!seen.has(match)) {
        seen.add(match);
        result.push(match);
      }
    }
    return result;
  };

  // 새 쿼리 추가
  const handleAddQuery = () => {
    const newQuery: ReportQuery = {
      id: `query_${Date.now()}`,
      name: `쿼리 ${queries.length + 1}`,
      type: "MASTER",
      sqlQuery: "",
      parameters: [],
    };
    setQueries([...queries, newQuery]);
    setSelectedQueryId(newQuery.id);
  };

  // 쿼리 삭제
  const handleDeleteQuery = (queryId: string) => {
    setQueries(queries.filter((q) => q.id !== queryId));
    if (selectedQueryId === queryId) {
      setSelectedQueryId(null);
      setParameterValues({});
      setParameterTypes({});
    }
  };

  // 쿼리 선택 변경
  const handleSelectQuery = (queryId: string) => {
    setSelectedQueryId(queryId);
    setParameterValues({});
    setParameterTypes({});
  };

  // 파라미터 값이 모두 입력되었는지 확인
  const isAllParametersFilled = (): boolean => {
    if (!selectedQuery || selectedQuery.parameters.length === 0) {
      return true;
    }
    return selectedQuery.parameters.every((param) => {
      const value = parameterValues[param];
      return value !== undefined && value.trim() !== "";
    });
  };

  // 쿼리 업데이트
  const handleUpdateQuery = (queryId: string, updates: Partial<ReportQuery>) => {
    setQueries(
      queries.map((q) => {
        if (q.id === queryId) {
          const updated = { ...q, ...updates };
          // SQL이 변경되면 파라미터 재감지
          if (updates.sqlQuery !== undefined) {
            updated.parameters = detectParameters(updated.sqlQuery);
          }
          return updated;
        }
        return q;
      }),
    );
  };

  // 쿼리 테스트 실행
  const handleTestQuery = async () => {
    if (!selectedQuery) {
      toast({
        title: "알림",
        description: "쿼리를 선택해주세요.",
        variant: "destructive",
      });
      return;
    }

    setIsTestRunning(true);
    try {
      // new 리포트는 임시 ID 사용하고 SQL 쿼리 직접 전달
      const testReportId = reportId === "new" ? "TEMP_TEST" : reportId;
      const sqlQuery = reportId === "new" ? selectedQuery.sqlQuery : undefined;

      // 실제 API 호출
      const response = await reportApi.executeQuery(testReportId, selectedQuery.id, parameterValues, sqlQuery);

      if (response.success && response.data) {
        // Context에 실행 결과 저장
        setQueryResult(selectedQuery.id, response.data.fields, response.data.rows);

        toast({
          title: "성공",
          description: `${response.data.rows.length}건의 데이터가 조회되었습니다.`,
        });
      }
    } catch (error: any) {
      toast({
        title: "오류",
        description: error.response?.data?.message || "쿼리 실행에 실패했습니다.",
        variant: "destructive",
      });
    } finally {
      setIsTestRunning(false);
    }
  };

  return (
    <ScrollArea className="h-full">
      <div className="space-y-4 p-4">
        {/* 헤더 */}
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-semibold">쿼리 관리</h3>
          <Button size="sm" onClick={handleAddQuery}>
            <Plus className="mr-1 h-4 w-4" />
            추가
          </Button>
        </div>

        {/* 안내 메시지 */}
        <Alert>
          <AlertCircle className="h-4 w-4" />
          <AlertDescription className="text-xs">
            <strong>마스터 쿼리</strong>는 1건의 데이터를 가져오고,
            <strong>디테일 쿼리</strong>는 여러 건을 반복 표시합니다.
          </AlertDescription>
        </Alert>

        {/* 쿼리 목록 */}
        <div className="space-y-2">
          {queries.map((query) => (
            <Card
              key={query.id}
              className={`cursor-pointer transition-colors ${
                selectedQueryId === query.id ? "border-blue-500 bg-blue-50" : "hover:bg-gray-50"
              }`}
              onClick={() => handleSelectQuery(query.id)}
            >
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <CardTitle className="text-sm">{query.name}</CardTitle>
                    <Badge variant={query.type === "MASTER" ? "default" : "secondary"} className="text-xs">
                      {query.type}
                    </Badge>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleDeleteQuery(query.id);
                    }}
                  >
                    <Trash2 className="h-4 w-4 text-red-500" />
                  </Button>
                </div>
              </CardHeader>
              {query.parameters.length > 0 && (
                <CardContent className="pt-0">
                  <div className="flex flex-wrap gap-1">
                    {query.parameters.map((param) => (
                      <Badge key={param} variant="outline" className="text-xs">
                        {param}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              )}
            </Card>
          ))}
        </div>

        {/* 선택된 쿼리 편집 */}
        {selectedQuery && (
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">쿼리 편집</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* 쿼리 이름 */}
              <div className="space-y-2">
                <Label className="text-xs">쿼리 이름</Label>
                <Input
                  value={selectedQuery.name}
                  onChange={(e) => handleUpdateQuery(selectedQuery.id, { name: e.target.value })}
                  placeholder="쿼리 이름"
                  className="h-8"
                />
              </div>

              {/* 쿼리 타입 */}
              <div className="space-y-2">
                <Label className="text-xs">쿼리 타입</Label>
                <Select
                  value={selectedQuery.type}
                  onValueChange={(value: "MASTER" | "DETAIL") => handleUpdateQuery(selectedQuery.id, { type: value })}
                >
                  <SelectTrigger className="h-8">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="MASTER">마스터 (1건)</SelectItem>
                    <SelectItem value="DETAIL">디테일 (반복)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {/* SQL 쿼리 */}
              <div className="space-y-2">
                <Textarea
                  value={selectedQuery.sqlQuery}
                  onChange={(e) => handleUpdateQuery(selectedQuery.id, { sqlQuery: e.target.value })}
                  placeholder="SELECT * FROM orders WHERE order_id = $1"
                  className="min-h-[150px] font-mono text-xs"
                />
              </div>

              {/* 파라미터 입력 */}
              {selectedQuery.parameters.length > 0 && (
                <div className="space-y-3 rounded-md border border-yellow-200 bg-yellow-50 p-3">
                  <div className="flex items-center gap-2">
                    <AlertCircle className="h-4 w-4 text-yellow-600" />
                    <Label className="text-xs font-semibold text-yellow-800">파라미터</Label>
                  </div>
                  <div className="space-y-2">
                    {selectedQuery.parameters.map((param) => {
                      const paramType = parameterTypes[param] || "text";
                      return (
                        <div key={param} className="flex items-center gap-2">
                          <Label className="w-12 text-xs font-semibold">{param}</Label>
                          <Select
                            value={paramType}
                            onValueChange={(value) =>
                              setParameterTypes({
                                ...parameterTypes,
                                [param]: value,
                              })
                            }
                          >
                            <SelectTrigger className="h-8 w-24">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="text">텍스트</SelectItem>
                              <SelectItem value="number">숫자</SelectItem>
                              <SelectItem value="date">날짜</SelectItem>
                            </SelectContent>
                          </Select>
                          <Input
                            type={paramType === "number" ? "number" : paramType === "date" ? "date" : "text"}
                            placeholder="값"
                            className="h-8 flex-1"
                            value={parameterValues[param] || ""}
                            onChange={(e) =>
                              setParameterValues({
                                ...parameterValues,
                                [param]: e.target.value,
                              })
                            }
                          />
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* 테스트 실행 */}
              <Button
                size="sm"
                variant="default"
                className="w-full bg-red-500 hover:bg-red-600"
                onClick={handleTestQuery}
                disabled={!selectedQuery.sqlQuery || isTestRunning || !isAllParametersFilled()}
              >
                <Play className="mr-2 h-4 w-4" />
                {isTestRunning ? "실행 중..." : "실행"}
              </Button>

              {/* 결과 필드 */}
              {testResult && (
                <div className="space-y-2 rounded-md border border-green-200 bg-green-50 p-3">
                  <Label className="text-xs font-semibold text-green-800">결과 필드</Label>
                  <div className="flex flex-wrap gap-2">
                    {testResult.fields.map((field) => (
                      <Badge key={field} variant="default" className="bg-teal-500">
                        {field}
                      </Badge>
                    ))}
                  </div>
                  <p className="text-xs text-green-700">{testResult.rows.length}건의 데이터가 조회되었습니다.</p>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {queries.length === 0 && (
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <Database className="mb-2 h-12 w-12 text-gray-300" />
            <p className="text-sm text-gray-500">
              쿼리를 추가하여 리포트에
              <br />
              데이터를 연결하세요
            </p>
          </div>
        )}
      </div>
    </ScrollArea>
  );
}
