// BankTransactionCard - Card component for displaying a bank transaction

import { Card, Button, Space, Tag, Typography, Tooltip } from 'antd';
import { CheckOutlined, SplitCellsOutlined, BankOutlined } from '@ant-design/icons';
import { formatCurrency, formatDateShort } from '@/lib/formatters';
import { accountingColors } from '@/styles/theme';
import type { PendingBankTransaction } from '@/stores/simpleBookingStore';

const { Text } = Typography;

interface BankTransactionCardProps {
  transaction: PendingBankTransaction;
  onBook: (transaction: PendingBankTransaction) => void;
  onSplit: (transaction: PendingBankTransaction) => void;
  isSelected?: boolean;
  disabled?: boolean;
}

export function BankTransactionCard({
  transaction,
  onBook,
  onSplit,
  isSelected = false,
  disabled = false,
}: BankTransactionCardProps) {
  const isExpense = transaction.amount < 0;
  const amountColor = isExpense ? accountingColors.debit : accountingColors.credit;

  return (
    <Card
      size="small"
      className={`bank-transaction-card ${isSelected ? 'selected' : ''} ${transaction.isBooked ? 'booked' : ''}`}
      style={{
        marginBottom: 8,
        borderLeft: `3px solid ${isExpense ? accountingColors.debit : accountingColors.credit}`,
        opacity: transaction.isBooked ? 0.6 : 1,
        background: isSelected ? '#f0f5ff' : transaction.isBooked ? '#fafafa' : '#fff',
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        {/* Left: Amount and description */}
        <div style={{ flex: 1 }}>
          <div style={{ marginBottom: 4 }}>
            <Text
              strong
              style={{
                fontSize: 16,
                color: amountColor,
              }}
            >
              {formatCurrency(transaction.amount)}
            </Text>
          </div>
          <Text
            style={{
              display: 'block',
              fontSize: 13,
              color: '#262626',
              lineHeight: 1.4,
            }}
          >
            {transaction.description}
          </Text>
          <div style={{ marginTop: 6 }}>
            <Space size={4}>
              <Text type="secondary" style={{ fontSize: 12 }}>
                {formatDateShort(transaction.date)}
              </Text>
              {transaction.counterparty && (
                <>
                  <Text type="secondary" style={{ fontSize: 12 }}>•</Text>
                  <Text type="secondary" style={{ fontSize: 12 }}>
                    {transaction.counterparty}
                  </Text>
                </>
              )}
            </Space>
          </div>
        </div>

        {/* Right: Actions */}
        <div style={{ marginLeft: 16 }}>
          {transaction.isBooked ? (
            <Tag color="success" icon={<CheckOutlined />}>
              Bogfoert
            </Tag>
          ) : (
            <Space>
              <Tooltip title="Bogfoer">
                <Button
                  type="primary"
                  size="small"
                  onClick={() => onBook(transaction)}
                  disabled={disabled}
                >
                  Bogfoer
                </Button>
              </Tooltip>
              <Tooltip title="Opdel paa flere konti">
                <Button
                  size="small"
                  icon={<SplitCellsOutlined />}
                  onClick={() => onSplit(transaction)}
                  disabled={disabled}
                >
                  Opdel...
                </Button>
              </Tooltip>
            </Space>
          )}
        </div>
      </div>
    </Card>
  );
}

interface BankTransactionListProps {
  transactions: PendingBankTransaction[];
  onBook: (transaction: PendingBankTransaction) => void;
  onSplit: (transaction: PendingBankTransaction) => void;
  showBooked?: boolean;
  selectedId?: string;
  disabled?: boolean;
}

export function BankTransactionList({
  transactions,
  onBook,
  onSplit,
  showBooked = false,
  selectedId,
  disabled = false,
}: BankTransactionListProps) {
  const filteredTransactions = showBooked
    ? transactions
    : transactions.filter((tx) => !tx.isBooked);

  if (filteredTransactions.length === 0) {
    return (
      <Card style={{ textAlign: 'center', padding: '24px 0' }}>
        <BankOutlined style={{ fontSize: 32, color: '#bfbfbf', marginBottom: 8 }} />
        <div>
          <Text type="secondary">Ingen uboerte banktransaktioner</Text>
        </div>
      </Card>
    );
  }

  return (
    <div className="bank-transaction-list">
      {filteredTransactions.map((transaction) => (
        <BankTransactionCard
          key={transaction.id}
          transaction={transaction}
          onBook={onBook}
          onSplit={onSplit}
          isSelected={transaction.id === selectedId}
          disabled={disabled}
        />
      ))}
    </div>
  );
}

export default BankTransactionCard;
