'use client';

import { useState, useMemo, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import {
  Landmark,
  Pencil,
  Trash2,
  Plus,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { TableRow, TableCell } from '@/components/ui/table';
import {
  IntegratedListTemplateV2,
  type TableColumn,
} from '@/components/templates/IntegratedListTemplateV2';
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
import type { Account } from './types';
import {
  BANK_LABELS,
  ACCOUNT_STATUS_LABELS,
  ACCOUNT_STATUS_COLORS,
} from './types';

// ===== 계좌번호 마스킹 함수 =====
const maskAccountNumber = (accountNumber: string): string => {
  if (accountNumber.length <= 8) return accountNumber;
  const parts = accountNumber.split('-');
  if (parts.length >= 3) {
    // 1234-****-****-1234 형태
    return parts.map((part, idx) => {
      if (idx === 0 || idx === parts.length - 1) return part;
      return '****';
    }).join('-');
  }
  // 단순 형태: 앞 4자리-****-뒤 4자리
  const first = accountNumber.slice(0, 4);
  const last = accountNumber.slice(-4);
  return `${first}-****-****-${last}`;
};

// ===== Mock 데이터 생성 =====
const generateMockData = (): Account[] => {
  const banks = ['shinhan', 'kb', 'woori', 'hana', 'nh', 'ibk'];
  const statuses: ('active' | 'inactive')[] = ['active', 'inactive'];

  return Array.from({ length: 10 }, (_, i) => ({
    id: `account-${i + 1}`,
    bankCode: banks[i % banks.length],
    accountNumber: `1234-1234-1234-${String(1234 + i).padStart(4, '0')}`,
    accountName: `운영계좌 ${i + 1}`,
    accountHolder: `예금주${i + 1}`,
    accountPassword: '****',
    status: statuses[i % 2],
    createdAt: '2025-12-19T00:00:00.000Z',
    updatedAt: '2025-12-19T00:00:00.000Z',
  }));
};

export function AccountManagement() {
  const router = useRouter();

  // ===== 상태 관리 =====
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

  // 삭제 다이얼로그
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
  const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);

  // Mock 데이터
  const [data, setData] = useState<Account[]>(generateMockData);

  // ===== 체크박스 핸들러 =====
  const toggleSelection = useCallback((id: string) => {
    setSelectedItems(prev => {
      const newSet = new Set(prev);
      if (newSet.has(id)) newSet.delete(id);
      else newSet.add(id);
      return newSet;
    });
  }, []);

  // ===== 필터링된 데이터 =====
  const filteredData = useMemo(() => {
    if (!searchQuery) return data;

    const search = searchQuery.toLowerCase();
    return data.filter(item =>
      item.accountName.toLowerCase().includes(search) ||
      item.accountNumber.includes(search) ||
      item.accountHolder.toLowerCase().includes(search) ||
      BANK_LABELS[item.bankCode]?.toLowerCase().includes(search)
    );
  }, [data, searchQuery]);

  const paginatedData = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    return filteredData.slice(startIndex, startIndex + itemsPerPage);
  }, [filteredData, currentPage, itemsPerPage]);

  const totalPages = Math.ceil(filteredData.length / itemsPerPage);

  // ===== 전체 선택 핸들러 =====
  const toggleSelectAll = useCallback(() => {
    if (selectedItems.size === filteredData.length && filteredData.length > 0) {
      setSelectedItems(new Set());
    } else {
      setSelectedItems(new Set(filteredData.map(item => item.id)));
    }
  }, [selectedItems.size, filteredData]);

  // ===== 액션 핸들러 =====
  const handleRowClick = useCallback((item: Account) => {
    router.push(`/ko/settings/accounts/${item.id}`);
  }, [router]);

  const handleEdit = useCallback((item: Account) => {
    router.push(`/ko/settings/accounts/${item.id}?mode=edit`);
  }, [router]);

  const handleDeleteClick = useCallback((id: string) => {
    setDeleteTargetId(id);
    setShowDeleteDialog(true);
  }, []);

  const handleConfirmDelete = useCallback(() => {
    if (deleteTargetId) {
      setData(prev => prev.filter(item => item.id !== deleteTargetId));
      setSelectedItems(prev => {
        const newSet = new Set(prev);
        newSet.delete(deleteTargetId);
        return newSet;
      });
    }
    setShowDeleteDialog(false);
    setDeleteTargetId(null);
  }, [deleteTargetId]);

  const handleBulkDelete = useCallback(() => {
    if (selectedItems.size > 0) {
      setShowBulkDeleteDialog(true);
    }
  }, [selectedItems.size]);

  const handleConfirmBulkDelete = useCallback(() => {
    setData(prev => prev.filter(item => !selectedItems.has(item.id)));
    setSelectedItems(new Set());
    setShowBulkDeleteDialog(false);
  }, [selectedItems]);

  const handleCreate = useCallback(() => {
    router.push('/ko/settings/accounts/new');
  }, [router]);

  // ===== 테이블 컬럼 =====
  const tableColumns: TableColumn[] = useMemo(() => [
    { key: 'no', label: '번호', className: 'text-center w-[60px]' },
    { key: 'bank', label: '은행', className: 'min-w-[100px]' },
    { key: 'accountNumber', label: '계좌번호', className: 'min-w-[160px]' },
    { key: 'accountName', label: '계좌명', className: 'min-w-[120px]' },
    { key: 'accountHolder', label: '예금주', className: 'min-w-[80px]' },
    { key: 'status', label: '상태', className: 'min-w-[80px]' },
    { key: 'actions', label: '작업', className: 'w-[100px] text-right' },
  ], []);

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

    return (
      <TableRow
        key={item.id}
        className="hover:bg-muted/50 cursor-pointer"
        onClick={() => handleRowClick(item)}
      >
        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
          <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(item.id)} />
        </TableCell>
        <TableCell className="text-muted-foreground text-center">{globalIndex}</TableCell>
        <TableCell>{BANK_LABELS[item.bankCode] || item.bankCode}</TableCell>
        <TableCell className="font-mono">{maskAccountNumber(item.accountNumber)}</TableCell>
        <TableCell>{item.accountName}</TableCell>
        <TableCell>{item.accountHolder}</TableCell>
        <TableCell>
          <Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
            {ACCOUNT_STATUS_LABELS[item.status]}
          </Badge>
        </TableCell>
        <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
          {isSelected && (
            <div className="flex items-center justify-end gap-1">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleEdit(item)}
                title="수정"
              >
                <Pencil className="w-4 h-4" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handleDeleteClick(item.id)}
                title="삭제"
              >
                <Trash2 className="w-4 h-4 text-red-500" />
              </Button>
            </div>
          )}
        </TableCell>
      </TableRow>
    );
  }, [selectedItems, toggleSelection, handleRowClick, handleEdit, handleDeleteClick]);

  // ===== 모바일 카드 렌더링 =====
  const renderMobileCard = useCallback((
    item: Account,
    index: number,
    globalIndex: number,
    isSelected: boolean,
    onToggle: () => void
  ) => {
    return (
      <ListMobileCard
        id={item.id}
        title={item.accountName}
        headerBadges={
          <div className="flex items-center gap-2 flex-wrap">
            <Badge variant="outline" className="text-xs">
              #{globalIndex}
            </Badge>
            <span className="text-xs text-muted-foreground">
              {BANK_LABELS[item.bankCode] || item.bankCode}
            </span>
          </div>
        }
        statusBadge={
          <Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
            {ACCOUNT_STATUS_LABELS[item.status]}
          </Badge>
        }
        isSelected={isSelected}
        onToggleSelection={onToggle}
        onCardClick={() => handleRowClick(item)}
        infoGrid={
          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
            <InfoField label="계좌번호" value={maskAccountNumber(item.accountNumber)} />
            <InfoField label="예금주" value={item.accountHolder} />
          </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(item); }}
              >
                <Pencil 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-transparent"
                onClick={(e) => { e.stopPropagation(); handleDeleteClick(item.id); }}
              >
                <Trash2 className="h-4 w-4 mr-2" />
                삭제
              </Button>
            </div>
          ) : undefined
        }
      />
    );
  }, [handleRowClick, handleEdit, handleDeleteClick]);

  // ===== 헤더 액션 (카드관리와 동일한 패턴) =====
  const headerActions = (
    <Button className="ml-auto" onClick={handleCreate}>
      <Plus className="w-4 h-4 mr-2" />
      계좌 등록
    </Button>
  );

  return (
    <>
      <IntegratedListTemplateV2
        title="계좌관리"
        description="계좌 목록을 관리합니다"
        icon={Landmark}
        headerActions={headerActions}
        searchValue={searchQuery}
        onSearchChange={setSearchQuery}
        searchPlaceholder="은행명, 계좌번호, 계좌명, 예금주 검색..."
        tableColumns={tableColumns}
        data={paginatedData}
        totalCount={filteredData.length}
        allData={filteredData}
        selectedItems={selectedItems}
        onToggleSelection={toggleSelection}
        onToggleSelectAll={toggleSelectAll}
        getItemId={(item: Account) => item.id}
        renderTableRow={renderTableRow}
        renderMobileCard={renderMobileCard}
        pagination={{
          currentPage,
          totalPages,
          totalItems: filteredData.length,
          itemsPerPage,
          onPageChange: setCurrentPage,
        }}
      />

      {/* 단일 삭제 확인 다이얼로그 */}
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>계좌 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              계좌를 정말 삭제하시겠습니까?
              <br />
              <span className="text-muted-foreground text-sm">
                삭제된 계좌의 과거 사용 내역은 보존됩니다.
              </span>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleConfirmDelete}
              className="bg-red-600 hover:bg-red-700"
            >
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 다중 삭제 확인 다이얼로그 */}
      <AlertDialog open={showBulkDeleteDialog} onOpenChange={setShowBulkDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>계좌 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              선택하신 {selectedItems.size}개의 계좌를 정말 삭제하시겠습니까?
              <br />
              <span className="text-muted-foreground text-sm">
                삭제된 계좌의 과거 사용 내역은 보존됩니다.
              </span>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleConfirmBulkDelete}
              className="bg-red-600 hover:bg-red-700"
            >
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}
