import React from 'react';
import { 
  ArrowUpRight, 
  ArrowDownRight,
  AlertCircle,
  CheckCircle2,
  Clock,
  Tag
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { formatDate, formatCurrency } from '@/features/financeiro-v2/utils/dateUtils';
import { Badge } from '@/components/ui/badge';

export const StatementRow = ({
  transaction,
  categoryName,
  ruleName,
  onClick,
  showCategory = true,
  showStatus = true,
  showBeneficiary = true,
  className
}) => {
  const isConciliated = transaction.status === 'CONCILIADO' || transaction.conciliado;
  
  // Format value to ensure it's a number
  const value = typeof transaction.valor === 'string' 
    ? parseFloat(transaction.valor.replace(',', '.')) 
    : transaction.valor;

  const isCredit = transaction.tipoOperacao ? transaction.tipoOperacao === 'C' : value > 0;

  // Determine status config
  const getStatusConfig = () => {
    if (isConciliated) {
      return {
        label: 'CONCILIADO',
        className: 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20'
      };
    }
    return {
      label: 'PENDENTE',
      className: 'bg-amber-500/10 text-amber-600 border-amber-500/20'
    };
  };

  const statusConfig = getStatusConfig();

  return (
    <div 
      onClick={() => onClick && onClick(transaction)}
      className={cn(
        "px-6 py-3 flex items-center justify-between hover:bg-slate-50 dark:hover:bg-slate-800/20 transition-all duration-200 group cursor-pointer border-b border-slate-100 dark:border-slate-800 last:border-0",
        className
      )}
    >
      <div className="flex items-center gap-4 flex-1 min-w-0">
        {/* Icon */}
        <div className={cn(
          "w-10 h-10 rounded-xl flex items-center justify-center shrink-0 transition-colors",
          isCredit 
            ? "bg-emerald-500/10 text-emerald-600 group-hover:bg-emerald-500/20" 
            : "bg-rose-500/10 text-rose-600 group-hover:bg-rose-500/20"
        )}>
          {isCredit ? <ArrowUpRight size={18} /> : <ArrowDownRight size={18} />}
        </div>
        
        {/* Main Info */}
        <div className="flex flex-col min-w-0 pr-4">
          <span className="text-xs font-bold text-slate-900 dark:text-white truncate" title={transaction.beneficiario_pagador || transaction.descricao}>
            {transaction.beneficiario_pagador || transaction.descricao}
          </span>
          <div className="flex items-center gap-2 mt-1 flex-wrap">
            {transaction.titulo && (
               <span className="text-[clamp(0.7rem,1.2vw,0.8rem)] font-bold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 px-1.5 py-0.5 rounded">
                {transaction.titulo}
              </span>
            )}
            <span className="text-[clamp(0.7rem,1.2vw,0.8rem)] font-bold text-slate-500 uppercase bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">
              {transaction.tipoTransacao || 'GERAL'}
            </span>
            <span className="text-[clamp(0.7rem,1.2vw,0.8rem)] text-slate-400 flex items-center gap-1">
              <Clock size={10} />
              {formatDate(transaction.dataEntrada || transaction.data)}
            </span>
            {ruleName && (
              <span className="text-[clamp(0.7rem,1.2vw,0.8125rem)] text-indigo-500 flex items-center gap-1 bg-indigo-50 dark:bg-indigo-950/30 px-1.5 py-0.5 rounded">
                <Tag size={10} />
                Regra: {ruleName}
              </span>
            )}
          </div>
          {(transaction.beneficiario_pagador || transaction.titulo) && transaction.descricao && (
            <span className="text-[clamp(0.7rem,1.2vw,0.8rem)] text-slate-400 mt-0.5 truncate italic">
              {transaction.descricao}
            </span>
          )}
        </div>
      </div>
      
      {/* Right Side Info */}
      <div className="flex flex-col items-end gap-1 shrink-0 ml-2">
        <span className={cn(
          "text-sm font-bold whitespace-nowrap",
          isCredit ? "text-emerald-600" : "text-rose-600"
        )}>
          {isCredit ? '+' : '-'} {formatCurrency(Math.abs(value))}
        </span>
        
        <div className="flex items-center gap-2">
          {showCategory && categoryName && (
            <span className="text-[clamp(0.65rem,1vw,0.75rem)] font-medium text-slate-500 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded-full border border-slate-200 dark:border-slate-700 max-w-[100px] truncate hidden sm:block">
              {categoryName}
            </span>
          )}
          
          {showStatus && (
            <span className={cn(
              "text-[clamp(0.65rem,1vw,0.75rem)] font-bold px-2 py-0.5 rounded-full border hidden sm:block",
              statusConfig.className
            )}>
              {statusConfig.label}
            </span>
          )}
        </div>
      </div>
    </div>
  );
};
