'use client';

import MainLayout from '@/components/layout/MainLayout';
import { useState } from 'react';
import TrackingUploadModal from '@/components/tracking/TrackingUploadModal';

export default function TrackingPage() {
  const [trackingNumber, setTrackingNumber] = useState('');
  const [submittedNumber, setSubmittedNumber] = useState('');
  const [carrier, setCarrier] = useState<'fedex' | 'ups'>('fedex');
  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
  const [uploadResult, setUploadResult] = useState<{updatedLines: number, notFoundLines: number} | null>(null);

  const trackingUrl = {
    fedex: `https://www.fedex.com/fedextrack/?trknbr=${submittedNumber}`,
    ups: `https://www.ups.com/track?tracknum=${submittedNumber}`,
  };

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (trackingNumber.trim()) setSubmittedNumber(trackingNumber.trim());
  };

  return (
    <MainLayout>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '2rem', flexWrap: 'wrap', gap: '1rem' }}>
        <div>
          <h1>Tracking</h1>
          <p className="page-subtitle">Rastrea envíos de FedEx y UPS en tiempo real, e importa la respuesta de logística.</p>
        </div>
        <div style={{ display: 'flex', gap: '1rem' }}>
          <a href="/api/tracking/export" download style={{ textDecoration: 'none' }}>
            <button className="btn-secondary">
              <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
              Exportar Plantilla
            </button>
          </a>
          <button className="btn-primary" onClick={() => setIsUploadModalOpen(true)}>
            <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>
            Subir Respuesta FedEx
          </button>
        </div>
      </div>

      {uploadResult && (
        <div style={{ padding: '1rem', background: '#d1fae5', color: '#065f46', borderRadius: 'var(--radius-md)', marginBottom: '2rem', display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <strong>¡Carga exitosa!</strong> Se han asignado tracking numbers a {uploadResult.updatedLines} cajas. 
            {uploadResult.notFoundLines > 0 && ` (No se encontraron ${uploadResult.notFoundLines} registros)`}
          </div>
          <button onClick={() => setUploadResult(null)} style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: '#065f46' }}>✖</button>
        </div>
      )}


      {/* Carrier selector + input */}
      <div className="glass-panel" style={{ padding: '2rem', maxWidth: '640px', marginBottom: '2rem' }}>
        <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.25rem' }}>
          {(['fedex', 'ups'] as const).map(c => (
            <button key={c} onClick={() => setCarrier(c)} style={{
              flex: 1, padding: '0.75rem', borderRadius: 'var(--radius-md)',
              fontWeight: 700, fontSize: '0.9rem', cursor: 'pointer',
              border: carrier === c ? '2px solid var(--primary-color)' : '2px solid var(--border-color)',
              background: carrier === c ? 'rgba(28,82,54,0.08)' : 'white',
              color: carrier === c ? 'var(--primary-color)' : 'var(--text-secondary)',
              transition: 'all 0.2s'
            }}>
              {c === 'fedex' ? '📦 FedEx' : '🚚 UPS'}
            </button>
          ))}
        </div>

        <form onSubmit={handleSearch} style={{ display: 'flex', gap: '0.75rem' }}>
          <input
            placeholder="Ingresa el número de tracking..."
            value={trackingNumber}
            onChange={e => setTrackingNumber(e.target.value)}
            style={{ flex: 1 }}
          />
          <button type="submit" className="btn-primary">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            Rastrear
          </button>
        </form>

        {submittedNumber && (
          <a href={trackingUrl[carrier]} target="_blank" rel="noopener noreferrer"
            style={{ display: 'inline-block', marginTop: '1rem', fontSize: '0.875rem', color: 'var(--primary-color)', fontWeight: 600 }}>
            → Ver tracking oficial de {carrier.toUpperCase()} ↗
          </a>
        )}
      </div>

      {/* Embedded tracking result */}
      {submittedNumber && (
        <div className="glass-panel" style={{ padding: '1.5rem' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
            <h3 style={{ color: 'var(--primary-color)', fontWeight: 700 }}>
              Resultado: {submittedNumber} ({carrier.toUpperCase()})
            </h3>
            <button className="btn-secondary" onClick={() => { setSubmittedNumber(''); setTrackingNumber(''); }}
              style={{ padding: '0.4rem 0.75rem', fontSize: '0.75rem' }}>
              Limpiar
            </button>
          </div>
          <iframe
            src={trackingUrl[carrier]}
            style={{ width: '100%', height: '500px', border: 'none', borderRadius: 'var(--radius-md)', background: '#f8fafc' }}
            title="Tracking"
          />
        </div>
      )}

      {!submittedNumber && (
        <div style={{ textAlign: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
          <svg width="64" height="64" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ margin: '0 auto 1rem', opacity: 0.3 }}>
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
          </svg>
          <p style={{ fontWeight: 500 }}>Ingresa un número de tracking para rastrear tu envío.</p>
        </div>
      )}

      {isUploadModalOpen && (
        <TrackingUploadModal 
          onClose={() => setIsUploadModalOpen(false)} 
          onUploadSuccess={(res) => setUploadResult(res)} 
        />
      )}
    </MainLayout>
  );
}