"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 { 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 { showErrorToast } from "@/lib/utils/toastUtils";
import { Plus, Search, Edit, Trash2, Eye, RotateCcw, SortAsc, SortDesc } from "lucide-react";
import { useWebTypes } from "@/hooks/admin/useWebTypes";
import Link from "next/link";
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
import type { WebTypeStandard } from "@/hooks/admin/useWebTypes";

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

  const { webTypes, isLoading, error, deleteWebType, isDeleting, deleteError, refetch } = useWebTypes({
    active: activeFilter === "all" ? undefined : activeFilter,
    search: searchTerm || undefined,
    category: categoryFilter === "all" ? undefined : categoryFilter,
  });

  const categories = useMemo(() => {
    const uniqueCategories = Array.from(new Set(webTypes.map((wt) => wt.category).filter(Boolean)));
    return uniqueCategories.sort();
  }, [webTypes]);

  const filteredAndSortedWebTypes = useMemo(() => {
    let filtered = [...webTypes];

    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;
  }, [webTypes, sortField, sortDirection]);

  const handleDelete = async (webType: string, typeName: string) => {
    try {
      await deleteWebType(webType);
      toast.success(`웹타입 '${typeName}'이 삭제되었습니다.`);
    } catch (error) {
      showErrorToast("웹타입 삭제에 실패했습니다", error, { guidance: "잠시 후 다시 시도해 주세요." });
    }
  };

  const resetFilters = () => {
    setSearchTerm("");
    setCategoryFilter("all");
    setActiveFilter("Y");
    setSortField("sort_order");
    setSortDirection("asc");
  };

  // 삭제 AlertDialog 렌더 헬퍼
  const renderDeleteDialog = (wt: WebTypeStandard) => (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="ghost" size="sm">
          <Trash2 className="h-4 w-4 text-destructive" />
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
          <AlertDialogDescription>
            &apos;{wt.type_name}&apos; 웹타입을 삭제하시겠습니까?
            <br />이 작업은 되돌릴 수 없습니다.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>취소</AlertDialogCancel>
          <AlertDialogAction
            onClick={() => handleDelete(wt.web_type, wt.type_name)}
            disabled={isDeleting}
            className="bg-destructive hover:bg-destructive/90"
          >
            {isDeleting ? "삭제 중..." : "삭제"}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );

  const columns: RDVColumn<WebTypeStandard>[] = [
    {
      key: "sort_order",
      label: "순서",
      width: "80px",
      render: (_val, wt) => <span className="font-mono">{wt.sort_order || 0}</span>,
    },
    {
      key: "web_type",
      label: "웹타입 코드",
      hideOnMobile: true,
      render: (_val, wt) => <span className="font-mono">{wt.web_type}</span>,
    },
    {
      key: "type_name",
      label: "웹타입명",
      render: (_val, wt) => (
        <div>
          <div className="font-medium">{wt.type_name}</div>
          {wt.type_name_eng && (
            <div className="text-xs text-muted-foreground">{wt.type_name_eng}</div>
          )}
        </div>
      ),
    },
    {
      key: "category",
      label: "카테고리",
      render: (_val, wt) => <Badge variant="secondary">{wt.category}</Badge>,
    },
    {
      key: "description",
      label: "설명",
      hideOnMobile: true,
      render: (_val, wt) => (
        <span className="max-w-xs truncate">{wt.description || "-"}</span>
      ),
    },
    {
      key: "is_active",
      label: "상태",
      render: (_val, wt) => (
        <Badge variant={wt.is_active === "Y" ? "default" : "secondary"}>
          {wt.is_active === "Y" ? "활성화" : "비활성화"}
        </Badge>
      ),
    },
    {
      key: "updated_date",
      label: "최종 수정일",
      hideOnMobile: true,
      render: (_val, wt) => (
        <span className="text-muted-foreground">
          {wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-"}
        </span>
      ),
    },
  ];

  const cardFields: RDVCardField<WebTypeStandard>[] = [
    {
      label: "카테고리",
      render: (wt) => <Badge variant="secondary">{wt.category}</Badge>,
    },
    {
      label: "순서",
      render: (wt) => String(wt.sort_order || 0),
    },
    {
      label: "설명",
      render: (wt) => wt.description || "-",
      hideEmpty: true,
    },
    {
      label: "수정일",
      render: (wt) =>
        wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-",
    },
  ];

  return (
    <div className="space-y-6">
      {/* 페이지 헤더 */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold">웹타입 관리</h1>
          <p className="text-sm text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다</p>
        </div>
        <Link href="/admin/standards/new">
          <Button className="w-full sm:w-auto">
            <Plus className="mr-2 h-4 w-4" />새 웹타입 추가
          </Button>
        </Link>
      </div>

      {/* 에러 상태 */}
      {error && (
        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
          <p className="text-sm font-semibold text-destructive">웹타입 목록을 불러오는데 실패했습니다.</p>
          <Button onClick={() => refetch()} variant="outline" size="sm" className="mt-2">
            다시 시도
          </Button>
        </div>
      )}

      {/* 검색 툴바 */}
      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
          <div className="relative w-full sm:w-[300px]">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="웹타입명, 설명 검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="h-10 pl-10 text-sm"
            />
          </div>

          <Select value={categoryFilter} onValueChange={setCategoryFilter}>
            <SelectTrigger className="h-10 w-full sm:w-[160px]">
              <SelectValue placeholder="카테고리 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">전체 카테고리</SelectItem>
              {categories.map((category) => (
                <SelectItem key={category} value={category}>
                  {category}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          <Select value={activeFilter} onValueChange={setActiveFilter}>
            <SelectTrigger className="h-10 w-full sm:w-[160px]">
              <SelectValue placeholder="상태 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">전체</SelectItem>
              <SelectItem value="Y">활성화</SelectItem>
              <SelectItem value="N">비활성화</SelectItem>
            </SelectContent>
          </Select>

          {/* 정렬 선택 */}
          <div className="flex items-center gap-2">
            <Select value={sortField} onValueChange={(v) => { setSortField(v); }}>
              <SelectTrigger className="h-10 w-full sm:w-[140px]">
                <SelectValue placeholder="정렬 기준" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="sort_order">순서</SelectItem>
                <SelectItem value="web_type">웹타입 코드</SelectItem>
                <SelectItem value="type_name">웹타입명</SelectItem>
                <SelectItem value="category">카테고리</SelectItem>
                <SelectItem value="is_active">상태</SelectItem>
                <SelectItem value="updated_date">수정일</SelectItem>
              </SelectContent>
            </Select>
            <Button
              variant="outline"
              size="icon"
              onClick={() => setSortDirection(sortDirection === "asc" ? "desc" : "asc")}
              className="h-10 w-10 shrink-0"
              title={sortDirection === "asc" ? "오름차순" : "내림차순"}
            >
              {sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
            </Button>
          </div>
        </div>

        <Button variant="outline" onClick={resetFilters} className="h-10 w-full sm:w-auto">
          <RotateCcw className="mr-2 h-4 w-4" />
          초기화
        </Button>
      </div>

      {/* 결과 수 */}
      <div className="text-sm text-muted-foreground">
        총 <span className="font-semibold text-foreground">{filteredAndSortedWebTypes.length}</span>개의 웹타입
      </div>

      {/* 삭제 에러 */}
      {deleteError && (
        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
          <p className="text-sm text-destructive">
            삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
          </p>
        </div>
      )}

      <ResponsiveDataView<WebTypeStandard>
        data={filteredAndSortedWebTypes}
        columns={columns}
        keyExtractor={(wt) => wt.web_type}
        isLoading={isLoading}
        emptyMessage="조건에 맞는 웹타입이 없습니다."
        skeletonCount={6}
        cardTitle={(wt) => wt.type_name}
        cardSubtitle={(wt) => (
          <>
            {wt.type_name_eng && (
              <span className="text-xs text-muted-foreground">{wt.type_name_eng} / </span>
            )}
            <span className="font-mono text-xs text-muted-foreground">{wt.web_type}</span>
          </>
        )}
        cardHeaderRight={(wt) => (
          <Badge variant={wt.is_active === "Y" ? "default" : "secondary"} className="shrink-0">
            {wt.is_active === "Y" ? "활성화" : "비활성화"}
          </Badge>
        )}
        cardFields={cardFields}
        actionsLabel="작업"
        actionsWidth="140px"
        renderActions={(wt) => (
          <>
            <Link href={`/admin/standards/${wt.web_type}`}>
              <Button variant="ghost" size="sm">
                <Eye className="h-4 w-4" />
              </Button>
            </Link>
            <Link href={`/admin/standards/${wt.web_type}/edit`}>
              <Button variant="ghost" size="sm">
                <Edit className="h-4 w-4" />
              </Button>
            </Link>
            {renderDeleteDialog(wt)}
          </>
        )}
      />
    </div>
  );
}