// Account: sign-in / sign-up / signed-in profile + order history
const { useState: useState3, useCallback: useCallback3 } = React;

function AccountPage() {
  const { user, navigate } = useStore();

  return (
    <div className="container" style={{ maxWidth: 640, padding: '40px 16px 80px' }}>
      <div className="crumbs" style={{ marginBottom: 24 }}>
        <a onClick={() => navigate({ name: 'home' })}>Home</a>
        <span className="sep">/</span>
        <span className="current">My Account</span>
      </div>
      {user ? <SignedInView /> : <AuthView />}
    </div>
  );
}

function AuthView() {
  const [tab, setTab] = useState3('signin'); // 'signin' | 'signup'
  return (
    <div>
      <div className="eyebrow-gold" style={{ marginBottom: 8 }}>Welcome</div>
      <h1 style={{ fontSize: 28, marginBottom: 24 }}>My Account</h1>
      <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--color-border)', marginBottom: 32 }}>
        <button
          onClick={() => setTab('signin')}
          style={{
            background: 'none', border: 'none', cursor: 'pointer',
            padding: '10px 24px', fontSize: 14, fontWeight: 600,
            letterSpacing: '.08em', textTransform: 'uppercase',
            borderBottom: tab === 'signin' ? '2px solid var(--color-accent)' : '2px solid transparent',
            color: tab === 'signin' ? 'var(--color-accent)' : 'var(--color-text-mute)',
            marginBottom: -1,
          }}
        >Sign In</button>
        <button
          onClick={() => setTab('signup')}
          style={{
            background: 'none', border: 'none', cursor: 'pointer',
            padding: '10px 24px', fontSize: 14, fontWeight: 600,
            letterSpacing: '.08em', textTransform: 'uppercase',
            borderBottom: tab === 'signup' ? '2px solid var(--color-accent)' : '2px solid transparent',
            color: tab === 'signup' ? 'var(--color-accent)' : 'var(--color-text-mute)',
            marginBottom: -1,
          }}
        >Create Account</button>
      </div>
      {tab === 'signin' ? <SignInForm onSwitch={() => setTab('signup')} /> : <SignUpForm onSwitch={() => setTab('signin')} />}
    </div>
  );
}

function SignInForm({ onSwitch }) {
  const { signIn, navigate } = useStore();
  const toast = useToast();
  const [email, setEmail] = useState3('');
  const [password, setPassword] = useState3('');
  const [error, setError] = useState3('');
  const [busy, setBusy] = useState3(false);

  const submit = useCallback3((e) => {
    e.preventDefault();
    setError('');
    if (!email.trim()) return setError('Email is required.');
    if (!password) return setError('Password is required.');
    setBusy(true);
    // Simulate slight network delay for realism
    setTimeout(() => {
      const ok = signIn(email.trim().toLowerCase(), password);
      setBusy(false);
      if (ok) {
        toast('Welcome back!');
        navigate({ name: 'page', slug: 'account' });
      } else {
        setError('Incorrect email or password. Please try again.');
      }
    }, 400);
  }, [email, password, signIn, toast, navigate]);

  return (
    <form onSubmit={submit}>
      <div className="field">
        <label>Email Address</label>
        <input
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          placeholder="you@example.com"
          autoComplete="email"
        />
      </div>
      <div className="field">
        <label>Password</label>
        <input
          type="password"
          value={password}
          onChange={e => setPassword(e.target.value)}
          placeholder="Your password"
          autoComplete="current-password"
        />
      </div>
      {error && (
        <div style={{ color: 'var(--color-accent)', fontSize: 13, marginBottom: 12, padding: '10px 14px', background: '#fdf0f0', borderRadius: 4 }}>
          {error}
        </div>
      )}
      <button
        type="submit"
        className="btn btn-primary btn-lg"
        style={{ width: '100%', marginBottom: 16 }}
        disabled={busy}
      >
        {busy ? 'Signing in…' : 'Sign In'}
      </button>
      <p style={{ fontSize: 13, color: 'var(--color-text-mute)', textAlign: 'center' }}>
        New to Saancha?{' '}
        <button type="button" onClick={onSwitch} className="btn btn-text" style={{ fontSize: 13 }}>
          Create an account
        </button>
      </p>
      <div style={{ marginTop: 24, padding: '16px', background: 'var(--color-paper-2)', borderRadius: 4, fontSize: 12, color: 'var(--color-text-mute)' }}>
        <strong style={{ color: 'var(--color-text-soft)' }}>Saancha Member Benefits</strong>
        <ul style={{ margin: '8px 0 0', paddingLeft: 18, lineHeight: 1.8 }}>
          <li>Full order history &amp; easy reorder</li>
          <li>Faster checkout with saved address</li>
          <li>Early access to festive collections</li>
          <li>Member-exclusive coupon drops</li>
        </ul>
      </div>
    </form>
  );
}

