'use client';

import { useState, useMemo, useCallback } from 'react';
import { format } from 'date-fns';
import {
  FileCheck,
  Check,
  X,
  Clock,
  FileX,
  Files,
  Edit,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import { TableRow, TableCell } from '@/components/ui/table';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import {
  IntegratedListTemplateV2,
  type TableColumn,
  type StatCard,
  type TabOption,
} from '@/components/templates/IntegratedListTemplateV2';
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
import { DocumentDetailModal } from '@/components/approval/DocumentDetail';
import type { DocumentType, ProposalDocumentData, ExpenseReportDocumentData, ExpenseEstimateDocumentData } from '@/components/approval/DocumentDetail/types';
import type {
  ApprovalTabType,
  ApprovalRecord,
  ApprovalStatus,
  ApprovalType,
  SortOption,
  FilterOption,
} from './types';
import {
  APPROVAL_TAB_LABELS,
  SORT_OPTIONS,
  FILTER_OPTIONS,
  APPROVAL_TYPE_LABELS,
  APPROVAL_STATUS_LABELS,
  APPROVAL_STATUS_COLORS,
} from './types';

// ===== Mock 데이터 생성 =====
const generateApprovalData = (): ApprovalRecord[] => {
  const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
  const positions = ['팀장', '파트장', '선임', '주임', '사원'];
  const approvalTypes: ApprovalType[] = ['expense_report', 'proposal', 'expense_estimate'];
  const statuses: ApprovalStatus[] = ['pending', 'approved', 'rejected'];
  const titlesByType: Record<ApprovalType, string[]> = {
    expense_report: ['12월 출장비 정산', '사무용품 구매비 청구', '고객 미팅 식대 정산', '세미나 참가비 정산'],
    proposal: ['신규 프로젝트 품의', '장비 구매 품의', '외주 용역 품의', '마케팅 예산 품의'],
    expense_estimate: ['2024년 하반기 예산', '신규 사업 예상 지출', '부서 운영비 예상', '행사 예산 내역'],
  };

  return Array.from({ length: 76 }, (_, i) => {
    const status = statuses[i % statuses.length];
    const approvalType = approvalTypes[i % approvalTypes.length];
    const titles = titlesByType[approvalType];
    const draftDate = new Date(2024, 8, Math.floor(Math.random() * 30) + 1);
    const approvalDate = status !== 'pending' ? new Date(draftDate.getTime() + Math.random() * 7 * 24 * 60 * 60 * 1000) : undefined;

    return {
      id: `approval-${i + 1}`,
      documentNo: `DOC-${String(i + 1).padStart(4, '0')}`,
      approvalType,
      documentStatus: status === 'pending' ? '진행중' : status === 'approved' ? '완료' : '반려',
      title: titles[i % titles.length],
      draftDate: format(draftDate, 'yyyy-MM-dd HH:mm'),
      drafter: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호'][i % 7],
      drafterDepartment: departments[i % departments.length],
      drafterPosition: positions[i % positions.length],
      approvalDate: approvalDate ? format(approvalDate, 'yyyy-MM-dd') : undefined,
      approver: status !== 'pending' ? ['김부장', '이차장', '박과장'][i % 3] : undefined,
      status,
      priority: i % 5 === 0 ? 'high' : 'normal',
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    };
  });
};

export function ApprovalBox() {
  // ===== 상태 관리 =====
  const [activeTab, setActiveTab] = useState<ApprovalTabType>('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [filterOption, setFilterOption] = useState<FilterOption>('all');
  const [sortOption, setSortOption] = useState<SortOption>('latest');
  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

  // 날짜 범위 상태
  const [startDate, setStartDate] = useState('2024-09-01');
  const [endDate, setEndDate] = useState('2024-09-03');

  // 다이얼로그 상태
  const [approveDialogOpen, setApproveDialogOpen] = useState(false);
  const [rejectDialogOpen, setRejectDialogOpen] = useState(false);

  // ===== 문서 상세 모달 상태 =====
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedDocument, setSelectedDocument] = useState<ApprovalRecord | null>(null);

  // Mock 데이터
  const [approvalData] = useState<ApprovalRecord[]>(generateApprovalData);

  // ===== 탭 변경 핸들러 =====
  const handleTabChange = useCallback((value: string) => {
    setActiveTab(value as ApprovalTabType);
    setSelectedItems(new Set());
    setSearchQuery('');
    setCurrentPage(1);
  }, []);

  // ===== 체크박스 핸들러 =====
  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 === filteredData.length && filteredData.length > 0) {
      setSelectedItems(new Set());
    } else {
      setSelectedItems(new Set(filteredData.map(item => item.id)));
    }
  }, [selectedItems.size]);

  // ===== 필터링된 데이터 =====
  const filteredData = useMemo(() => {
    let data = approvalData;

    // 탭 필터
    if (activeTab !== 'all') {
      data = data.filter(item => item.status === activeTab);
    }

    // 유형 필터
    if (filterOption !== 'all') {
      data = data.filter(item => item.approvalType === filterOption);
    }

    // 검색 필터
    if (searchQuery) {
      data = data.filter(item =>
        item.title.includes(searchQuery) ||
        item.drafter.includes(searchQuery) ||
        item.drafterDepartment.includes(searchQuery)
      );
    }

    // 정렬
    switch (sortOption) {
      case 'latest':
        data = [...data].sort((a, b) => new Date(b.draftDate).getTime() - new Date(a.draftDate).getTime());
        break;
      case 'oldest':
        data = [...data].sort((a, b) => new Date(a.draftDate).getTime() - new Date(b.draftDate).getTime());
        break;
      case 'draftDateAsc':
        data = [...data].sort((a, b) => new Date(a.draftDate).getTime() - new Date(b.draftDate).getTime());
        break;
      case 'draftDateDesc':
        data = [...data].sort((a, b) => new Date(b.draftDate).getTime() - new Date(a.draftDate).getTime());
        break;
    }

    return data;
  }, [approvalData, activeTab, filterOption, searchQuery, sortOption]);

  // 페이지네이션
  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 stats = useMemo(() => {
    const all = approvalData.length;
    const pending = approvalData.filter(item => item.status === 'pending').length;
    const approved = approvalData.filter(item => item.status === 'approved').length;
    const rejected = approvalData.filter(item => item.status === 'rejected').length;
    return { all, pending, approved, rejected };
  }, [approvalData]);

  // ===== 승인/반려 핸들러 =====
  const handleApproveClick = useCallback(() => {
    if (selectedItems.size === 0) return;
    setApproveDialogOpen(true);
  }, [selectedItems.size]);

  const handleApproveConfirm = useCallback(() => {
    console.log('승인:', Array.from(selectedItems));
    // TODO: API 호출
    setSelectedItems(new Set());
    setApproveDialogOpen(false);
  }, [selectedItems]);

  const handleRejectClick = useCallback(() => {
    if (selectedItems.size === 0) return;
    setRejectDialogOpen(true);
  }, [selectedItems.size]);

  const handleRejectConfirm = useCallback(() => {
    console.log('반려:', Array.from(selectedItems));
    // TODO: API 호출
    setSelectedItems(new Set());
    setRejectDialogOpen(false);
  }, [selectedItems]);

  // ===== 통계 카드 =====
  const statCards: StatCard[] = useMemo(() => [
    { label: '전체결재', value: `${stats.all}건`, icon: Files, iconColor: 'text-blue-500' },
    { label: '미결재', value: `${stats.pending}건`, icon: Clock, iconColor: 'text-yellow-500' },
    { label: '결재완료', value: `${stats.approved}건`, icon: FileCheck, iconColor: 'text-green-500' },
    { label: '결재반려', value: `${stats.rejected}건`, icon: FileX, iconColor: 'text-red-500' },
  ], [stats]);

  // ===== 탭 옵션 =====
  const tabs: TabOption[] = useMemo(() => [
    { value: 'all', label: APPROVAL_TAB_LABELS.all, count: stats.all, color: 'blue' },
    { value: 'pending', label: APPROVAL_TAB_LABELS.pending, count: stats.pending, color: 'yellow' },
    { value: 'approved', label: APPROVAL_TAB_LABELS.approved, count: stats.approved, color: 'green' },
    { value: 'rejected', label: APPROVAL_TAB_LABELS.rejected, count: stats.rejected, color: 'red' },
  ], [stats]);

  // ===== 테이블 컬럼 =====
  // 문서번호, 문서유형, 제목, 기안자, 결재자, 기안일시, 상태, 작업
  const tableColumns: TableColumn[] = useMemo(() => [
    { key: 'no', label: '번호', className: 'w-[60px] text-center' },
    { key: 'documentNo', label: '문서번호' },
    { key: 'approvalType', label: '문서유형' },
    { key: 'title', label: '제목' },
    { key: 'drafter', label: '기안자' },
    { key: 'approver', label: '결재자' },
    { key: 'draftDate', label: '기안일시' },
    { key: 'status', label: '상태', className: 'text-center' },
    { key: 'actions', label: '작업', className: 'w-[80px] text-center' },
  ], []);

  // ===== 문서 클릭/상세 보기 핸들러 =====
  const handleDocumentClick = useCallback((item: ApprovalRecord) => {
    setSelectedDocument(item);
    setIsModalOpen(true);
  }, []);

  const handleModalEdit = useCallback(() => {
    console.log('문서 수정:', selectedDocument?.id);
    setIsModalOpen(false);
  }, [selectedDocument]);

  const handleModalCopy = useCallback(() => {
    console.log('문서 복제:', selectedDocument?.id);
    setIsModalOpen(false);
  }, [selectedDocument]);

  const handleModalApprove = useCallback(() => {
    console.log('문서 승인:', selectedDocument?.id);
    setIsModalOpen(false);
  }, [selectedDocument]);

  const handleModalReject = useCallback(() => {
    console.log('문서 반려:', selectedDocument?.id);
    setIsModalOpen(false);
  }, [selectedDocument]);

  // ===== ApprovalType → DocumentType 변환 =====
  const getDocumentType = (approvalType: ApprovalType): DocumentType => {
    switch (approvalType) {
      case 'expense_estimate': return 'expenseEstimate';
      case 'expense_report': return 'expenseReport';
      default: return 'proposal';
    }
  };

  // ===== ApprovalRecord → 모달용 데이터 변환 =====
  const convertToModalData = (item: ApprovalRecord): ProposalDocumentData | ExpenseReportDocumentData | ExpenseEstimateDocumentData => {
    const docType = getDocumentType(item.approvalType);
    const drafter = {
      id: 'drafter-1',
      name: item.drafter,
      position: item.drafterPosition,
      department: item.drafterDepartment,
      status: 'approved' as const,
    };
    const approvers = [{
      id: 'approver-1',
      name: item.approver || '미지정',
      position: '부장',
      department: '경영지원팀',
      status: item.status === 'approved' ? 'approved' as const : item.status === 'rejected' ? 'rejected' as const : 'pending' as const,
    }];

    switch (docType) {
      case 'expenseEstimate':
        return {
          documentNo: item.documentNo,
          createdAt: item.draftDate,
          items: [
            { id: '1', expectedPaymentDate: '2025-11-05', category: '통신 서비스', amount: 550000, vendor: 'KT', account: '국민 123-456-789012 홍길동' },
            { id: '2', expectedPaymentDate: '2025-11-12', category: '인건 대행', amount: 2500000, vendor: '에이치알코리아', account: '신한 110-123-456789 (주)에이치알' },
            { id: '3', expectedPaymentDate: '2025-11-15', category: '사무용품', amount: 350000, vendor: '오피스디포', account: '우리 1002-123-456789 오피스디포' },
            { id: '4', expectedPaymentDate: '2025-11-20', category: '임대료', amount: 3000000, vendor: '강남빌딩', account: '하나 123-12-12345 강남빌딩관리' },
            { id: '5', expectedPaymentDate: '2025-12-05', category: '통신 서비스', amount: 550000, vendor: 'KT', account: '국민 123-456-789012 홍길동' },
            { id: '6', expectedPaymentDate: '2025-12-10', category: '소프트웨어 구독', amount: 890000, vendor: 'Microsoft', account: '기업 123-456-78901234 MS코리아' },
            { id: '7', expectedPaymentDate: '2025-12-15', category: '인건 대행', amount: 2500000, vendor: '에이치알코리아', account: '신한 110-123-456789 (주)에이치알' },
            { id: '8', expectedPaymentDate: '2025-12-20', category: '임대료', amount: 3000000, vendor: '강남빌딩', account: '하나 123-12-12345 강남빌딩관리' },
          ],
          totalExpense: 13340000,
          accountBalance: 25000000,
          finalDifference: 11660000,
          approvers,
          drafter,
        };
      case 'expenseReport':
        return {
          documentNo: item.documentNo,
          createdAt: item.draftDate,
          requestDate: item.draftDate,
          paymentDate: item.draftDate,
          items: [
            { id: '1', no: 1, description: '업무용 택시비', amount: 50000, note: '고객사 미팅' },
            { id: '2', no: 2, description: '식대', amount: 30000, note: '팀 회식' },
          ],
          cardInfo: '삼성카드 **** 1234',
          totalAmount: 80000,
          attachments: [],
          approvers,
          drafter,
        };
      default:
        return {
          documentNo: item.documentNo,
          createdAt: item.draftDate,
          vendor: '거래처',
          vendorPaymentDate: item.draftDate,
          title: item.title,
          description: item.title,
          reason: '업무상 필요',
          estimatedCost: 1000000,
          attachments: [],
          approvers,
          drafter,
        };
    }
  };

  // ===== 테이블 행 렌더링 =====
  // 컬럼 순서: 번호, 문서번호, 문서유형, 제목, 기안자, 결재자, 기안일시, 상태, 작업
  const renderTableRow = useCallback((item: ApprovalRecord, index: number, globalIndex: number) => {
    const isSelected = selectedItems.has(item.id);

    return (
      <TableRow
        key={item.id}
        className="hover:bg-muted/50 cursor-pointer"
        onClick={() => handleDocumentClick(item)}
      >
        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
          <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(item.id)} />
        </TableCell>
        <TableCell className="text-center">{globalIndex}</TableCell>
        <TableCell className="font-mono text-sm">{item.documentNo}</TableCell>
        <TableCell>
          <Badge variant="outline">{APPROVAL_TYPE_LABELS[item.approvalType]}</Badge>
        </TableCell>
        <TableCell className="font-medium max-w-[200px] truncate">{item.title}</TableCell>
        <TableCell>{item.drafter}</TableCell>
        <TableCell>{item.approver || '-'}</TableCell>
        <TableCell>{item.draftDate}</TableCell>
        <TableCell className="text-center">
          <Badge className={APPROVAL_STATUS_COLORS[item.status]}>
            {APPROVAL_STATUS_LABELS[item.status]}
          </Badge>
        </TableCell>
        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
          {isSelected && (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => handleDocumentClick(item)}
            >
              <Edit className="h-4 w-4" />
            </Button>
          )}
        </TableCell>
      </TableRow>
    );
  }, [selectedItems, toggleSelection, handleDocumentClick]);

  // ===== 모바일 카드 렌더링 =====
  const renderMobileCard = useCallback((
    item: ApprovalRecord,
    index: number,
    globalIndex: number,
    isSelected: boolean,
    onToggle: () => void
  ) => {
    return (
      <ListMobileCard
        id={item.id}
        title={item.title}
        headerBadges={
          <div className="flex gap-1">
            <Badge variant="outline">{APPROVAL_TYPE_LABELS[item.approvalType]}</Badge>
            <Badge className={APPROVAL_STATUS_COLORS[item.status]}>
              {APPROVAL_STATUS_LABELS[item.status]}
            </Badge>
          </div>
        }
        isSelected={isSelected}
        onToggleSelection={onToggle}
        infoGrid={
          <div className="grid grid-cols-2 gap-3">
            <InfoField label="문서번호" value={item.documentNo} />
            <InfoField label="기안자" value={item.drafter} />
            <InfoField label="부서" value={item.drafterDepartment} />
            <InfoField label="직급" value={item.drafterPosition} />
            <InfoField label="기안일" value={item.draftDate} />
            <InfoField label="결재일" value={item.approvalDate || '-'} />
          </div>
        }
        actions={
          item.status === 'pending' && (
            <div className="flex gap-2">
              <Button variant="default" className="flex-1" onClick={handleApproveClick}>
                <Check className="w-4 h-4 mr-2" /> 승인
              </Button>
              <Button variant="outline" className="flex-1" onClick={handleRejectClick}>
                <X className="w-4 h-4 mr-2" /> 반려
              </Button>
            </div>
          )
        }
      />
    );
  }, [handleApproveClick, handleRejectClick]);

  // ===== 헤더 액션 (DateRangeSelector + 승인/반려 버튼) =====
  const headerActions = (
    <>
      <DateRangeSelector
        startDate={startDate}
        endDate={endDate}
        onStartDateChange={setStartDate}
        onEndDateChange={setEndDate}
      />
      {selectedItems.size > 0 && (
        <div className="ml-auto flex gap-2">
          <Button variant="default" onClick={handleApproveClick}>
            <Check className="h-4 w-4 mr-2" />
            승인
          </Button>
          <Button variant="destructive" onClick={handleRejectClick}>
            <X className="h-4 w-4 mr-2" />
            반려
          </Button>
        </div>
      )}
    </>
  );

  // ===== 테이블 헤더 액션 (필터 + 정렬 셀렉트) =====
  const tableHeaderActions = (
    <div className="flex items-center gap-2">
      {/* 필터 셀렉트박스 */}
      <Select value={filterOption} onValueChange={(value) => setFilterOption(value as FilterOption)}>
        <SelectTrigger className="w-[140px]">
          <SelectValue placeholder="필터 선택" />
        </SelectTrigger>
        <SelectContent>
          {FILTER_OPTIONS.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      {/* 정렬 셀렉트박스 */}
      <Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
        <SelectTrigger className="w-[140px]">
          <SelectValue placeholder="정렬 선택" />
        </SelectTrigger>
        <SelectContent>
          {SORT_OPTIONS.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );

  return (
    <>
      <IntegratedListTemplateV2
        title="결재함"
        description="결재 문서를 관리합니다"
        icon={FileCheck}
        headerActions={headerActions}
        stats={statCards}
        searchValue={searchQuery}
        onSearchChange={setSearchQuery}
        searchPlaceholder="제목, 기안자, 부서 검색..."
        tableHeaderActions={tableHeaderActions}
        tabs={tabs}
        activeTab={activeTab}
        onTabChange={handleTabChange}
        tableColumns={tableColumns}
        data={paginatedData}
        totalCount={filteredData.length}
        allData={filteredData}
        selectedItems={selectedItems}
        onToggleSelection={toggleSelection}
        onToggleSelectAll={toggleSelectAll}
        getItemId={(item: ApprovalRecord) => item.id}
        renderTableRow={renderTableRow}
        renderMobileCard={renderMobileCard}
        pagination={{
          currentPage,
          totalPages,
          totalItems: filteredData.length,
          itemsPerPage,
          onPageChange: setCurrentPage,
        }}
      />

      {/* 승인 확인 다이얼로그 */}
      <AlertDialog open={approveDialogOpen} onOpenChange={setApproveDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>결재 승인</AlertDialogTitle>
            <AlertDialogDescription>
              정말 {selectedItems.size}건을 승인하시겠습니까?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction onClick={handleApproveConfirm}>
              승인
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 반려 확인 다이얼로그 */}
      <AlertDialog open={rejectDialogOpen} onOpenChange={setRejectDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>결재 반려</AlertDialogTitle>
            <AlertDialogDescription>
              정말 {selectedItems.size}건을 반려하시겠습니까?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleRejectConfirm}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              반려
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 문서 상세 모달 */}
      {selectedDocument && (
        <DocumentDetailModal
          open={isModalOpen}
          onOpenChange={setIsModalOpen}
          documentType={getDocumentType(selectedDocument.approvalType)}
          data={convertToModalData(selectedDocument)}
          onEdit={handleModalEdit}
          onCopy={handleModalCopy}
          onApprove={handleModalApprove}
          onReject={handleModalReject}
        />
      )}
    </>
  );
}