'use client';

import { useState, useMemo, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { ClipboardList, Edit, Trash2, Plus } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { TableRow, TableCell } from '@/components/ui/table';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import {
  IntegratedListTemplateV2,
  type TabOption,
  type TableColumn,
} from '@/components/templates/IntegratedListTemplateV2';
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
import type { Board, BoardStatus } from './types';
import {
  BOARD_STATUS_LABELS,
  BOARD_STATUS_COLORS,
  BOARD_TARGET_LABELS,
} from './types';

// 날짜 포맷
const formatDate = (dateString: string): string => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// Mock 데이터
const mockBoards: Board[] = [
  {
    id: '1',
    target: 'all',
    boardName: '게시판명',
    status: 'active',
    authorId: 'u1',
    authorName: '홍길동',
    createdAt: '2025-09-03T00:00:00Z',
    updatedAt: '2025-09-03T00:00:00Z',
  },
  {
    id: '2',
    target: 'all',
    boardName: '게시판명',
    status: 'active',
    authorId: 'u1',
    authorName: '홍길동',
    createdAt: '2025-09-03T00:00:00Z',
    updatedAt: '2025-09-03T00:00:00Z',
  },
  {
    id: '3',
    target: 'department',
    targetName: '부서명',
    boardName: '게시판명',
    status: 'active',
    authorId: 'u1',
    authorName: '홍길동',
    createdAt: '2025-09-03T00:00:00Z',
    updatedAt: '2025-09-03T00:00:00Z',
  },
  {
    id: '4',
    target: 'all',
    boardName: '게시판명',
    status: 'active',
    authorId: 'u1',
    authorName: '홍길동',
    createdAt: '2025-09-03T00:00:00Z',
    updatedAt: '2025-09-03T00:00:00Z',
  },
  {
    id: '5',
    target: 'department',
    targetName: '팀명',
    boardName: '게시판명',
    status: 'inactive',
    authorId: 'u1',
    authorName: '홍길동',
    createdAt: '2025-09-03T00:00:00Z',
    updatedAt: '2025-09-03T00:00:00Z',
  },
  {
    id: '6',
    target: 'all',
    boardName: '게시판명',
    status: 'active',
    authorId: 'u1',
    authorName: '홍길동',
    createdAt: '2025-09-03T00:00:00Z',
    updatedAt: '2025-09-03T00:00:00Z',
  },
  {
    id: '7',
    target: 'all',
    boardName: '게시판명',
    status: 'active',
    authorId: 'u1',
    authorName: '홍길동',
    createdAt: '2025-09-03T00:00:00Z',
    updatedAt: '2025-09-03T00:00:00Z',
  },
];

// 추가 Mock 데이터 생성
const generateMockBoards = (): Board[] => {
  const boards: Board[] = [...mockBoards];
  const targets: Array<'all' | 'department'> = ['all', 'department'];
  const departmentNames = ['영업부', '개발부', '인사부', '경영지원부'];
  const authorNames = ['홍길동', '김철수', '이영희', '박지훈'];

  for (let i = 8; i <= 20; i++) {
    const target = targets[i % targets.length];
    const status: BoardStatus = i % 5 === 0 ? 'inactive' : 'active';
    boards.push({
      id: String(i),
      target,
      targetName: target === 'department' ? departmentNames[i % departmentNames.length] : undefined,
      boardName: `게시판${i}`,
      status,
      authorId: `u${(i % 4) + 1}`,
      authorName: authorNames[i % authorNames.length],
      createdAt: '2025-09-03T00:00:00Z',
      updatedAt: '2025-09-03T00:00:00Z',
    });
  }
  return boards;
};

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

  // 게시판 데이터 상태
  const [boards, setBoards] = useState<Board[]>(generateMockBoards);

  // 검색 및 필터 상태
  const [searchValue, setSearchValue] = useState('');
  const [activeTab, setActiveTab] = useState<string>('all');
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

  // 다이얼로그 상태
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [boardToDelete, setBoardToDelete] = useState<Board | null>(null);
  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());

  // 필터링된 데이터
  const filteredBoards = useMemo(() => {
    let filtered = boards;

    // 탭 필터 (상태)
    if (activeTab !== 'all') {
      filtered = filtered.filter(b => b.status === activeTab);
    }

    // 검색 필터
    if (searchValue) {
      const search = searchValue.toLowerCase();
      filtered = filtered.filter(b =>
        b.boardName.toLowerCase().includes(search) ||
        b.authorName.toLowerCase().includes(search) ||
        (b.targetName && b.targetName.toLowerCase().includes(search)) ||
        BOARD_TARGET_LABELS[b.target].toLowerCase().includes(search)
      );
    }

    return filtered;
  }, [boards, activeTab, searchValue]);

  // 페이지네이션된 데이터
  const paginatedData = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    return filteredBoards.slice(startIndex, startIndex + itemsPerPage);
  }, [filteredBoards, currentPage, itemsPerPage]);

  // 통계 계산
  const stats = useMemo(() => {
    const activeCount = boards.filter(b => b.status === 'active').length;
    const inactiveCount = boards.filter(b => b.status === 'inactive').length;
    return { activeCount, inactiveCount };
  }, [boards]);

  // 탭 옵션
  const tabs: TabOption[] = useMemo(() => [
    { value: 'all', label: '전체', count: boards.length, color: 'gray' },
    { value: 'active', label: '사용', count: stats.activeCount, color: 'green' },
    { value: 'inactive', label: '미사용', count: stats.inactiveCount, color: 'red' },
  ], [boards.length, stats]);

  // 테이블 컬럼 정의
  const tableColumns: TableColumn[] = useMemo(() => [
    { key: 'rowNumber', label: 'No.', className: 'w-[60px] text-center' },
    { key: 'target', label: '대상', className: 'min-w-[100px]' },
    { key: 'boardName', label: '게시판명', className: 'min-w-[150px]' },
    { key: 'status', label: '상태', className: 'min-w-[80px]' },
    { key: 'authorName', label: '작성자', className: 'min-w-[100px]' },
    { key: 'createdAt', label: '등록일시', className: 'min-w-[120px]' },
    { key: 'actions', label: '작업', className: 'w-[100px] text-right' },
  ], []);

  // 체크박스 토글
  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 toggleSelectAll = useCallback(() => {
    if (selectedItems.size === paginatedData.length && paginatedData.length > 0) {
      setSelectedItems(new Set());
    } else {
      const allIds = new Set(paginatedData.map((item) => item.id));
      setSelectedItems(allIds);
    }
  }, [selectedItems.size, paginatedData]);

  // 일괄 삭제 핸들러
  const handleBulkDelete = useCallback(() => {
    const ids = Array.from(selectedItems);
    setBoards(prev => prev.filter(board => !ids.includes(board.id)));
    setSelectedItems(new Set());
  }, [selectedItems]);

  // 핸들러
  const handleAddBoard = useCallback(() => {
    router.push('/ko/board/board-management/new');
  }, [router]);

  const handleDeleteBoard = useCallback(() => {
    if (boardToDelete) {
      setBoards(prev => prev.filter(board => board.id !== boardToDelete.id));
      setDeleteDialogOpen(false);
      setBoardToDelete(null);
    }
  }, [boardToDelete]);

  const handleRowClick = useCallback((row: Board) => {
    router.push(`/ko/board/board-management/${row.id}`);
  }, [router]);

  const handleEdit = useCallback((id: string) => {
    router.push(`/ko/board/board-management/${id}/edit`);
  }, [router]);

  const openDeleteDialog = useCallback((board: Board) => {
    setBoardToDelete(board);
    setDeleteDialogOpen(true);
  }, []);

  // 대상 표시 텍스트
  const getTargetDisplay = (board: Board) => {
    if (board.target === 'all') {
      return BOARD_TARGET_LABELS.all;
    }
    return board.targetName || BOARD_TARGET_LABELS.department;
  };

  // 테이블 행 렌더링
  const renderTableRow = useCallback((item: Board, 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>{getTargetDisplay(item)}</TableCell>
        <TableCell>{item.boardName}</TableCell>
        <TableCell>
          <Badge className={BOARD_STATUS_COLORS[item.status]}>
            {BOARD_STATUS_LABELS[item.status]}
          </Badge>
        </TableCell>
        <TableCell>{item.authorName}</TableCell>
        <TableCell>{formatDate(item.createdAt)}</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.id)}
                title="수정"
              >
                <Edit className="w-4 h-4" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => openDeleteDialog(item)}
                title="삭제"
              >
                <Trash2 className="w-4 h-4 text-red-500" />
              </Button>
            </div>
          )}
        </TableCell>
      </TableRow>
    );
  }, [selectedItems, toggleSelection, handleRowClick, handleEdit, openDeleteDialog]);

  // 모바일 카드 렌더링
  const renderMobileCard = useCallback((
    item: Board,
    index: number,
    globalIndex: number,
    isSelected: boolean,
    onToggle: () => void
  ) => {
    return (
      <ListMobileCard
        id={item.id}
        title={item.boardName}
        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">
              {getTargetDisplay(item)}
            </span>
          </div>
        }
        statusBadge={
          <Badge className={BOARD_STATUS_COLORS[item.status]}>
            {BOARD_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={getTargetDisplay(item)} />
            <InfoField label="작성자" value={item.authorName} />
            <InfoField label="등록일시" value={formatDate(item.createdAt)} />
          </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.id); }}
              >
                <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-transparent"
                onClick={(e) => { e.stopPropagation(); openDeleteDialog(item); }}
              >
                <Trash2 className="h-4 w-4 mr-2" />
                삭제
              </Button>
            </div>
          ) : undefined
        }
      />
    );
  }, [handleRowClick, handleEdit, openDeleteDialog]);

  // 헤더 액션
  const headerActions = (
    <Button className="ml-auto" onClick={handleAddBoard}>
      <Plus className="w-4 h-4 mr-2" />
      게시판 등록
    </Button>
  );

  // 페이지네이션 설정
  const totalPages = Math.ceil(filteredBoards.length / itemsPerPage);

  return (
    <>
      <IntegratedListTemplateV2<Board>
        title="게시판관리"
        description="게시판 목록을 관리합니다"
        icon={ClipboardList}
        headerActions={headerActions}
        searchValue={searchValue}
        onSearchChange={setSearchValue}
        searchPlaceholder="게시판명, 작성자, 대상 검색..."
        tabs={tabs}
        activeTab={activeTab}
        onTabChange={setActiveTab}
        tableColumns={tableColumns}
        data={paginatedData}
        totalCount={filteredBoards.length}
        allData={filteredBoards}
        selectedItems={selectedItems}
        onToggleSelection={toggleSelection}
        onToggleSelectAll={toggleSelectAll}
        onBulkDelete={handleBulkDelete}
        getItemId={(item) => item.id}
        renderTableRow={renderTableRow}
        renderMobileCard={renderMobileCard}
        pagination={{
          currentPage,
          totalPages,
          totalItems: filteredBoards.length,
          itemsPerPage,
          onPageChange: setCurrentPage,
        }}
      />

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>게시판 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              &quot;{boardToDelete?.boardName}&quot; 게시판을 삭제하시겠습니까?
              <br />
              <span className="text-destructive">
                삭제된 게시판 정보는 복구할 수 없습니다.
              </span>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeleteBoard}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}