/* global React, ICONS, useReveal */
const { useEffect, useRef, useState } = React;

/* ============================================================
   PRODUCTOS — catalog grid
============================================================ */
const WA_PHONE = '51996525276';
const waProduct = (name) =>
  `https://wa.me/${WA_PHONE}?text=${encodeURIComponent(`Hola, quisiera más información acerca del ${name}`)}`;

const PRODUCTS = [
  { id: 'P00001', name: 'Lámpara Kaws Acostada', price: 'S/ 160', tag: 'Lámparas', desc: 'Lámpara estilo Kaws para decoración 45x18cm.', img: 'product-image/P00001.png' },
  { id: 'P00002', name: 'Figura Kaws Off-White', price: 'S/ 130', tag: 'Figuras Coleccionables', desc: 'Figura estilo Kaws Off-White de 25cm.', img: 'product-image/P00002.png' },
  { id: 'P00003', name: 'Recuerdo personalizado', price: 'Cotizar', tag: 'Personalizados', desc: 'Recuerdo personalizado a tu medida.', img: 'product-image/P00003.png' },
  { id: 'P00004', name: 'Cajas para figuras', price: 'S/ 50', tag: 'Mundial', desc: 'Cajas protectoras, hasta 400 figuritas.', img: 'product-image/P00004.png' },
  { id: 'P00005', name: 'Funkos personalizados', price: 'Cotizar', tag: 'Personalizados', desc: 'Funko Pops personalizados en 3D.', img: 'product-image/P00005.png' },
  { id: 'P00006', name: 'Llaveros personalizados', price: 'Cotizar', tag: 'Llaveros', desc: 'Llaveros personalizados en 3D.', img: 'product-image/P00006.png' },
];