function SignUpForm({ onSwitch }) {
  const { signUp, navigate } = useStore();
  const toast = useToast();
  const [name, setName] = useState3('');
  const [email, setEmail] = useState3('');
  const [password, setPassword] = useState3('');
  const [confirm, setConfirm] = useState3('');
  const [error, setError] = useState3('');
  const [busy, setBusy] = useState3(false);

  const submit = useCallback3((e) => {
    e.preventDefault();
    setError('');
    if (!name.trim()) return setError('Please enter your full name.');
    if (!email.trim() || !email.includes('@')) return setError('Please enter a valid email address.');
    if (password.length < 6) return setError('Password must be at least 6 characters.');
    if (password !== confirm) return setError('Passwords do not match.');
    setBusy(true);
    setTimeout(() => {
      const result = signUp(email.trim().toLowerCase(), password, name.trim());
      setBusy(false);
      if (!result) {
        setError('An account with this email already exists. Please sign in.');
      } else {
        toast('Account created — welcome to Saancha!');
        navigate({ name: 'page', slug: 'account' });
      }
    }, 500);
  }, [name, email, password, confirm, signUp, toast, navigate]);

  return (
    <form onSubmit={submit}>
      <div className="field">
        <label>Full Name</label>
        <input
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
          placeholder="Fatima Khan"
          autoComplete="name"
        />
      </div>
      <div className="field">
        <label>Email Address</label>
        <input
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          placeholder="you@example.com"
          autoComplete="email"
        />
      </div>
      <div className="field">
        <label>Password</label>
        <input
          type="password"
          value={password}
          onChange={e => setPassword(e.target.value)}
          placeholder="At least 6 characters"
          autoComplete="new-password"
        />
      </div>
      <div className="field">
        <label>Confirm Password</label>
        <input
          type="password"
          value={confirm}
          onChange={e => setConfirm(e.target.value)}
          placeholder="Repeat your password"
          autoComplete="new-password"
        />
      </div>
      {error && (
        <div style={{ color: 'var(--color-accent)', fontSize: 13, marginBottom: 12, padding: '10px 14px', background: '#fdf0f0', borderRadius: 4 }}>
          {error}
        </div>
      )}
      <button
        type="submit"
        className="btn btn-primary btn-lg"
        style={{ width: '100%', marginBottom: 16 }}
        disabled={busy}
      >
        {busy ? 'Creating account…' : 'Create Account'}
      </button>
      <p style={{ fontSize: 13, color: 'var(--color-text-mute)', textAlign: 'center' }}>
        Already have an account?{' '}
        <button type="button" onClick={onSwitch} className="btn btn-text" style={{ fontSize: 13 }}>
          Sign in
        </button>
      </p>
      <p style={{ fontSize: 11, color: 'var(--color-text-mute)', marginTop: 16, lineHeight: 1.6 }}>
        By creating an account you agree to our{' '}
        <button type="button" className="btn btn-text" style={{ fontSize: 11 }} onClick={() => navigate({ name: 'page', slug: 'terms' })}>Terms of Service</button>
        {' '}and{' '}
        <button type="button" className="btn btn-text" style={{ fontSize: 11 }} onClick={() => navigate({ name: 'page', slug: 'privacy' })}>Privacy Policy</button>.
        Saancha Shoes is a brand of OCEANNET (SMC-PRIVATE) LIMITED.
      </p>
    </form>
  );
}

