sam-react-prod/src/components/settings/PaymentHistoryManagement/index.tsx

'use client';

import { useState, useMemo, useCallback } from 'react';
import { format, subMonths } from 'date-fns';
import { Receipt, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { TableRow, TableCell } from '@/components/ui/table';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog';
import {
  IntegratedListTemplateV2,
  type TableColumn,
} from '@/components/templates/IntegratedListTemplateV2';
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
import type { PaymentHistory, SortOption } from './types';
import { SORT_OPTIONS } from './types';

// ===== Mock 데이터 생성 =====
const generateMockData = (): PaymentHistory[] => {
  const baseDate = new Date('2025-12-01');

  return Array.from({ length: 7 }, (_, i) => {
    const paymentDate = subMonths(baseDate, i);
    const periodStart = paymentDate;
    const periodEnd = subMonths(paymentDate, -1);
    // periodEnd에서 하루 전으로 설정 (예: 12-01 ~ 12-31)
    periodEnd.setDate(periodEnd.getDate() - 1);

    return {
      id: `payment-${i + 1}`,
      paymentDate: format(paymentDate, 'yyyy-MM-dd'),
      subscriptionName: '프리미엄',
      paymentMethod: '국민은행 1234',
      subscriptionPeriod: {
        start: format(periodStart, 'yyyy-MM-dd'),
        end: format(periodEnd, 'yyyy-MM-dd'),
      },
      amount: 500000,
      canViewInvoice: true,
      createdAt: baseDate.toISOString(),
      updatedAt: baseDate.toISOString(),
    };
  });
};

export function PaymentHistoryManagement() {
  // ===== 상태 관리 =====
  const [searchQuery, setSearchQuery] = useState('');
  const [sortOption, setSortOption] = useState<SortOption>('latest');
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

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

  // 거래명세서 팝업 상태
  const [showInvoiceDialog, setShowInvoiceDialog] = useState(false);

  // ===== 필터링된 데이터 =====
  const filteredData = useMemo(() => {
    let result = data.filter(item =>
      item.subscriptionName.includes(searchQuery) ||
      item.paymentMethod.includes(searchQuery) ||
      item.paymentDate.includes(searchQuery)
    );

    // 정렬
    switch (sortOption) {
      case 'latest':
        result.sort((a, b) => new Date(b.paymentDate).getTime() - new Date(a.paymentDate).getTime());
        break;
      case 'oldest':
        result.sort((a, b) => new Date(a.paymentDate).getTime() - new Date(b.paymentDate).getTime());
        break;
      case 'amountHigh':
        result.sort((a, b) => b.amount - a.amount);
        break;
      case 'amountLow':
        result.sort((a, b) => a.amount - b.amount);
        break;
    }

    return result;
  }, [data, 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 handleViewInvoice = useCallback(() => {
    setShowInvoiceDialog(true);
  }, []);

  // ===== 테이블 컬럼 =====
  const tableColumns: TableColumn[] = useMemo(() => [
    { key: 'paymentDate', label: '결제일' },
    { key: 'subscriptionName', label: '구독명' },
    { key: 'paymentMethod', label: '결제 수단' },
    { key: 'subscriptionPeriod', label: '구독 기간' },
    { key: 'amount', label: '금액', className: 'text-right' },
    { key: 'invoice', label: '거래명세서', className: 'text-center' },
  ], []);

  // ===== 테이블 행 렌더링 =====
  const renderTableRow = useCallback((item: PaymentHistory, index: number) => {
    const isLatest = index === 0; // 최신 항목 (초록색 버튼)

    return (
      <TableRow
        key={item.id}
        className="hover:bg-muted/50"
      >
        {/* 결제일 */}
        <TableCell>{item.paymentDate}</TableCell>
        {/* 구독명 */}
        <TableCell>{item.subscriptionName}</TableCell>
        {/* 결제 수단 */}
        <TableCell>{item.paymentMethod}</TableCell>
        {/* 구독 기간 */}
        <TableCell>
          {item.subscriptionPeriod.start} ~ {item.subscriptionPeriod.end}
        </TableCell>
        {/* 금액 */}
        <TableCell className="text-right font-medium">
          {item.amount.toLocaleString()}
        </TableCell>
        {/* 거래명세서 */}
        <TableCell className="text-center">
          <Button
            size="sm"
            variant={isLatest ? 'default' : 'secondary'}
            className={isLatest ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
            onClick={handleViewInvoice}
          >
            <FileText className="h-4 w-4 mr-1" />
            거래명세서
          </Button>
        </TableCell>
      </TableRow>
    );
  }, [handleViewInvoice]);

  // ===== 모바일 카드 렌더링 =====
  const renderMobileCard = useCallback((
    item: PaymentHistory,
    index: number,
    globalIndex: number,
    isSelected: boolean,
    onToggle: () => void
  ) => {
    const isLatest = globalIndex === 1;

    return (
      <ListMobileCard
        id={item.id}
        title={`${item.subscriptionName} - ${item.paymentDate}`}
        isSelected={false}
        onToggleSelection={() => {}}
        infoGrid={
          <div className="grid grid-cols-2 gap-3">
            <InfoField label="결제일" value={item.paymentDate} />
            <InfoField label="구독명" value={item.subscriptionName} />
            <InfoField label="결제 수단" value={item.paymentMethod} />
            <InfoField label="금액" value={`${item.amount.toLocaleString()}원`} />
            <div className="col-span-2">
              <InfoField
                label="구독 기간"
                value={`${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`}
              />
            </div>
          </div>
        }
        actions={
          <Button
            size="sm"
            variant={isLatest ? 'default' : 'secondary'}
            className={isLatest ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
            onClick={handleViewInvoice}
          >
            <FileText className="h-4 w-4 mr-1" />
            거래명세서
          </Button>
        }
      />
    );
  }, [handleViewInvoice]);

  // ===== 테이블 헤더 액션 (주석처리: 필요시 활성화) =====
  // const tableHeaderActions = (
  //   <div className="flex items-center gap-2 flex-wrap">
  //     {/* 정렬 */}
  //     <Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
  //       <SelectTrigger className="w-[120px]">
  //         <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={Receipt}
        hideSearch={true}
        // ===== 검색/필터 (주석처리: 필요시 활성화) =====
        // searchValue={searchQuery}
        // onSearchChange={setSearchQuery}
        // searchPlaceholder="구독명, 결제 수단, 결제일 검색..."
        // tableHeaderActions={tableHeaderActions}
        tableColumns={tableColumns}
        data={paginatedData}
        totalCount={filteredData.length}
        allData={filteredData}
        selectedItems={new Set()}
        onToggleSelection={() => {}}
        onToggleSelectAll={() => {}}
        getItemId={(item: PaymentHistory) => item.id}
        renderTableRow={renderTableRow}
        renderMobileCard={renderMobileCard}
        showCheckbox={false}
        showRowNumber={false}
        pagination={{
          currentPage,
          totalPages,
          totalItems: filteredData.length,
          itemsPerPage,
          onPageChange: setCurrentPage,
        }}
      />

      {/* ===== 거래명세서 안내 다이얼로그 ===== */}
      <Dialog open={showInvoiceDialog} onOpenChange={setShowInvoiceDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5 text-blue-500" />
              거래명세서
            </DialogTitle>
            <DialogDescription className="text-left pt-2">
              MES 시스템의 문서 페이지에서 거래명세서를 확인할 수 있습니다.
              <br />
              <br />
              해당 기능은 MES 모듈에서 제공되며, 추후 연동 예정입니다.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button onClick={() => setShowInvoiceDialog(false)}>
              확인
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}