"use client";

import React, { useState, useEffect } from "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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Plus, Search, MoreHorizontal, Edit, Trash2, Play, History, RefreshCw } from "lucide-react";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import { CollectionAPI, DataCollectionConfig } from "@/lib/api/collection";
import CollectionConfigModal from "@/components/admin/CollectionConfigModal";

export default function CollectionManagementPage() {
  const [configs, setConfigs] = useState<DataCollectionConfig[]>([]);
  const [filteredConfigs, setFilteredConfigs] = useState<DataCollectionConfig[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [typeFilter, setTypeFilter] = useState("all");

  // 모달 상태
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedConfig, setSelectedConfig] = useState<DataCollectionConfig | null>(null);

  const collectionTypeOptions = CollectionAPI.getCollectionTypeOptions();

  useEffect(() => {
    loadConfigs();
  }, []);

  useEffect(() => {
    filterConfigs();
  }, [configs, searchTerm, statusFilter, typeFilter]);

  const loadConfigs = async () => {
    setIsLoading(true);
    try {
      const data = await CollectionAPI.getCollectionConfigs();
      setConfigs(data);
    } catch (error) {
      console.error("수집 설정 목록 조회 오류:", error);
      showErrorToast("수집 설정 목록을 불러오는 데 실패했습니다", error, { guidance: "네트워크 연결을 확인해 주세요." });
    } finally {
      setIsLoading(false);
    }
  };

  const filterConfigs = () => {
    let filtered = configs;

    // 검색어 필터
    if (searchTerm) {
      filtered = filtered.filter(
        (config) =>
          config.config_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          config.source_table.toLowerCase().includes(searchTerm.toLowerCase()) ||
          config.description?.toLowerCase().includes(searchTerm.toLowerCase()),
      );
    }

    // 상태 필터
    if (statusFilter !== "all") {
      filtered = filtered.filter((config) => config.is_active === statusFilter);
    }

    // 타입 필터
    if (typeFilter !== "all") {
      filtered = filtered.filter((config) => config.collection_type === typeFilter);
    }

    setFilteredConfigs(filtered);
  };

  const handleCreate = () => {
    setSelectedConfig(null);
    setIsModalOpen(true);
  };

  const handleEdit = (config: DataCollectionConfig) => {
    setSelectedConfig(config);
    setIsModalOpen(true);
  };

  const handleDelete = async (config: DataCollectionConfig) => {
    if (!confirm(`"${config.config_name}" 수집 설정을 삭제하시겠습니까?`)) {
      return;
    }

    try {
      await CollectionAPI.deleteCollectionConfig(config.id!);
      toast.success("수집 설정이 삭제되었습니다.");
      loadConfigs();
    } catch (error) {
      console.error("수집 설정 삭제 오류:", error);
      toast.error("수집 설정 삭제에 실패했습니다.");
    }
  };

  const handleExecute = async (config: DataCollectionConfig) => {
    try {
      await CollectionAPI.executeCollection(config.id!);
      toast.success(`"${config.config_name}" 수집 작업을 시작했습니다.`);
    } catch (error) {
      console.error("수집 작업 실행 오류:", error);
      showErrorToast("수집 작업 실행에 실패했습니다", error, { guidance: "수집 설정을 확인해 주세요." });
    }
  };

  const handleModalSave = () => {
    loadConfigs();
  };

  const getStatusBadge = (isActive: string) => {
    return isActive === "Y" ? (
      <Badge className="bg-green-100 text-green-800">활성</Badge>
    ) : (
      <Badge className="bg-red-100 text-red-800">비활성</Badge>
    );
  };

  const getTypeBadge = (type: string) => {
    const option = collectionTypeOptions.find((opt) => opt.value === type);
    const colors = {
      full: "bg-blue-100 text-blue-800",
      incremental: "bg-purple-100 text-purple-800",
      delta: "bg-orange-100 text-orange-800",
    };
    return (
      <Badge className={colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800"}>
        {option?.label || type}
      </Badge>
    );
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="w-full max-w-none space-y-8 px-4 py-8">
        {/* 헤더 */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold">수집 관리</h1>
            <p className="text-muted-foreground">외부 데이터베이스에서 데이터를 수집하는 설정을 관리합니다.</p>
          </div>
          <Button onClick={handleCreate}>
            <Plus className="mr-2 h-4 w-4" />새 수집 설정
          </Button>
        </div>

        {/* 필터 및 검색 */}
        <Card>
          <CardHeader>
            <CardTitle>필터 및 검색</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col gap-4 md:flex-row">
              <div className="flex-1">
                <div className="relative">
                  <Search className="text-muted-foreground absolute top-3 left-3 h-4 w-4" />
                  <Input
                    placeholder="설정명, 테이블명, 설명으로 검색..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
              </div>

              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="상태" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">전체</SelectItem>
                  <SelectItem value="Y">활성</SelectItem>
                  <SelectItem value="N">비활성</SelectItem>
                </SelectContent>
              </Select>

              <Select value={typeFilter} onValueChange={setTypeFilter}>
                <SelectTrigger className="w-40">
                  <SelectValue placeholder="수집 타입" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">전체 타입</SelectItem>
                  {collectionTypeOptions.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Button variant="outline" onClick={loadConfigs} disabled={isLoading}>
                <RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
                새로고침
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* 수집 설정 목록 */}
        <Card>
          <CardHeader>
            <CardTitle>수집 설정 목록 ({filteredConfigs.length}개)</CardTitle>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="py-8 text-center">
                <RefreshCw className="mx-auto mb-2 h-8 w-8 animate-spin" />
                <p>수집 설정을 불러오는 중...</p>
              </div>
            ) : filteredConfigs.length === 0 ? (
              <div className="text-muted-foreground py-8 text-center">
                {configs.length === 0 ? "수집 설정이 없습니다." : "검색 결과가 없습니다."}
              </div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="h-12 px-6 py-3 text-sm font-semibold">설정명</TableHead>
                    <TableHead className="h-12 px-6 py-3 text-sm font-semibold">수집 타입</TableHead>
                    <TableHead className="h-12 px-6 py-3 text-sm font-semibold">소스 테이블</TableHead>
                    <TableHead className="h-12 px-6 py-3 text-sm font-semibold">대상 테이블</TableHead>
                    <TableHead className="h-12 px-6 py-3 text-sm font-semibold">스케줄</TableHead>
                    <TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
                    <TableHead className="h-12 px-6 py-3 text-sm font-semibold">마지막 수집</TableHead>
                    <TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredConfigs.map((config) => (
                    <TableRow key={config.id} className="bg-background hover:bg-muted/50 transition-colors">
                      <TableCell className="h-16 px-6 py-3 text-sm">
                        <div>
                          <div className="font-medium">{config.config_name}</div>
                          {config.description && (
                            <div className="text-muted-foreground text-sm">{config.description}</div>
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="h-16 px-6 py-3 text-sm">{getTypeBadge(config.collection_type)}</TableCell>
                      <TableCell className="h-16 px-6 py-3 font-mono text-sm">{config.source_table}</TableCell>
                      <TableCell className="h-16 px-6 py-3 font-mono text-sm">{config.target_table || "-"}</TableCell>
                      <TableCell className="h-16 px-6 py-3 font-mono text-sm">{config.schedule_cron || "-"}</TableCell>
                      <TableCell className="h-16 px-6 py-3 text-sm">{getStatusBadge(config.is_active)}</TableCell>
                      <TableCell className="h-16 px-6 py-3 text-sm">
                        {config.last_collected_at ? new Date(config.last_collected_at).toLocaleString() : "-"}
                      </TableCell>
                      <TableCell className="h-16 px-6 py-3 text-sm">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => handleEdit(config)}>
                              <Edit className="mr-2 h-4 w-4" />
                              수정
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleExecute(config)} disabled={config.is_active !== "Y"}>
                              <Play className="mr-2 h-4 w-4" />
                              실행
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleDelete(config)}>
                              <Trash2 className="mr-2 h-4 w-4" />
                              삭제
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </CardContent>
        </Card>

        {/* 수집 설정 모달 */}
        <CollectionConfigModal
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          onSave={handleModalSave}
          config={selectedConfig}
        />
      </div>
    </div>
  );
}
