'use client';

import React, { useState } from 'react';
import StoreLayout from '@/components/layout/StoreLayout';
import { useLanguage } from '@/context/LanguageContext';

const MOCK_ORDERS: Record<string, { status: string; steps: { key: string; date: string; done: boolean }[]; product: string; total: number }> = {
  'FTP001': {
    status: 'shipped',
    product: 'iPhone 15 Pro Max 256GB',
    total: 179.9,
    steps: [
      { key: 'placed', date: '2024-01-20 10:30', done: true },
      { key: 'paid', date: '2024-01-20 10:32', done: true },
      { key: 'preparing', date: '2024-01-20 14:00', done: true },
      { key: 'shipped', date: '2024-01-21 09:00', done: true },
      { key: 'delivered', date: '', done: false },
    ],
  },
  'FTP002': {
    status: 'delivered',
    product: 'Samsung Galaxy S24 Ultra',
    total: 169.9,
    steps: [
      { key: 'placed', date: '2024-01-18 16:00', done: true },
      { key: 'paid', date: '2024-01-18 16:01', done: true },
      { key: 'preparing', date: '2024-01-18 18:30', done: true },
      { key: 'shipped', date: '2024-01-19 10:00', done: true },
      { key: 'delivered', date: '2024-01-19 15:30', done: true },
    ],
  },
};

export default function TrackPage() {
  const { t, language } = useLanguage();
  const [query, setQuery] = useState('');
  const [result, setResult] = useState<typeof MOCK_ORDERS[string] | null | 'not-found'>(null);

  const handleTrack = () => {
    const order = MOCK_ORDERS[query.toUpperCase()];
    setResult(order || 'not-found');
  };

  const stepLabels: Record<string, { en: string; ar: string }> = {
    placed: { en: t.track.placed, ar: t.track.placed },
    paid: { en: t.track.paid, ar: t.track.paid },
    preparing: { en: t.track.preparing, ar: t.track.preparing },
    shipped: { en: t.track.shipped, ar: t.track.shipped },
    delivered: { en: t.track.delivered, ar: t.track.delivered },
  };

  const stepIcons: Record<string, string> = { placed: '📋', paid: '💳', preparing: '📦', shipped: '🚚', delivered: '✅' };

  return (
    <StoreLayout>
      <div style={{ padding: '40px 24px 80px', maxWidth: '700px', margin: '0 auto' }}>
        <div className="section-header">
          <h1 className="section-title">🔍 {t.track.title}</h1>
          <p className="text-secondary" style={{ textAlign: 'center' }}>{t.track.subtitle}</p>
          <div className="section-line"></div>
        </div>

        <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
          <input
            type="text"
            className="form-input"
            placeholder="FTP001 / +96512345678"
            value={query}
            onChange={e => setQuery(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && handleTrack()}
            style={{ flex: 1, minWidth: '200px' }}
          />
          <button className="btn btn-primary btn-lg" onClick={handleTrack}>{t.track.trackBtn}</button>
        </div>

        <div style={{ marginTop: '12px', display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
          <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem' }}>{language === 'ar' ? 'أرقام تجريبية:' : 'Try:'}</span>
          {['FTP001', 'FTP002'].map(id => (
            <button key={id} className="btn btn-outline btn-sm" onClick={() => { setQuery(id); }}>
              {id}
            </button>
          ))}
        </div>

        {result && result !== 'not-found' && (
          <div style={{ marginTop: '40px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(0,209,255,0.15)', borderRadius: '20px', padding: '28px' }}>
            <div style={{ marginBottom: '24px', padding: '16px', background: 'rgba(0,0,0,0.2)', borderRadius: '12px' }}>
              <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '4px' }}>{language === 'ar' ? 'المنتج:' : 'Product:'}</div>
              <div style={{ fontSize: '0.95rem', fontWeight: '600', color: 'var(--text-primary)' }}>{result.product}</div>
              <div style={{ marginTop: '8px', display: 'flex', gap: '16px' }}>
                <span style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>{language === 'ar' ? 'الإجمالي:' : 'Total:'}</span>
                <span style={{ fontFamily: 'Orbitron, monospace', color: 'var(--electric-blue)', fontWeight: '700' }}>{result.total.toFixed(3)} {t.product.kwd}</span>
              </div>
            </div>

            {/* Timeline */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
              {result.steps.map((step, i) => (
                <div key={step.key} style={{ display: 'flex', gap: '16px', paddingBottom: i < result.steps.length - 1 ? '24px' : '0', position: 'relative' }}>
                  {i < result.steps.length - 1 && (
                    <div style={{ position: 'absolute', left: '19px', top: '40px', width: '2px', height: 'calc(100% - 16px)', background: step.done ? 'var(--electric-blue)' : 'rgba(255,255,255,0.1)' }}></div>
                  )}
                  <div style={{
                    width: '40px', height: '40px', borderRadius: '50%',
                    background: step.done ? 'rgba(0,209,255,0.15)' : 'rgba(255,255,255,0.05)',
                    border: `2px solid ${step.done ? 'var(--electric-blue)' : 'rgba(255,255,255,0.12)'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: '1rem', flexShrink: 0, zIndex: 1,
                    boxShadow: step.done ? 'var(--glow-blue-sm)' : 'none',
                  }}>
                    {step.done ? stepIcons[step.key] : '○'}
                  </div>
                  <div>
                    <div style={{ fontWeight: '600', fontSize: '0.9rem', color: step.done ? 'var(--text-primary)' : 'var(--text-muted)' }}>
                      {stepLabels[step.key][language as 'en' | 'ar']}
                    </div>
                    {step.date && <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginTop: '2px' }}>{step.date}</div>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {result === 'not-found' && (
          <div style={{ marginTop: '40px', textAlign: 'center', padding: '40px', background: 'rgba(255,59,92,0.05)', border: '1px solid rgba(255,59,92,0.15)', borderRadius: '16px' }}>
            <div style={{ fontSize: '2.5rem', marginBottom: '12px' }}>❌</div>
            <div style={{ color: 'var(--error)', fontWeight: '600' }}>{t.track.notFound}</div>
          </div>
        )}
      </div>
    </StoreLayout>
  );
}
