'use client';

import React, { useEffect, useState } from 'react';
import { useAuth } from '@/context/AuthContext';
import { useLanguage } from '@/context/LanguageContext';
import styles from '../account.module.css';

interface Order {
  id: string;
  createdAt: string;
  status: string;
  total: number;
  items: { name: string; quantity: number }[];
}

export default function AccountOrders() {
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // In a real app, fetch from /api/orders?userId=...
    // Mocking for now
    setTimeout(() => {
      setOrders([
        { id: 'FTP-X9B2K', createdAt: new Date(Date.now() - 86400000 * 2).toISOString(), status: 'delivered', total: 179.9, items: [{ name: 'Apple iPhone 15 Pro Max', quantity: 1 }] },
        { id: 'FTP-M4L9P', createdAt: new Date(Date.now() - 86400000 * 15).toISOString(), status: 'paid', total: 34.9, items: [{ name: 'AirPods Pro 2', quantity: 1 }] },
      ]);
      setLoading(false);
    }, 1000);
  }, []);

  if (!user) return null;

  return (
    <div>
      <h1 className={styles.pageTitle}>📦 {t.account.orders}</h1>
      
      {loading ? (
        <div style={{ color: 'var(--text-muted)' }}>Loading orders...</div>
      ) : orders.length === 0 ? (
        <div className={styles.card} style={{ textAlign: 'center', padding: '40px' }}>
          <div style={{ fontSize: '3rem', marginBottom: '16px' }}>🛒</div>
          <h3 style={{ color: 'var(--text-primary)', marginBottom: '8px' }}>{t.account.noOrders}</h3>
          <p style={{ color: 'var(--text-muted)' }}>Looks like you haven't made any purchases yet.</p>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          {orders.map(order => (
            <div key={order.id} className={styles.card} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
              <div>
                <div style={{ color: 'var(--text-primary)', fontWeight: '600', marginBottom: '4px' }}>Order #{order.id}</div>
                <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>{new Date(order.createdAt).toLocaleDateString()}</div>
                <div style={{ marginTop: '8px', fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
                  {order.items.map(i => `${i.quantity}x ${i.name}`).join(', ')}
                </div>
              </div>
              <div style={{ textAlign: language === 'ar' ? 'left' : 'right' }}>
                <div style={{ color: 'var(--neon-orange)', fontWeight: '700', fontSize: '1.2rem', marginBottom: '4px' }}>{order.total.toFixed(3)} KWD</div>
                <span className="badge" style={{ 
                  background: order.status === 'delivered' ? 'rgba(0, 209, 255, 0.1)' : 'rgba(255, 122, 0, 0.1)',
                  color: order.status === 'delivered' ? 'var(--electric-blue)' : 'var(--neon-orange)'
                }}>
                  {order.status.toUpperCase()}
                </span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