function Productos() {
  const head = useReveal(0.2);
  const grid = useReveal(0.15);
  const Arrow = ICONS.ArrowUpRight;
  return (
    <section className="section" id="productos">
      <div className="container">
        <div className="section-head reveal-stagger" ref={head}>
          <span className="eyebrow">— Catálogo</span>
          <h2 className="h-section">Lo que ya está <em className="gold-italic">listo para ti</em>.</h2>
          <p>Diseños propios, stock real, envío en 24–72h a todo Perú.</p>
        </div>

        <div className="product-grid reveal-stagger" ref={grid}>
          {PRODUCTS.map((p) => (
            <a
              key={p.id}
              href={waProduct(p.name)}
              target="_blank"
              rel="noopener noreferrer"
              className="product-card"
              aria-label={`Consultar por ${p.name} en WhatsApp`}
            >
              {p.tag && <span className="product-tag">{p.tag}</span>}
              <div className="product-image">
                <img src={p.img} alt={p.name} loading="lazy" />
              </div>
              <h3 className="font-display">{p.name}</h3>
              <p className="desc">{p.desc}</p>
              <div className="product-foot">
                <span className="price">{p.price}</span>
                <span className="arrow-btn" aria-hidden="true">
                  <Arrow size={18} />
                </span>
              </div>
            </a>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <a href="#productos" style={{ color: 'var(--gold-400)', fontSize: 14.5, borderBottom: '1px solid var(--line-strong)', paddingBottom: 4 }}>
            Ver todo el catálogo →
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PERSONALIZA — split with form
============================================================ */
const CONTACT_PHONES = ['+51 996525276', '+51 902751349'];
const waContact = (phone) =>
  `https://wa.me/${phone.replace(/[^0-9]/g, '')}?text=${encodeURIComponent('Hola, vengo desde la web de Kimsai. Quisiera más información sobre: ')}`;

const CONTACT_ENDPOINT = '/api/contact';
const MAX_TOTAL_BYTES = 4 * 1024 * 1024; // 4 MB total (límite de funciones serverless en Vercel)

function Personaliza() {
  const head = useReveal(0.2);
  const form = useReveal(0.1);
  const formRef = useRef(null);
  const fileInputRef = useRef(null);
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState(null);
  const [files, setFiles] = useState([]);

  // Keep the native file input in sync with our managed list (enables remove + add-more)
  const syncInput = (list) => {
    if (!fileInputRef.current) return;
    const dt = new DataTransfer();
    list.forEach((f) => dt.items.add(f));
    fileInputRef.current.files = dt.files;
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setError(null);
    setSubmitting(true);

    const fd = new FormData(formRef.current);
    fd.delete('attachment');
    files.forEach((f) => fd.append('attachment', f, f.name));

    try {
      const res = await fetch(CONTACT_ENDPOINT, { method: 'POST', body: fd });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || !json.success) {
        throw new Error(json.message || 'No se pudo enviar el correo.');
      }
      setSubmitted(true);
      setFiles([]);
      syncInput([]);
      if (formRef.current) formRef.current.reset();
    } catch (err) {
      setError(
        (err && err.message) ||
          'No pudimos enviar el correo. Escríbenos por WhatsApp a +51 996525276 o +51 902751349.'
      );
    } finally {
      setSubmitting(false);
    }
  };

  const onFile = (e) => {
    const incoming = Array.from(e.target.files || []);
    if (!incoming.length) return;
    setFiles((prev) => {
      const merged = [...prev];
      incoming.forEach((f) => {
        if (!merged.some((m) => m.name === f.name && m.size === f.size)) merged.push(f);
      });
      const total = merged.reduce((s, f) => s + f.size, 0);
      if (total > MAX_TOTAL_BYTES) {
        setError('Los archivos superan el límite de 4 MB en total.');
        return prev;
      }
      setError(null);
      syncInput(merged);
      return merged;
    });
  };

  const removeFile = (idx) => {
    setFiles((prev) => {
      const next = prev.filter((_, i) => i !== idx);
      syncInput(next);
      return next;
    });
    setError(null);
  };

  const Arrow = ICONS.ArrowRight;
  const Upload = ICONS.Upload;
  const Whatsapp = ICONS.Whatsapp;

  return (
    <section className="section" id="personaliza">
      <div className="container">
        <div className="split">
          <div className="reveal-stagger" ref={head} style={{ display: 'flex', flexDirection: 'column' }}>
            <span className="eyebrow">— Personaliza</span>
            <h2 className="h-section" style={{ marginTop: 18, marginBottom: 22 }}>
              Tu idea, <em className="gold-italic">hecha realidad</em>.
            </h2>
            <p style={{ color: 'var(--ink-dim)', fontSize: 17.5, maxWidth: 480 }}>
              Envíanos tu diseño, una foto, una referencia o solo cuéntanos qué necesitas.
              Cotizamos en menos de 24 horas hábiles.
            </p>

            <div className="steps">
              {[
                'Cuéntanos tu idea',
                'Cotizamos en 24h',
                'Imprimimos',
                'Lo recibes',
              ].map((s, i) => (
                <div className="step" key={i}>
                  <span className="num">0{i + 1}</span>
                  <span className="lbl">{s}</span>
                </div>
              ))}
            </div>

            <div className="contact-direct" style={{ marginTop: 28 }}>
              <h3 className="font-display">Contáctanos directamente</h3>
              <p>Escríbenos por WhatsApp y te respondemos al toque.</p>
              <div className="contact-direct-list">
                {CONTACT_PHONES.map((phone) => (
                  <div className="contact-phone" key={phone}>
                    <span className="num mono">{phone}</span>
                    <a
                      href={waContact(phone)}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="btn btn-gold"
                      style={{ padding: '9px 16px', fontSize: 13.5 }}
                      aria-label={`Escribir a ${phone} por WhatsApp`}
                    >
                      <Whatsapp size={16} /> WhatsApp
                    </a>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <form
            className="form-card reveal"
            ref={(el) => { form.current = el; formRef.current = el; }}
            onSubmit={onSubmit}
          >
            <div>
              <h3 className="font-display">Cotiza tu idea personalizada</h3>
              <p style={{ color: 'var(--ink-dim)', fontSize: 13.5, marginTop: 6 }}>
                Respuesta humana, no formulario al vacío.
              </p>
            </div>

            <div className="row-2">
              <div>
                <label className="field-label" htmlFor="f-name">Nombre</label>
                <input className="field" id="f-name" name="name" placeholder="¿Cómo te llamas?" required />
              </div>
              <div>
                <label className="field-label" htmlFor="f-email">Email</label>
                <input className="field" id="f-email" name="email" type="email" placeholder="tu@correo.com" required />
              </div>
            </div>

            <div>
              <label className="field-label" htmlFor="f-wa">WhatsApp</label>
              <input className="field" id="f-wa" name="whatsapp" placeholder="+51 9XX XXX XXX" />
            </div>

            <div>
              <label className="field-label" htmlFor="f-deadline">Plazo deseado</label>
              <select className="field" id="f-deadline" name="deadline" defaultValue="">
                <option value="" disabled>Selecciona...</option>
                <option>Sin apuro (1–2 semanas)</option>
                <option>Estándar (4–7 días)</option>
                <option>Rápido (48–72h)</option>
                <option>Express (24h, +recargo)</option>
              </select>
            </div>

            <div>
              <label className="field-label" htmlFor="f-msg">Mensaje</label>
              <textarea className="field" id="f-msg" name="message" placeholder="Cuéntanos tu idea o pega un link/imagen de referencia" />
            </div>

            <div>
              <label className="field-label">Archivos de referencia (opcional)</label>
              {files.length > 0 && (
                <ul className="file-list">
                  {files.map((f, i) => (
                    <li className="file-chip" key={f.name + f.size}>
                      <span className="mono name">{f.name}</span>
                      <button
                        type="button"
                        className="file-remove"
                        onClick={() => removeFile(i)}
                        aria-label={`Quitar ${f.name}`}
                      >×</button>
                    </li>
                  ))}
                </ul>
              )}
              <button
                type="button"
                className="dropzone"
                onClick={() => fileInputRef.current && fileInputRef.current.click()}
              >
                <span className="mono">
                  <Upload size={14} style={{ display: 'inline-block', verticalAlign: '-2px', marginRight: 6 }} />
                  {files.length ? 'Agregar otro archivo' : 'Sube tu archivo (opcional)'}
                </span>
                <span>.STL, .OBJ, .STEP o imagen de referencia · hasta 4 MB · opcional</span>
              </button>
              <input
                ref={fileInputRef}
                id="f-file"
                name="attachment"
                type="file"
                multiple
                onChange={onFile}
                style={{ display: 'none' }}
                accept=".stl,.obj,.step,.png,.jpg,.jpeg,.pdf"
              />
            </div>

            <button type="submit" className="btn btn-gold" disabled={submitting} style={{ width: '100%', padding: '15px 24px', fontSize: 15.5 }}>
              {submitting ? 'Enviando...' : <>Solicitar cotización gratis <Arrow size={16} /></>}
            </button>

            {submitted && (
              <div className="form-success" role="status">
                Se ha enviado la información a contacto@kimsai3d.com, también puedes
                contactarnos a los siguientes números +51 996525276 y +51 902751349
              </div>
            )}
            {error && (
              <div className="form-error" role="alert">{error}</div>
            )}

            <div className="submit-foot">
              Respuesta en menos de 24 horas hábiles · Sin compromiso
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Productos, Personaliza });