"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { dashboardApi } from "@/lib/api/dashboard";
import { Dashboard } from "@/lib/api/dashboard";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useToast } from "@/hooks/use-toast";
import { Pagination, PaginationInfo } from "@/components/common/Pagination";
import { DeleteConfirmModal } from "@/components/common/DeleteConfirmModal";
import { Plus, Search, Edit, Trash2, Copy, MoreVertical, AlertCircle, RefreshCw } from "lucide-react";

/**
 * 대시보드 관리 페이지
 * - CSR 방식으로 초기 데이터 로드
 * - 대시보드 목록 조회
 * - 대시보드 생성/수정/삭제/복사
 */
export default function DashboardListPage() {
  const router = useRouter();
  const { toast } = useToast();
  
  // 상태 관리
  const [dashboards, setDashboards] = useState<Dashboard[]>([]);
  const [loading, setLoading] = useState(true); // CSR이므로 초기 로딩 true
  const [error, setError] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState("");

  // 페이지네이션 상태
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [totalCount, setTotalCount] = useState(0);

  // 모달 상태
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<{ id: string; title: string } | null>(null);

  // 대시보드 목록 로드
  const loadDashboards = async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await dashboardApi.getMyDashboards({
        search: searchTerm,
        page: currentPage,
        limit: pageSize,
      });
      setDashboards(result.dashboards);
      setTotalCount(result.pagination.total);
    } catch (err) {
      console.error("Failed to load dashboards:", err);
      setError(
        err instanceof Error
          ? err.message
          : "대시보드 목록을 불러오는데 실패했습니다. 네트워크 연결을 확인하거나 잠시 후 다시 시도해주세요.",
      );
    } finally {
      setLoading(false);
    }
  };

  // 검색어/페이지 변경 시 fetch (초기 로딩 포함)
  useEffect(() => {
    loadDashboards();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchTerm, currentPage, pageSize]);

  // 페이지네이션 정보 계산
  const paginationInfo: PaginationInfo = {
    currentPage,
    totalPages: Math.ceil(totalCount / pageSize) || 1,
    totalItems: totalCount,
    itemsPerPage: pageSize,
    startItem: totalCount === 0 ? 0 : (currentPage - 1) * pageSize + 1,
    endItem: Math.min(currentPage * pageSize, totalCount),
  };

  // 페이지 변경 핸들러
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  // 페이지 크기 변경 핸들러
  const handlePageSizeChange = (size: number) => {
    setPageSize(size);
    setCurrentPage(1); // 페이지 크기 변경 시 첫 페이지로
  };

  // 대시보드 삭제 확인 모달 열기
  const handleDeleteClick = (id: string, title: string) => {
    setDeleteTarget({ id, title });
    setDeleteDialogOpen(true);
  };

  // 대시보드 삭제 실행
  const handleDeleteConfirm = async () => {
    if (!deleteTarget) return;

    try {
      await dashboardApi.deleteDashboard(deleteTarget.id);
      setDeleteDialogOpen(false);
      setDeleteTarget(null);
      toast({
        title: "성공",
        description: "대시보드가 삭제되었습니다.",
      });
      loadDashboards();
    } catch (err) {
      console.error("Failed to delete dashboard:", err);
      setDeleteDialogOpen(false);
      toast({
        title: "오류",
        description: "대시보드 삭제에 실패했습니다.",
        variant: "destructive",
      });
    }
  };

  // 대시보드 복사
  const handleCopy = async (dashboard: Dashboard) => {
    try {
      const fullDashboard = await dashboardApi.getDashboard(dashboard.id);

      await dashboardApi.createDashboard({
        title: `${fullDashboard.title} (복사본)`,
        description: fullDashboard.description,
        elements: fullDashboard.elements || [],
        isPublic: false,
        tags: fullDashboard.tags,
        category: fullDashboard.category,
        settings: fullDashboard.settings as { resolution?: string; backgroundColor?: string },
      });
      toast({
        title: "성공",
        description: "대시보드가 복사되었습니다.",
      });
      loadDashboards();
    } catch (err) {
      console.error("Failed to copy dashboard:", err);
      toast({
        title: "오류",
        description: "대시보드 복사에 실패했습니다.",
        variant: "destructive",
      });
    }
  };

  // 포맷팅 헬퍼
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("ko-KR", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    });
  };

  return (
    <div className="bg-background flex min-h-screen flex-col">
      <div className="space-y-6 p-6">
        {/* 페이지 헤더 */}
        <div className="space-y-2 border-b pb-4">
          <h1 className="text-3xl font-bold tracking-tight">대시보드 관리</h1>
          <p className="text-muted-foreground text-sm">대시보드를 생성하고 관리할 수 있습니다</p>
        </div>

        {/* 검색 및 액션 */}
        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div className="flex items-center gap-4">
            <div className="relative w-full sm:w-[300px]">
              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
              <Input
                placeholder="대시보드 검색..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="h-10 pl-10 text-sm"
              />
            </div>
            <div className="text-muted-foreground text-sm">
              총 <span className="text-foreground font-semibold">{totalCount.toLocaleString()}</span> 건
            </div>
          </div>
          <Button onClick={() => router.push("/admin/screenMng/dashboardList/new")} className="h-10 gap-2 text-sm font-medium">
            <Plus className="h-4 w-4" />
            새 대시보드 생성
          </Button>
        </div>

        {/* 대시보드 목록 */}
        {loading ? (
          <>
            {/* 데스크톱 테이블 스켈레톤 */}
            <div className="bg-card hidden shadow-sm lg:block">
              <Table>
                <TableHeader>
                  <TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
                    <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
                    <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
                    <TableHead className="h-12 text-sm font-semibold">생성자</TableHead>
                    <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
                    <TableHead className="h-12 text-sm font-semibold">수정일</TableHead>
                    <TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {Array.from({ length: 10 }).map((_, index) => (
                    <TableRow key={index} className="border-b">
                      <TableCell className="h-16">
                        <div className="bg-muted h-4 animate-pulse rounded"></div>
                      </TableCell>
                      <TableCell className="h-16">
                        <div className="bg-muted h-4 animate-pulse rounded"></div>
                      </TableCell>
                      <TableCell className="h-16">
                        <div className="bg-muted h-4 w-20 animate-pulse rounded"></div>
                      </TableCell>
                      <TableCell className="h-16">
                        <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
                      </TableCell>
                      <TableCell className="h-16">
                        <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
                      </TableCell>
                      <TableCell className="h-16 text-right">
                        <div className="bg-muted ml-auto h-8 w-8 animate-pulse rounded"></div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

            {/* 모바일/태블릿 카드 스켈레톤 */}
            <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
              {Array.from({ length: 6 }).map((_, index) => (
                <div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
                  <div className="mb-4 flex items-start justify-between">
                    <div className="flex-1 space-y-2">
                      <div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
                      <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
                    </div>
                  </div>
                  <div className="space-y-2 border-t pt-4">
                    {Array.from({ length: 3 }).map((_, i) => (
                      <div key={i} className="flex justify-between">
                        <div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
                        <div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </>
        ) : error ? (
          <div className="border-destructive/50 bg-destructive/10 flex flex-col items-center justify-center rounded-lg border p-12">
            <div className="flex flex-col items-center gap-4 text-center">
              <div className="bg-destructive/20 flex h-16 w-16 items-center justify-center rounded-full">
                <AlertCircle className="text-destructive h-8 w-8" />
              </div>
              <div>
                <h3 className="text-destructive mb-2 text-lg font-semibold">데이터를 불러올 수 없습니다</h3>
                <p className="text-destructive/80 max-w-md text-sm">{error}</p>
              </div>
              <Button onClick={loadDashboards} variant="outline" className="mt-2 gap-2">
                <RefreshCw className="h-4 w-4" />
                다시 시도
              </Button>
            </div>
          </div>
        ) : dashboards.length === 0 ? (
          <div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
            <div className="flex flex-col items-center gap-2 text-center">
              <p className="text-muted-foreground text-sm">대시보드가 없습니다</p>
            </div>
          </div>
        ) : (
          <>
            {/* 데스크톱 테이블 뷰 (lg 이상) */}
            <div className="bg-card hidden shadow-sm lg:block">
              <Table>
                <TableHeader>
                  <TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
                    <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
                    <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
                    <TableHead className="h-12 text-sm font-semibold">생성자</TableHead>
                    <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
                    <TableHead className="h-12 text-sm font-semibold">수정일</TableHead>
                    <TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {dashboards.map((dashboard) => (
                    <TableRow key={dashboard.id} className="hover:bg-muted/50 border-b transition-colors">
                      <TableCell className="h-16 text-sm font-medium">
                      <button
                        onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
                        className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
                      >
                        {dashboard.title}
                      </button>
                      </TableCell>
                      <TableCell className="text-muted-foreground h-16 max-w-md truncate text-sm">
                        {dashboard.description || "-"}
                      </TableCell>
                      <TableCell className="text-muted-foreground h-16 text-sm">
                        {dashboard.createdByName || dashboard.createdBy || "-"}
                      </TableCell>
                      <TableCell className="text-muted-foreground h-16 text-sm">
                        {formatDate(dashboard.createdAt)}
                      </TableCell>
                      <TableCell className="text-muted-foreground h-16 text-sm">
                        {formatDate(dashboard.updatedAt)}
                      </TableCell>
                      <TableCell className="h-16 text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon" className="h-8 w-8">
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem
                              onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
                              className="gap-2 text-sm"
                            >
                              <Edit className="h-4 w-4" />
                              편집
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleCopy(dashboard)} className="gap-2 text-sm">
                              <Copy className="h-4 w-4" />
                              복사
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
                              className="text-destructive focus:text-destructive gap-2 text-sm"
                            >
                              <Trash2 className="h-4 w-4" />
                              삭제
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

            {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
            <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
              {dashboards.map((dashboard) => (
                <div
                  key={dashboard.id}
                  className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
                >
                  {/* 헤더 */}
                  <div className="mb-4 flex items-start justify-between">
                    <div className="flex-1">
                      <button
                        onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
                        className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
                      >
                        <h3 className="text-base font-semibold">{dashboard.title}</h3>
                      </button>
                      <p className="text-muted-foreground mt-1 text-sm">{dashboard.id}</p>
                    </div>
                  </div>

                  {/* 정보 */}
                  <div className="space-y-2 border-t pt-4">
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">설명</span>
                      <span className="max-w-[200px] truncate font-medium">{dashboard.description || "-"}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">생성자</span>
                      <span className="font-medium">{dashboard.createdByName || dashboard.createdBy || "-"}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">생성일</span>
                      <span className="font-medium">{formatDate(dashboard.createdAt)}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">수정일</span>
                      <span className="font-medium">{formatDate(dashboard.updatedAt)}</span>
                    </div>
                  </div>

                  {/* 액션 */}
                  <div className="mt-4 flex gap-2 border-t pt-4">
                    <Button
                      variant="outline"
                      size="sm"
                      className="h-9 flex-1 gap-2 text-sm"
                      onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
                    >
                      <Edit className="h-4 w-4" />
                      편집
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="h-9 flex-1 gap-2 text-sm"
                      onClick={() => handleCopy(dashboard)}
                    >
                      <Copy className="h-4 w-4" />
                      복사
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 gap-2 text-sm"
                      onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}

        {/* 페이지네이션 */}
        {!loading && dashboards.length > 0 && (
          <Pagination
            paginationInfo={paginationInfo}
            onPageChange={handlePageChange}
            onPageSizeChange={handlePageSizeChange}
            showPageSizeSelector={true}
            pageSizeOptions={[10, 20, 50, 100]}
          />
        )}

        {/* 삭제 확인 모달 */}
        <DeleteConfirmModal
          open={deleteDialogOpen}
          onOpenChange={setDeleteDialogOpen}
          title="대시보드 삭제"
          description={
            <>
              &quot;{deleteTarget?.title}&quot; 대시보드를 삭제하시겠습니까?
              <br />이 작업은 되돌릴 수 없습니다.
            </>
          }
          onConfirm={handleDeleteConfirm}
        />
      </div>
    </div>
  );
}
