import { useState, useEffect } from 'react';
import './styles.css';

interface PaymentMethodBreakdown {
  method: string;
  count: number;
  amount: number;
  percentage: number;
}

interface Payment {
  id: string;
  orderNumber: string;
  method: string;
  amount: number;
  tip: number;
  total: number;
  time: string;
  status: 'completed' | 'refunded';
}

export default function PaymentSummary() {
  const [breakdown, setBreakdown] = useState<PaymentMethodBreakdown[]>([]);
  const [recentPayments, setRecentPayments] = useState<Payment[]>([]);

  useEffect(() => {
    // Mock data
    setBreakdown([
      { method: 'Credit Card', count: 82, amount: 5847.25, percentage: 68.4 },
      { method: 'Cash', count: 23, amount: 1234.50, percentage: 14.5 },
      { method: 'Debit Card', count: 18, amount: 987.40, percentage: 11.6 },
      { method: 'Mobile Payment', count: 12, amount: 478.17, percentage: 5.5 },
    ]);

    setRecentPayments([
      { id: '1', orderNumber: 'ORD-142', method: 'Credit Card', amount: 68.50, tip: 12.00, total: 80.50, time: '14:32', status: 'completed' },
      { id: '2', orderNumber: 'ORD-141', method: 'Cash', amount: 45.00, tip: 8.00, total: 53.00, time: '14:28', status: 'completed' },
      { id: '3', orderNumber: 'ORD-140', method: 'Mobile Payment', amount: 92.75, tip: 18.00, total: 110.75, time: '14:25', status: 'completed' },
      { id: '4', orderNumber: 'ORD-139', method: 'Credit Card', amount: 54.25, tip: 10.00, total: 64.25, time: '14:20', status: 'completed' },
      { id: '5', orderNumber: 'ORD-138', method: 'Debit Card', amount: 78.90, tip: 15.00, total: 93.90, time: '14:15', status: 'completed' },
      { id: '6', orderNumber: 'ORD-137', method: 'Credit Card', amount: 34.20, tip: 0.00, total: 34.20, time: '14:10', status: 'refunded' },
    ]);
  }, []);

  const totalAmount = breakdown.reduce((sum, b) => sum + b.amount, 0);
  const totalTips = recentPayments.reduce((sum, p) => sum + p.tip, 0);
  const totalRefunds = recentPayments.filter(p => p.status === 'refunded').reduce((sum, p) => sum + p.total, 0);
  const totalTransactions = breakdown.reduce((sum, b) => sum + b.count, 0);

  const getMethodColor = (method: string) => {
    const colors: Record<string, string> = {
      'Credit Card': '#3b82f6',
      'Cash': '#10b981',
      'Debit Card': '#8b5cf6',
      'Mobile Payment': '#fbbf24',
    };
    return colors[method] || '#6b7280';
  };

  return (
    <div className="app">
      <header className="app-header">
        <h1>💳 Payment Summary</h1>
        <p>Payment breakdown and transactions</p>
      </header>

      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-label">Total Payments</div>
          <div className="stat-value">${totalAmount.toFixed(2)}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Total Tips</div>
          <div className="stat-value tips">${totalTips.toFixed(2)}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Refunds</div>
          <div className="stat-value refunds">${totalRefunds.toFixed(2)}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Transactions</div>
          <div className="stat-value">{totalTransactions}</div>
        </div>
      </div>

      <div className="content-grid">
        <div className="breakdown-panel">
          <h2>Payment Methods</h2>
          <div className="breakdown-list">
            {breakdown.map((item) => (
              <div key={item.method} className="breakdown-item">
                <div className="breakdown-header">
                  <div>
                    <span
                      className="method-dot"
                      style={{ backgroundColor: getMethodColor(item.method) }}
                    ></span>
                    <span className="method-name">{item.method}</span>
                  </div>
                  <span className="method-count">{item.count} transactions</span>
                </div>
                <div className="breakdown-bar">
                  <div
                    className="breakdown-fill"
                    style={{
                      width: `${item.percentage}%`,
                      backgroundColor: getMethodColor(item.method),
                    }}
                  ></div>
                </div>
                <div className="breakdown-footer">
                  <span className="breakdown-amount">${item.amount.toFixed(2)}</span>
                  <span className="breakdown-percentage">{item.percentage}%</span>
                </div>
              </div>
            ))}
          </div>

          <div className="chart-container">
            <div className="pie-chart">
              {breakdown.map((item, index) => (
                <div
                  key={item.method}
                  className="pie-slice"
                  style={{
                    backgroundColor: getMethodColor(item.method),
                    transform: `rotate(${breakdown.slice(0, index).reduce((sum, b) => sum + (b.percentage * 3.6), 0)}deg)`,
                  }}
                ></div>
              ))}
            </div>
          </div>
        </div>

        <div className="transactions-panel">
          <h2>Recent Transactions</h2>
          <div className="transactions-list">
            {recentPayments.map((payment) => (
              <div key={payment.id} className={`transaction-card ${payment.status}`}>
                <div className="transaction-header">
                  <span className="order-number">{payment.orderNumber}</span>
                  <span className="transaction-time">{payment.time}</span>
                </div>
                <div className="transaction-body">
                  <div className="transaction-details">
                    <span
                      className="payment-method"
                      style={{ color: getMethodColor(payment.method) }}
                    >
                      {payment.method}
                    </span>
                    <div className="amounts">
                      <span className="amount">${payment.amount.toFixed(2)}</span>
                      {payment.tip > 0 && (
                        <span className="tip">+${payment.tip.toFixed(2)} tip</span>
                      )}
                    </div>
                  </div>
                  <div className="transaction-total">
                    <span className="total-label">Total</span>
                    <span className={`total-amount ${payment.status}`}>
                      {payment.status === 'refunded' && '−'}
                      ${payment.total.toFixed(2)}
                    </span>
                  </div>
                </div>
                {payment.status === 'refunded' && (
                  <div className="refund-badge">REFUNDED</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
