"use client";

/**
 * 거래처관리 - IntegratedListTemplateV2 적용
 *
 * 견적관리와 동일한 구조로 통일
 * - PageHeader, StatCards, SearchFilter
 * - 탭 기반 필터 (데스크톱: TabsList, 모바일: 커스텀 버튼)
 * - 체크박스 포함 DataTable (Desktop)
 * - 체크박스 포함 모바일 카드 (Mobile)
 * - 페이지네이션 + 모바일 인피니티 스크롤
 *
 * API 연동: 2025-12-04
 * - useClientList 훅으로 백엔드 API 연동
 * - 페이지 기반 CRUD (등록/수정/상세 → 별도 페이지로 이동)
 */

import { useState, useRef, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import { useClientList, Client } from "@/hooks/useClientList";
import {
  Building2,
  Plus,
  Edit,
  Trash2,
  Users,
  CheckCircle,
  XCircle,
  Eye,
  Loader2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  IntegratedListTemplateV2,
  TabOption,
  TableColumn,
} from "@/components/templates/IntegratedListTemplateV2";
import { toast } from "sonner";
import {
  TableRow,
  TableCell,
} from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { ListMobileCard, InfoField } from "@/components/organisms/ListMobileCard";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

export default function CustomerAccountManagementPage() {
  const router = useRouter();

  // API 훅 사용
  const {
    clients,
    pagination,
    isLoading,
    fetchClients,
    deleteClient: deleteClientApi,
  } = useClientList();

  const [searchTerm, setSearchTerm] = useState("");
  const [filterType, setFilterType] = useState("all");
  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

  // 초기 로딩 완료 여부 (첫 데이터 로드 완료 시 true)
  const [isInitialLoaded, setIsInitialLoaded] = useState(false);

  // 전체 통계 (검색과 무관하게 고정)
  const [totalStats, setTotalStats] = useState({
    total: 0,
    purchase: 0,
    sales: 0,
    active: 0,
    inactive: 0,
  });

  // 삭제 확인 다이얼로그 state
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);

  // 일괄 삭제 확인 다이얼로그 state
  const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);

  // 모바일 인피니티 스크롤 state
  const [mobileDisplayCount, setMobileDisplayCount] = useState(20);
  const sentinelRef = useRef<HTMLDivElement>(null);

  // 전체 통계 로드 (최초 1회만)
  const loadTotalStats = useCallback(async () => {
    try {
      // 전체 데이터 조회 (검색 조건 없이)
      const response = await fetch("/api/proxy/clients?size=1000");
      if (response.ok) {
        const result = await response.json();
        if (result.success && result.data) {
          const allClients = result.data.data || [];
          setTotalStats({
            total: result.data.total || allClients.length,
            purchase: allClients.filter((c: { client_type?: string }) =>
              c.client_type === "매입" || c.client_type === "매입매출"
            ).length,
            sales: allClients.filter((c: { client_type?: string }) =>
              c.client_type === "매출" || c.client_type === "매입매출"
            ).length,
            active: allClients.filter((c: { is_active?: boolean }) => c.is_active === true).length,
            inactive: allClients.filter((c: { is_active?: boolean }) => c.is_active === false).length,
          });
        }
      }
    } catch (err) {
      console.error("전체 통계 로드 실패:", err);
    }
  }, []);

  // 초기 데이터 로드
  useEffect(() => {
    const loadData = async () => {
      // 최초 로드 시 전체 통계도 함께 로드
      if (!isInitialLoaded) {
        await loadTotalStats();
      }
      await fetchClients({
        page: currentPage,
        size: itemsPerPage,
        q: searchTerm || undefined,
        onlyActive: filterType === "active" ? true : filterType === "inactive" ? false : undefined,
      });
      if (!isInitialLoaded) {
        setIsInitialLoaded(true);
      }
    };
    loadData();
  }, [currentPage, filterType, fetchClients, isInitialLoaded, loadTotalStats]);

  // 검색어 변경 시 디바운스 처리
  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  useEffect(() => {
    if (searchTimeoutRef.current) {
      clearTimeout(searchTimeoutRef.current);
    }
    searchTimeoutRef.current = setTimeout(() => {
      setCurrentPage(1);
      fetchClients({
        page: 1,
        size: itemsPerPage,
        q: searchTerm || undefined,
        onlyActive: filterType === "active" ? true : filterType === "inactive" ? false : undefined,
      });
    }, 300);

    return () => {
      if (searchTimeoutRef.current) {
        clearTimeout(searchTimeoutRef.current);
      }
    };
  }, [searchTerm]);

  // 클라이언트 사이드 필터링 (탭용)
  const filteredClients = clients.filter((client) => {
    if (filterType === "active") return client.status === "활성";
    if (filterType === "inactive") return client.status === "비활성";
    if (filterType === "purchase") return client.clientType === "매입" || client.clientType === "매입매출";
    if (filterType === "sales") return client.clientType === "매출" || client.clientType === "매입매출";
    return true;
  });

  // 페이지네이션 (API에서 처리하므로 clients 직접 사용)
  const totalPages = pagination ? pagination.lastPage : 1;
  const paginatedClients = filteredClients;

  // 모바일용 인피니티 스크롤 데이터
  const mobileClients = filteredClients.slice(0, mobileDisplayCount);

  // Intersection Observer를 이용한 인피니티 스크롤
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (window.innerWidth >= 1280) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (
          entries[0].isIntersecting &&
          mobileDisplayCount < filteredClients.length
        ) {
          setMobileDisplayCount((prev) =>
            Math.min(prev + 20, filteredClients.length)
          );
        }
      },
      {
        threshold: 0.1,
        rootMargin: "100px",
      }
    );

    if (sentinelRef.current) {
      observer.observe(sentinelRef.current);
    }

    return () => {
      observer.disconnect();
    };
  }, [mobileDisplayCount, filteredClients.length]);

  // 탭이나 검색어 변경 시 모바일 표시 개수 초기화
  useEffect(() => {
    setMobileDisplayCount(20);
  }, [searchTerm, filterType]);

  // 통계 카드 (전체 통계 기준 - 검색과 무관하게 고정)
  const stats = [
    {
      label: "전체 거래처",
      value: totalStats.total,
      icon: Users,
      iconColor: "text-blue-600",
    },
    {
      label: "매입 거래처",
      value: totalStats.purchase,
      icon: Building2,
      iconColor: "text-orange-600",
    },
    {
      label: "매출 거래처",
      value: totalStats.sales,
      icon: Building2,
      iconColor: "text-rose-600",
    },
    {
      label: "활성 거래처",
      value: totalStats.active,
      icon: CheckCircle,
      iconColor: "text-green-600",
    },
  ];

  // 데이터 새로고침 함수 (삭제/등록 후 통계도 다시 로드)
  const refreshData = useCallback(async () => {
    await loadTotalStats(); // 통계 다시 로드
    fetchClients({
      page: currentPage,
      size: itemsPerPage,
      q: searchTerm || undefined,
      onlyActive: filterType === "active" ? true : filterType === "inactive" ? false : undefined,
    });
  }, [currentPage, itemsPerPage, searchTerm, filterType, fetchClients, loadTotalStats]);

  // 핸들러 - 페이지 기반 네비게이션
  const handleAddNew = () => {
    router.push("/sales/client-management-sales-admin/new");
  };

  const handleEdit = (customer: Client) => {
    router.push(`/sales/client-management-sales-admin/${customer.id}/edit`);
  };

  const handleView = (customer: Client) => {
    router.push(`/sales/client-management-sales-admin/${customer.id}`);
  };

  const handleDelete = (customerId: string) => {
    setDeleteTargetId(customerId);
    setIsDeleteDialogOpen(true);
  };

  const handleConfirmDelete = async () => {
    if (deleteTargetId) {
      try {
        const customer = clients.find((c) => c.id === deleteTargetId);
        await deleteClientApi(deleteTargetId);
        toast.success(`거래처가 삭제되었습니다${customer ? `: ${customer.name}` : ""}`);
        setIsDeleteDialogOpen(false);
        setDeleteTargetId(null);
        refreshData();
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : "삭제 중 오류가 발생했습니다";
        toast.error(errorMessage);
      }
    }
  };

  // 체크박스 선택
  const toggleSelection = (id: string) => {
    const newSelection = new Set(selectedItems);
    if (newSelection.has(id)) {
      newSelection.delete(id);
    } else {
      newSelection.add(id);
    }
    setSelectedItems(newSelection);
  };

  const toggleSelectAll = () => {
    if (
      selectedItems.size === paginatedClients.length &&
      paginatedClients.length > 0
    ) {
      setSelectedItems(new Set());
    } else {
      setSelectedItems(new Set(paginatedClients.map((c) => c.id)));
    }
  };

  // 일괄 삭제
  const handleBulkDelete = () => {
    if (selectedItems.size === 0) {
      toast.error("삭제할 항목을 선택해주세요");
      return;
    }
    setIsBulkDeleteDialogOpen(true);
  };

  const handleConfirmBulkDelete = async () => {
    try {
      // 선택된 항목들을 순차적으로 삭제
      const deletePromises = Array.from(selectedItems).map((id) => deleteClientApi(id));
      await Promise.all(deletePromises);
      toast.success(`${selectedItems.size}개의 거래처가 삭제되었습니다`);
      setSelectedItems(new Set());
      setIsBulkDeleteDialogOpen(false);
      refreshData();
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "삭제 중 오류가 발생했습니다";
      toast.error(errorMessage);
    }
  };

  // 상태 뱃지
  const getStatusBadge = (status: "활성" | "비활성") => {
    if (status === "활성") {
      return (
        <Badge variant="outline" className="bg-green-100 text-green-700 border-green-200">
          활성
        </Badge>
      );
    }
    return (
      <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-200">
        비활성
      </Badge>
    );
  };

  // 탭 구성 (전체 | 매입 | 매출 | 활성 | 비활성) - 전체 통계 기준으로 고정
  const tabs: TabOption[] = [
    {
      value: "all",
      label: "전체",
      count: totalStats.total,
      color: "blue",
    },
    {
      value: "purchase",
      label: "매입",
      count: totalStats.purchase,
      color: "orange",
    },
    {
      value: "sales",
      label: "매출",
      count: totalStats.sales,
      color: "rose",
    },
    {
      value: "active",
      label: "활성",
      count: totalStats.active,
      color: "green",
    },
    {
      value: "inactive",
      label: "비활성",
      count: totalStats.inactive,
      color: "gray",
    },
  ];

  // 거래처 유형 배지
  const getClientTypeBadge = (clientType: Client["clientType"]) => {
    switch (clientType) {
      case "매출":
        return (
          <Badge className="bg-red-500 text-white hover:bg-red-600">
            매출
          </Badge>
        );
      case "매입매출":
        return (
          <Badge className="bg-yellow-500 text-white hover:bg-yellow-600">
            매입매출
          </Badge>
        );
      case "매입":
      default:
        return (
          <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-200">
            매입
          </Badge>
        );
    }
  };

  // 테이블 컬럼 정의
  const tableColumns: TableColumn[] = [
    { key: "rowNumber", label: "번호", className: "px-4" },
    { key: "code", label: "코드", className: "px-4" },
    { key: "clientType", label: "구분", className: "px-4" },
    { key: "name", label: "거래처명", className: "px-4" },
    { key: "representative", label: "대표자", className: "px-4" },
    { key: "manager", label: "담당자", className: "px-4" },
    { key: "phone", label: "전화번호", className: "px-4" },
    { key: "actions", label: "작업", className: "px-4" },
  ];

  // 테이블 행 렌더링
  const renderTableRow = (
    customer: Client,
    index: number,
    globalIndex: number
  ) => {
    const itemId = customer.id;
    const isSelected = selectedItems.has(itemId);

    return (
      <TableRow
        key={customer.id}
        className={`cursor-pointer hover:bg-muted/50 ${isSelected ? "bg-blue-50" : ""}`}
        onClick={() => handleView(customer)}
      >
        <TableCell onClick={(e) => e.stopPropagation()} className="text-center">
          <Checkbox
            checked={isSelected}
            onCheckedChange={() => toggleSelection(itemId)}
          />
        </TableCell>
        <TableCell>{globalIndex}</TableCell>
        <TableCell>
          <code className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded font-mono">
            {customer.code}
          </code>
        </TableCell>
        <TableCell>{getClientTypeBadge(customer.clientType)}</TableCell>
        <TableCell className="font-medium">{customer.name}</TableCell>
        <TableCell>{customer.representative}</TableCell>
        <TableCell>{customer.managerName || "-"}</TableCell>
        <TableCell>{customer.phone}</TableCell>
        <TableCell onClick={(e) => e.stopPropagation()}>
          {isSelected && (
            <div className="flex gap-1">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleView(customer)}
              >
                <Eye className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleEdit(customer)}
              >
                <Edit className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleDelete(customer.id)}
              >
                <Trash2 className="h-4 w-4 text-red-500" />
              </Button>
            </div>
          )}
        </TableCell>
      </TableRow>
    );
  };

  // 모바일 카드 렌더링
  const renderMobileCard = (
    customer: Client,
    index: number,
    globalIndex: number,
    isSelected: boolean,
    onToggle: () => void
  ) => {
    return (
      <ListMobileCard
        key={customer.id}
        id={customer.id}
        isSelected={isSelected}
        onToggleSelection={onToggle}
        onCardClick={() => handleView(customer)}
        headerBadges={
          <>
            <Badge
              variant="outline"
              className="bg-gray-100 text-gray-700 font-mono text-xs"
            >
              #{globalIndex}
            </Badge>
            <code className="inline-block text-xs bg-gray-100 text-gray-700 px-2.5 py-0.5 rounded-md font-mono whitespace-nowrap">
              {customer.code}
            </code>
            {getClientTypeBadge(customer.clientType)}
          </>
        }
        title={customer.name}
        statusBadge={getStatusBadge(customer.status)}
        infoGrid={
          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
            <InfoField label="대표자" value={customer.representative} />
            <InfoField label="담당자" value={customer.managerName || "-"} />
            <InfoField label="전화번호" value={customer.phone} />
            <InfoField label="사업자번호" value={customer.businessNo} />
          </div>
        }
        actions={
          isSelected ? (
            <div className="flex gap-2 flex-wrap">
              <Button
                variant="default"
                size="default"
                className="flex-1 min-w-[100px] h-11"
                onClick={(e) => {
                  e.stopPropagation();
                  handleEdit(customer);
                }}
              >
                <Edit className="h-4 w-4 mr-2" />
                수정
              </Button>
              <Button
                variant="outline"
                size="default"
                className="flex-1 min-w-[100px] h-11 border-red-200 text-red-600 hover:border-red-300 bg-[rgba(255,255,255,0)]"
                onClick={(e) => {
                  e.stopPropagation();
                  handleDelete(customer.id);
                }}
              >
                <Trash2 className="h-4 w-4 mr-2" />
                삭제
              </Button>
            </div>
          ) : undefined
        }
      />
    );
  };

  // 초기 로딩 중일 때 전체 화면 스피너 표시
  if (!isInitialLoaded) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="flex flex-col items-center gap-4">
          <Loader2 className="h-10 w-10 animate-spin text-primary" />
          <p className="text-muted-foreground">거래처 목록을 불러오는 중...</p>
        </div>
      </div>
    );
  }

  return (
    <>
      <IntegratedListTemplateV2
        title="거래처 목록"
        description="거래처 정보 및 계정을 관리합니다"
        icon={Building2}
        headerActions={
          <Button className="ml-auto" onClick={handleAddNew}>
            <Plus className="w-4 h-4 mr-2" />
            거래처 등록
          </Button>
        }
        stats={stats}
        searchValue={searchTerm}
        onSearchChange={setSearchTerm}
        searchPlaceholder="거래처명, 코드, 대표자, 전화번호, 사업자번호 검색..."
        tabs={tabs}
        activeTab={filterType}
        onTabChange={(value) => {
          setFilterType(value);
          setCurrentPage(1);
        }}
        tableColumns={tableColumns}
        tableTitle={`${tabs.find((t) => t.value === filterType)?.label || "전체"} (${filteredClients.length}개)`}
        data={paginatedClients}
        totalCount={filteredClients.length}
        allData={mobileClients}
        mobileDisplayCount={mobileDisplayCount}
        infinityScrollSentinelRef={sentinelRef}
        selectedItems={selectedItems}
        onToggleSelection={toggleSelection}
        onToggleSelectAll={toggleSelectAll}
        onBulkDelete={handleBulkDelete}
        getItemId={(customer) => customer.id}
        renderTableRow={renderTableRow}
        renderMobileCard={renderMobileCard}
        pagination={{
          currentPage,
          totalPages,
          totalItems: pagination?.total || filteredClients.length,
          itemsPerPage,
          onPageChange: setCurrentPage,
        }}
      />

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>거래처 삭제 확인</AlertDialogTitle>
            <AlertDialogDescription>
              {deleteTargetId
                ? `거래처: ${clients.find((c) => c.id === deleteTargetId)?.name || deleteTargetId}`
                : ""}
              <br />
              이 거래처를 삭제하시겠습니까? 삭제된 데이터는 복구할 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirmDelete}>
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 일괄 삭제 확인 다이얼로그 */}
      <AlertDialog
        open={isBulkDeleteDialogOpen}
        onOpenChange={setIsBulkDeleteDialogOpen}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>일괄 삭제 확인</AlertDialogTitle>
            <AlertDialogDescription>
              선택한 {selectedItems.size}개의 거래처를 삭제하시겠습니까?
              <br />
              삭제된 데이터는 복구할 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirmBulkDelete}>
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}