sam-react-prod/src/components/business/juil/estimates/sections/ExpenseDetailSection.tsx

'use client';

import React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import type { ExpenseItem } from '../types';
import { formatAmount, MOCK_EXPENSES } from '../utils';

interface ExpenseDetailSectionProps {
  expenseItems: ExpenseItem[];
  isViewMode: boolean;
  onAddItems: (count: number) => void;
  onRemoveSelected: () => void;
  onItemChange: (id: string, field: keyof ExpenseItem, value: string | number) => void;
  onSelectItem: (id: string, selected: boolean) => void;
  onSelectAll: (selected: boolean) => void;
}

export function ExpenseDetailSection({
  expenseItems,
  isViewMode,
  onAddItems,
  onRemoveSelected,
  onItemChange,
  onSelectItem,
  onSelectAll,
}: ExpenseDetailSectionProps) {
  const selectedCount = expenseItems.filter((item) => item.selected).length;
  const allSelected = expenseItems.length > 0 && expenseItems.every((item) => item.selected);

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-4">
        <div className="flex items-center gap-4">
          <CardTitle className="text-lg">공과 상세</CardTitle>
          {!isViewMode && (
            <div className="flex items-center gap-2">
              <span className="text-sm text-gray-600">{selectedCount}건 선택</span>
              <Button
                type="button"
                variant="default"
                size="sm"
                className="bg-gray-900 hover:bg-gray-800"
                onClick={onRemoveSelected}
                disabled={selectedCount === 0}
              >
                삭제
              </Button>
            </div>
          )}
        </div>
        {!isViewMode && (
          <div className="flex items-center gap-2">
            <Input
              type="number"
              min={1}
              defaultValue={1}
              className="w-16 text-center"
              id="expense-add-count"
            />
            <Button
              type="button"
              variant="default"
              size="sm"
              className="bg-gray-900 hover:bg-gray-800"
              onClick={() => {
                const countInput = document.getElementById('expense-add-count') as HTMLInputElement;
                const count = Math.max(1, parseInt(countInput?.value || '1', 10));
                onAddItems(count);
              }}
            >
              추가
            </Button>
          </div>
        )}
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow className="bg-gray-100">
                {!isViewMode && (
                  <TableHead className="w-[50px] text-center">
                    <input
                      type="checkbox"
                      className="h-4 w-4 rounded border-gray-300"
                      checked={allSelected}
                      onChange={(e) => onSelectAll(e.target.checked)}
                    />
                  </TableHead>
                )}
                <TableHead className="text-center">공과</TableHead>
                <TableHead className="text-right">금액</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {expenseItems.length === 0 ? (
                <TableRow>
                  <TableCell
                    colSpan={isViewMode ? 2 : 3}
                    className="text-center text-gray-500 py-8"
                  >
                    등록된 공과가 없습니다.
                  </TableCell>
                </TableRow>
              ) : (
                expenseItems.map((item) => (
                  <TableRow key={item.id}>
                    {!isViewMode && (
                      <TableCell className="text-center">
                        <input
                          type="checkbox"
                          className="h-4 w-4 rounded border-gray-300"
                          checked={item.selected || false}
                          onChange={(e) => onSelectItem(item.id, e.target.checked)}
                        />
                      </TableCell>
                    )}
                    <TableCell>
                      <Select
                        value={item.name}
                        onValueChange={(val) => onItemChange(item.id, 'name', val)}
                        disabled={isViewMode}
                      >
                        <SelectTrigger className={isViewMode ? 'bg-gray-50' : 'bg-white'}>
                          <SelectValue placeholder="공과 선택" />
                        </SelectTrigger>
                        <SelectContent>
                          {MOCK_EXPENSES.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                              {option.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </TableCell>
                    <TableCell>
                      <Input
                        type="number"
                        value={item.amount}
                        onChange={(e) => onItemChange(item.id, 'amount', Number(e.target.value))}
                        disabled={isViewMode}
                        className={`text-right ${isViewMode ? 'bg-gray-50' : 'bg-white'}`}
                      />
                    </TableCell>
                  </TableRow>
                ))
              )}
              {/* 합계 행 */}
              {expenseItems.length > 0 && (
                <TableRow className="bg-gray-50 font-medium">
                  <TableCell colSpan={isViewMode ? 1 : 2} className="text-center">
                    합계
                  </TableCell>
                  <TableCell className="text-right">
                    {formatAmount(expenseItems.reduce((sum, item) => sum + item.amount, 0))}
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
}