import React, { useMemo } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";

import { formatCurrency, formatDate } from '../utils/dateUtils';
import ExcelTable from './ExcelTable';
import { Badge } from '@/components/ui/badge';

const TransactionsByCategoryModal = ({ isOpen, onClose, categoryName, transactions }) => {
  const columns = useMemo(() => [
    {
      field: 'data',
      header: 'Data',
      width: '120px',
      render: (row) => <span>{formatDate(row.dataEntrada || row.data)}</span>
    },
    {
      field: 'descricao',
      header: 'Descrição',
      width: '300px',
      render: (row) => <span className="font-medium">{row.descricao}</span>
    },
    {
      field: 'valor',
      header: 'Valor',
      width: '150px',
      render: (row) => (
        <span className={row.tipoOperacao === 'C' ? "text-emerald-500 font-mono" : "text-rose-500 font-mono"}>
          {formatCurrency(row.valor || row.total || 0)}
        </span>
      )
    },
    {
      field: 'beneficiario_pagador',
      header: 'Beneficiário/Pagador',
      width: '250px',
    },
    // {
    //     field: 'status',
    //     header: 'Status',
    //     width: '120px',
    //     render: (row) => (
    //         <Badge variant="outline" className={
    //             row.status === 'Recebido' || row.status === 'Liquidado' || row.status === 'Pago' 
    //             ? "bg-emerald-500/10 text-emerald-500 border-emerald-500/20" 
    //             : "bg-amber-500/10 text-amber-500 border-amber-500/20"
    //         }>
    //             {row.status || 'Pendente'}
    //         </Badge>
    //     )
    // }
  ], []);

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-5xl h-[80vh] flex flex-col p-6 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-2xl">
        <DialogHeader className="mb-4">
          <DialogTitle className="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
            Transações: <span className="text-emerald-500">{categoryName}</span>
          </DialogTitle>
          <DialogDescription className="sr-only">
            Listagem detalhada de transações para a categoria {categoryName}
          </DialogDescription>
        </DialogHeader>

        
        <div className="flex-1 overflow-hidden">
          <ExcelTable
            data={transactions}
            columns={columns}
            rowKey="idextrato"
            pageSize={20}
          />
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default TransactionsByCategoryModal;
