"use client";

import React, { useState, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { toast } from "sonner";
import {
  Plus,
  Search,
  Edit,
  Trash2,
  Eye,
  Filter,
  RotateCcw,
  Settings,
  SortAsc,
  SortDesc,
  CheckCircle,
  AlertCircle,
} from "lucide-react";
import { useButtonActions } from "@/hooks/admin/useButtonActions";
import Link from "next/link";

export default function ButtonActionsManagePage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [categoryFilter, setCategoryFilter] = useState<string>("");
  const [activeFilter, setActiveFilter] = useState<string>("Y");
  const [sortField, setSortField] = useState<string>("sort_order");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");

  // 버튼 액션 데이터 조회
  const { buttonActions, isLoading, error, deleteButtonAction, isDeleting, deleteError, refetch } = useButtonActions({
    active: activeFilter || undefined,
    search: searchTerm || undefined,
    category: categoryFilter || undefined,
  });

  // 카테고리 목록 생성
  const categories = useMemo(() => {
    const uniqueCategories = Array.from(new Set(buttonActions.map((ba) => ba.category).filter(Boolean)));
    return uniqueCategories.sort();
  }, [buttonActions]);

  // 필터링 및 정렬된 데이터
  const filteredAndSortedButtonActions = useMemo(() => {
    let filtered = [...buttonActions];

    // 정렬
    filtered.sort((a, b) => {
      let aValue: any = a[sortField as keyof typeof a];
      let bValue: any = b[sortField as keyof typeof b];

      // 숫자 필드 처리
      if (sortField === "sort_order") {
        aValue = aValue || 0;
        bValue = bValue || 0;
      }

      // 문자열 필드 처리
      if (typeof aValue === "string") {
        aValue = aValue.toLowerCase();
      }
      if (typeof bValue === "string") {
        bValue = bValue.toLowerCase();
      }

      if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
      if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
      return 0;
    });

    return filtered;
  }, [buttonActions, sortField, sortDirection]);

  // 정렬 변경 핸들러
  const handleSort = (field: string) => {
    if (sortField === field) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortDirection("asc");
    }
  };

  // 삭제 핸들러
  const handleDelete = async (actionType: string, actionName: string) => {
    try {
      await deleteButtonAction(actionType);
      toast.success(`버튼 액션 '${actionName}'이 삭제되었습니다.`);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "삭제 중 오류가 발생했습니다.");
    }
  };

  // 필터 초기화
  const resetFilters = () => {
    setSearchTerm("");
    setCategoryFilter("");
    setActiveFilter("Y");
    setSortField("sort_order");
    setSortDirection("asc");
  };

  // 로딩 상태
  if (isLoading) {
    return (
      <div className="flex h-96 items-center justify-center">
        <div className="text-lg">버튼 액션 목록을 불러오는 중...</div>
      </div>
    );
  }

  // 에러 상태
  if (error) {
    return (
      <div className="flex h-96 items-center justify-center">
        <div className="text-center">
          <div className="mb-2 text-lg text-red-600">버튼 액션 목록을 불러오는데 실패했습니다.</div>
          <Button onClick={() => refetch()} variant="outline">
            다시 시도
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-6">
      {/* 헤더 */}
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">버튼 액션 관리</h1>
          <p className="text-muted-foreground">화면관리에서 사용할 버튼 액션들을 관리합니다.</p>
        </div>
        <Link href="/admin/system-settings/button-actions/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />새 버튼 액션 추가
          </Button>
        </Link>
      </div>

      {/* 필터 및 검색 */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-lg">
            <Filter className="h-5 w-5" />
            필터 및 검색
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
            {/* 검색 */}
            <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>

            {/* 카테고리 필터 */}
            <Select value={categoryFilter} onValueChange={setCategoryFilter}>
              <SelectTrigger>
                <SelectValue placeholder="카테고리 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="">전체 카테고리</SelectItem>
                {categories.map((category) => (
                  <SelectItem key={category} value={category}>
                    {category}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {/* 활성화 상태 필터 */}
            <Select value={activeFilter} onValueChange={setActiveFilter}>
              <SelectTrigger>
                <SelectValue placeholder="상태 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="">전체</SelectItem>
                <SelectItem value="Y">활성화</SelectItem>
                <SelectItem value="N">비활성화</SelectItem>
              </SelectContent>
            </Select>

            {/* 초기화 버튼 */}
            <Button variant="outline" onClick={resetFilters}>
              <RotateCcw className="mr-2 h-4 w-4" />
              초기화
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 결과 통계 */}
      <div className="mb-4">
        <p className="text-muted-foreground text-sm">
          총 {filteredAndSortedButtonActions.length}개의 버튼 액션이 있습니다.
        </p>
      </div>

      {/* 버튼 액션 목록 테이블 */}
      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("sort_order")}>
                  <div className="flex items-center gap-2">
                    순서
                    {sortField === "sort_order" &&
                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
                  </div>
                </TableHead>
                <TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("action_type")}>
                  <div className="flex items-center gap-2">
                    액션 타입
                    {sortField === "action_type" &&
                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
                  </div>
                </TableHead>
                <TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("action_name")}>
                  <div className="flex items-center gap-2">
                    액션명
                    {sortField === "action_name" &&
                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
                  </div>
                </TableHead>
                <TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("category")}>
                  <div className="flex items-center gap-2">
                    카테고리
                    {sortField === "category" &&
                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
                  </div>
                </TableHead>
                <TableHead>기본 텍스트</TableHead>
                <TableHead>확인 필요</TableHead>
                <TableHead>설명</TableHead>
                <TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("is_active")}>
                  <div className="flex items-center gap-2">
                    상태
                    {sortField === "is_active" &&
                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
                  </div>
                </TableHead>
                <TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("updated_date")}>
                  <div className="flex items-center gap-2">
                    최종 수정일
                    {sortField === "updated_date" &&
                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
                  </div>
                </TableHead>
                <TableHead className="text-center">작업</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredAndSortedButtonActions.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={10} className="py-8 text-center">
                    조건에 맞는 버튼 액션이 없습니다.
                  </TableCell>
                </TableRow>
              ) : (
                filteredAndSortedButtonActions.map((action) => (
                  <TableRow key={action.action_type}>
                    <TableCell className="font-mono">{action.sort_order || 0}</TableCell>
                    <TableCell className="font-mono">{action.action_type}</TableCell>
                    <TableCell className="font-medium">
                      {action.action_name}
                      {action.action_name_eng && (
                        <div className="text-muted-foreground text-xs">{action.action_name_eng}</div>
                      )}
                    </TableCell>
                    <TableCell>
                      <Badge variant="secondary">{action.category}</Badge>
                    </TableCell>
                    <TableCell className="max-w-xs truncate">{action.default_text || "-"}</TableCell>
                    <TableCell>
                      {action.confirmation_required ? (
                        <div className="flex items-center gap-1 text-orange-600">
                          <AlertCircle className="h-4 w-4" />
                          <span className="text-xs">필요</span>
                        </div>
                      ) : (
                        <div className="flex items-center gap-1 text-gray-500">
                          <CheckCircle className="h-4 w-4" />
                          <span className="text-xs">불필요</span>
                        </div>
                      )}
                    </TableCell>
                    <TableCell className="max-w-xs truncate">{action.description || "-"}</TableCell>
                    <TableCell>
                      <Badge variant={action.is_active === "Y" ? "default" : "secondary"}>
                        {action.is_active === "Y" ? "활성화" : "비활성화"}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-muted-foreground text-sm">
                      {action.updated_date ? new Date(action.updated_date).toLocaleDateString("ko-KR") : "-"}
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Link href={`/admin/system-settings/button-actions/${action.action_type}`}>
                          <Button variant="ghost" size="sm">
                            <Eye className="h-4 w-4" />
                          </Button>
                        </Link>
                        <Link href={`/admin/system-settings/button-actions/${action.action_type}/edit`}>
                          <Button variant="ghost" size="sm">
                            <Edit className="h-4 w-4" />
                          </Button>
                        </Link>
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <Button variant="ghost" size="sm">
                              <Trash2 className="h-4 w-4 text-red-500" />
                            </Button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>버튼 액션 삭제</AlertDialogTitle>
                              <AlertDialogDescription>
                                '{action.action_name}' 버튼 액션을 삭제하시겠습니까?
                                <br />이 작업은 되돌릴 수 없습니다.
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>취소</AlertDialogCancel>
                              <AlertDialogAction
                                onClick={() => handleDelete(action.action_type, action.action_name)}
                                disabled={isDeleting}
                                className="bg-red-600 hover:bg-red-700"
                              >
                                {isDeleting ? "삭제 중..." : "삭제"}
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {deleteError && (
        <div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
          <p className="text-red-600">
            삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
          </p>
        </div>
      )}
    </div>
  );
}