function SignedInView() {
  const { user, orders, signOut, navigate } = useStore();
  const toast = useToast();

  const handleSignOut = useCallback3(() => {
    signOut();
    toast('Signed out successfully.');
    navigate({ name: 'home' });
  }, [signOut, toast, navigate]);

  const memberSince = user.createdAt
    ? new Date(user.createdAt).toLocaleDateString('en-PK', { year: 'numeric', month: 'long' })
    : '2026';

  return (
    <div>
      {/* Profile card */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 20, padding: '24px',
        background: 'var(--color-paper-2)', borderRadius: 6, marginBottom: 32,
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: '50%',
          background: 'var(--color-accent)', color: 'var(--color-surface)',
          display: 'grid', placeItems: 'center',
          fontSize: 22, fontFamily: 'var(--font-serif)', fontWeight: 400,
          flexShrink: 0,
        }}>
          {(user.name || user.email).charAt(0).toUpperCase()}
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--color-ink)', marginBottom: 2 }}>
            {user.name || 'Saancha Member'}
          </div>
          <div style={{ fontSize: 13, color: 'var(--color-text-mute)' }}>{user.email}</div>
          <div style={{ fontSize: 12, color: 'var(--color-text-mute)', marginTop: 2 }}>Member since {memberSince}</div>
        </div>
        <button
          className="btn btn-ghost"
          style={{ fontSize: 13, padding: '8px 16px', flexShrink: 0 }}
          onClick={handleSignOut}
        >
          Sign Out
        </button>
      </div>

      {/* Order history */}
      <div>
        <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 22, marginBottom: 20, color: 'var(--color-ink)' }}>Order History</h2>
        {orders.length === 0 ? (
          <div className="empty-state" style={{ padding: '40px 0' }}>
            <Ic.bag style={{ width: 40, height: 40, color: 'var(--color-text-mute)' }} />
            <h3 style={{ marginTop: 16 }}>No orders yet</h3>
            <p>Your placed orders will appear here.</p>
            <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => navigate({ name: 'home' })}>
              Explore Collection
            </button>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[...orders].reverse().map(o => (
              <OrderCard key={o.id} order={o} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function OrderCard({ order }) {
  const { navigate } = useStore();
  const [expanded, setExpanded] = useState3(false);

  const placedDate = order.placedAt
    ? new Date(order.placedAt).toLocaleDateString('en-PK', { day: 'numeric', month: 'short', year: 'numeric' })
    : '';

  const itemCount = order.items.reduce((s, i) => s + i.qty, 0);

  const statusLabel = {
    placed:      'Order Placed',
    processing:  'Processing',
    packed:      'Packed',
    shipped:     'Shipped',
    out:         'Out for Delivery',
    delivered:   'Delivered',
    cancelled:   'Cancelled',
  }[order.status] || 'Order Placed';

  const statusColor = order.status === 'delivered'
    ? '#2e7d32'
    : order.status === 'cancelled'
    ? 'var(--color-accent)'
    : 'var(--color-accent)';

  const grand = order.details?.fee?.grand ?? order.total ?? 0;

  return (
    <div style={{ border: '1px solid var(--color-border)', borderRadius: 6, overflow: 'hidden' }}>
      {/* Header row */}
      <div style={{
        display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 12,
        padding: '14px 20px', background: 'var(--color-paper-2)',
        borderBottom: '1px solid var(--color-border)',
      }}>
        <div style={{ flex: 1, minWidth: 120 }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--color-text-mute)', marginBottom: 2 }}>Order</div>
          <div style={{ fontWeight: 600, fontSize: 14, fontFamily: 'var(--font-serif)', color: 'var(--color-ink)' }}>{order.id}</div>
        </div>
        <div style={{ minWidth: 100 }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--color-text-mute)', marginBottom: 2 }}>Date</div>
          <div style={{ fontSize: 13, color: 'var(--color-text-soft)' }}>{placedDate}</div>
        </div>
        <div style={{ minWidth: 80 }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--color-text-mute)', marginBottom: 2 }}>Total</div>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-ink)' }}>{fmt(grand)}</div>
        </div>
        <div style={{ minWidth: 100 }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--color-text-mute)', marginBottom: 2 }}>Status</div>
          <div style={{ fontSize: 12, fontWeight: 600, color: statusColor }}>{statusLabel}</div>
        </div>
        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
          <button
            className="btn btn-ghost"
            style={{ fontSize: 12, padding: '6px 12px' }}
            onClick={() => navigate({ name: 'page', slug: 'track', orderId: order.id })}
          >
            Track
          </button>
          <button
            className="btn btn-text"
            style={{ fontSize: 12 }}
            onClick={() => setExpanded(x => !x)}
          >
            {expanded ? 'Hide' : 'Details'}
          </button>
        </div>
      </div>

      {/* Expanded items */}
      {expanded && (
        <div style={{ padding: '16px 20px' }}>
          <div style={{ fontSize: 12, color: 'var(--color-text-mute)', marginBottom: 12 }}>
            {itemCount} {itemCount === 1 ? 'item' : 'items'} · {order.details?.shipping === 'express' ? 'Express Delivery' : 'Standard Delivery'}
          </div>
          {order.items.map((line, i) => {
            const p = window.PRODUCTS.find(x => x.id === line.id);
            if (!p) return null;
            return (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--color-border)' }}>
                <div style={{ width: 48, height: 48, borderRadius: 4, overflow: 'hidden', flexShrink: 0, background: 'var(--color-paper-2)' }}>
                  <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} loading="lazy" />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--color-ink)' }}>{p.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--color-text-mute)' }}>
                    {[line.size, line.color].filter(Boolean).join(' · ')} · Qty {line.qty}
                  </div>
                </div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{fmt(p.price * line.qty)}</div>
              </div>
            );
          })}
          {order.details?.address && (
            <div style={{ marginTop: 14, fontSize: 12, color: 'var(--color-text-mute)' }}>
              <strong style={{ color: 'var(--color-text-soft)' }}>Delivered to:</strong>{' '}
              {[
                order.details.address.first,
                order.details.address.last,
                order.details.address.street,
                order.details.address.city,
                order.details.address.state,
                order.details.address.pin,
              ].filter(Boolean).join(', ')}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

window.AccountPage = AccountPage;