'use client';

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

export default function AccountAddresses() {
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const [showForm, setShowForm] = useState(false);

  // Mock addresses since we don't have it fully in AuthContext yet
  const [addresses, setAddresses] = useState([
    { id: 1, label: 'Home', area: 'Salmiya', block: '10', street: 'Amman St', building: '15', isDefault: true },
  ]);

  if (!user) return null;

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
        <h1 className={styles.pageTitle} style={{ marginBottom: 0 }}>📍 {t.account.addresses}</h1>
        <button className="btn btn-primary btn-sm" onClick={() => setShowForm(!showForm)}>
          {showForm ? 'Cancel' : `+ ${t.account.addAddress}`}
        </button>
      </div>

      {showForm && (
        <form className={styles.card} style={{ marginBottom: '32px' }} onSubmit={e => {
          e.preventDefault();
          alert('Address saved!');
          setShowForm(false);
        }}>
          <h3 style={{ color: 'var(--text-primary)', marginBottom: '16px' }}>New Address</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
            <div><label className="form-label">Address Label (Home, Work, etc)</label><input type="text" className="form-input" required /></div>
            <div><label className="form-label">{t.checkout.area}</label><input type="text" className="form-input" required /></div>
            <div><label className="form-label">{t.checkout.block}</label><input type="text" className="form-input" required /></div>
            <div><label className="form-label">{t.checkout.street}</label><input type="text" className="form-input" required /></div>
            <div><label className="form-label">{t.checkout.building}</label><input type="text" className="form-input" required /></div>
            <div><label className="form-label">{t.checkout.floor}</label><input type="text" className="form-input" /></div>
          </div>
          <button type="submit" className="btn btn-electric">Save Address</button>
        </form>
      )}

      {addresses.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.noAddresses}</h3>
         <p style={{ color: 'var(--text-muted)' }}>You haven't saved any delivery addresses yet.</p>
       </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '20px' }}>
          {addresses.map(addr => (
            <div key={addr.id} className={styles.card} style={{ position: 'relative' }}>
              {addr.isDefault && <span className="badge badge-blue" style={{ position: 'absolute', top: 16, right: 16 }}>Default</span>}
              <h3 style={{ color: 'var(--text-primary)', marginBottom: '12px', paddingRight: '60px' }}>{addr.label}</h3>
              <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem', lineHeight: 1.6 }}>
                {addr.area}, Block {addr.block}<br/>
                Street {addr.street}, Building {addr.building}
              </p>
              <div style={{ marginTop: '16px', display: 'flex', gap: '8px' }}>
                <button className="btn btn-outline btn-sm" style={{ flex: 1 }}>{language === 'ar' ? 'تعديل' : 'Edit'}</button>
                <button className="btn btn-outline btn-sm" style={{ flex: 1, borderColor: 'var(--error)', color: 'var(--error)' }}>
                  {t.admin.delete}
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
