// PdfBuilder.jsx — modal flow to generate the custom-catalog PDF.
// Steps: options -> generating -> done (download / share / create another).
// No automatic download; the user picks the action.

const { useState: usePdfState } = React;

const PdfBuilder = ({ open, wines, defaultShowPrices, onClose }) => {
  const [step, setStep] = usePdfState('options');
  const [title, setTitle] = usePdfState('');
  const [subtitle, setSubtitle] = usePdfState('');
  const [showPrices, setShowPrices] = usePdfState(false);
  const [showCata, setShowCata] = usePdfState(true);
  const [theme, setTheme] = usePdfState('light');
  const [result, setResult] = usePdfState(null);
  const [error, setError] = usePdfState('');
  const [shareMsg, setShareMsg] = usePdfState('');

  // Reset to options each time it opens
  React.useEffect(() => {
    if (open) {
      setStep('options');
      setTitle('');
      setSubtitle('');
      setResult(null);
      setError('');
      setShareMsg('');
      setShowPrices(!!defaultShowPrices);
      setShowCata(true);
      setTheme('light');
    }
  }, [open]);

  React.useEffect(() => {
    const fn = (e) => { if (e.key === 'Escape' && step !== 'generating') onClose(); };
    if (open) window.addEventListener('keydown', fn);
    return () => window.removeEventListener('keydown', fn);
  }, [open, step, onClose]);

  if (!open) return null;

  const effectiveTitle = title.trim() || 'Selección de vinos';

  const doGenerate = async () => {
    setStep('generating');
    setError('');
    try {
      const res = await window.generateCatalogPdf({
        title: effectiveTitle, subtitle: subtitle.trim(), showPrices, showCata, theme, wines,
      });
      setResult(res);
      setStep('done');
    } catch (e) {
      console.error(e);
      setError((e && e.message) || 'No se pudo generar el PDF.');
      setStep('options');
    }
  };

  const download = () => {
    if (!result) return;
    const a = document.createElement('a');
    a.href = result.url;
    a.download = result.filename;
    document.body.appendChild(a);
    a.click();
    a.remove();
  };

  const share = async () => {
    if (!result) return;
    setShareMsg('');
    const subject = effectiveTitle + ' · Comesa Canarias';
    const outcome = await window.shareCatalogPdf(result.blob, result.filename, subject, subtitle.trim());
    if (outcome === 'unsupported') {
      // Fallback: download the file and open the email client with a prefilled message.
      download();
      const body = `Hola,%0D%0A%0D%0AAdjunto el catálogo "${encodeURIComponent(effectiveTitle)}".%0D%0A%0D%0AUn saludo.`;
      window.location.href = `mailto:?subject=${encodeURIComponent(subject)}&body=${body}`;
      setShareMsg('Tu navegador no permite adjuntar directamente: hemos descargado el PDF y abierto tu correo para que lo adjuntes.');
    }
  };

  const createAnother = () => {
    setStep('options');
    setResult(null);
    setShareMsg('');
  };

  return (
    <>
      <div onClick={() => step !== 'generating' && onClose()} style={{
        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.72)', zIndex: 130,
        animation: 'fadeIn 200ms cubic-bezier(0.4,0,0.2,1)',
      }} />
      <div role="dialog" aria-label="Generar PDF" style={{
        position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 'min(560px, calc(100vw - 32px))', maxHeight: 'calc(100vh - 48px)', overflowY: 'auto',
        background: '#111111', border: '1px solid #2A2A28', zIndex: 140,
        animation: 'pdfIn 260ms cubic-bezier(0.2,0,0,1)',
      }}>
        {/* Header */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '20px 28px', borderBottom: '1px solid #2A2A28',
        }}>
          <div style={{
            fontFamily: 'Sora', fontWeight: 500, fontSize: 10,
            letterSpacing: '0.22em', textTransform: 'uppercase', color: '#B50D21',
          }}>Generar PDF · {wines.length} {wines.length === 1 ? 'producto' : 'productos'}</div>
          {step !== 'generating' && (
            <button onClick={onClose} style={{
              background: 'transparent', border: 0, color: '#B7B6B6', cursor: 'pointer', padding: 6, lineHeight: 0,
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6l-12 12" /></svg>
            </button>
          )}
        </div>

        {/* Body */}
        {step === 'options' && (
          <div style={{ padding: '28px' }}>
            <h2 style={{
              fontFamily: 'Sora', fontWeight: 600, fontSize: 24, color: '#FFFFFF', margin: '0 0 6px',
            }}>Opciones del catálogo</h2>
            <p style={{
              fontFamily: 'Sora', fontWeight: 300, fontSize: 13, color: '#B7B6B6', margin: '0 0 24px',
            }}>Formato horizontal · 2 productos por página · misma ficha que el catálogo.</p>

            <Field label="Título del catálogo" optional>
              <input value={title} onChange={(e) => setTitle(e.target.value)}
                placeholder="Selección de vinos" style={inputStyle} />
            </Field>
            <Field label="Subtítulo u observaciones" optional>
              <textarea value={subtitle} onChange={(e) => setSubtitle(e.target.value)}
                placeholder="Ej. Propuesta para Restaurante La Marea · Visita julio 2026"
                rows={3} style={{ ...inputStyle, resize: 'vertical', lineHeight: 1.5 }} />
            </Field>

            <ChoiceRow label="Mostrar precios">
              <OptionChoice active={!showPrices} onClick={() => setShowPrices(false)} label="Sin precios" note="Por defecto" />
              <OptionChoice active={showPrices} onClick={() => setShowPrices(true)} label="Con precios" note="PVP y caja" />
            </ChoiceRow>

            <ChoiceRow label="Notas de cata">
              <OptionChoice active={showCata} onClick={() => setShowCata(true)} label="Con cata" note="Visual · Olfato · Gusto" />
              <OptionChoice active={!showCata} onClick={() => setShowCata(false)} label="Sin cata" note="Ficha más breve" />
            </ChoiceRow>

            <ChoiceRow label="Fondo del documento">
              <OptionChoice active={theme === 'light'} onClick={() => setTheme('light')} label="Blanco" note="Para imprimir" />
              <OptionChoice active={theme === 'dark'} onClick={() => setTheme('dark')} label="Negro" note="Para pantalla" />
            </ChoiceRow>

            {error && <div style={errorStyle}>{error}</div>}

            <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
              <button onClick={onClose} style={modalGhost}>Cancelar</button>
              <button onClick={doGenerate} style={modalPrimary}>
                Generar PDF
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
              </button>
            </div>
          </div>
        )}

        {step === 'generating' && (
          <div style={{ padding: '60px 28px', textAlign: 'center' }}>
            <div className="pdf-spinner" style={{
              width: 44, height: 44, margin: '0 auto 24px',
              border: '3px solid #2A2A28', borderTopColor: '#B50D21', borderRadius: '50%',
            }} />
            <div style={{
              fontFamily: 'Sora', fontWeight: 600, fontSize: 18, color: '#FFFFFF',
            }}>Generando tu catálogo…</div>
            <div style={{
              fontFamily: 'Sora', fontWeight: 300, fontSize: 13, color: '#B7B6B6', marginTop: 8,
            }}>Componiendo {wines.length} {wines.length === 1 ? 'ficha' : 'fichas'} en formato PDF.</div>
            <style>{`@keyframes pdfspin { to { transform: rotate(360deg); } } .pdf-spinner { animation: pdfspin 800ms linear infinite; }`}</style>
          </div>
        )}

        {step === 'done' && result && (
          <div style={{ padding: '36px 28px 28px', textAlign: 'center' }}>
            <div style={{
              width: 52, height: 52, margin: '0 auto 20px',
              background: 'var(--comesa-red)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4"><path d="M5 13l4 4L19 7" /></svg>
            </div>
            <h2 style={{
              fontFamily: 'Sora', fontWeight: 600, fontSize: 24, color: '#FFFFFF', margin: '0 0 6px',
            }}>Catálogo listo</h2>
            <p style={{
              fontFamily: 'Sora', fontWeight: 300, fontSize: 13, color: '#B7B6B6', margin: '0 auto 26px', maxWidth: 380,
            }}>{result.pageCount} páginas · {result.filename}</p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <button onClick={download} style={{ ...modalPrimary, width: '100%', justifyContent: 'center' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" /></svg>
                Descargar PDF
              </button>
              <div style={{ display: 'flex', gap: 12 }}>
                <button onClick={share} style={{ ...modalSecondary, flex: 1 }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13" /></svg>
                  Compartir
                </button>
                <button onClick={createAnother} style={{ ...modalGhost, flex: 1 }}>
                  Crear otro
                </button>
              </div>
            </div>

            {shareMsg && (
              <div style={{
                marginTop: 18, fontFamily: 'Sora', fontWeight: 300, fontSize: 12,
                color: '#B7B6B6', lineHeight: 1.5, textAlign: 'left',
                background: '#161616', border: '1px solid #2A2A28', padding: '12px 14px',
              }}>{shareMsg}</div>
            )}
          </div>
        )}
      </div>
      <style>{`@keyframes pdfIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } to { opacity: 1; transform: translate(-50%, -50%); } }`}</style>
    </>
  );
};

const Field = ({ label, optional, children }) => (
  <div style={{ marginBottom: 18 }}>
    <label style={{
      display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8,
      fontFamily: 'Sora', fontWeight: 500, fontSize: 11,
      letterSpacing: '0.14em', textTransform: 'uppercase', color: '#565555',
    }}>
      {label}
      {optional && <span style={{ fontWeight: 300, fontSize: 10, letterSpacing: '0.06em', color: '#3A3A38' }}>opcional</span>}
    </label>
    {children}
  </div>
);

const ChoiceRow = ({ label, children }) => (
  <div style={{ marginTop: 6, marginBottom: 18 }}>
    <div style={{
      fontFamily: 'Sora', fontWeight: 500, fontSize: 11,
      letterSpacing: '0.14em', textTransform: 'uppercase', color: '#565555', marginBottom: 10,
    }}>{label}</div>
    <div style={{ display: 'flex', gap: 10 }}>{children}</div>
  </div>
);

const OptionChoice = ({ active, onClick, label, note }) => (
  <button onClick={onClick} style={{
    flex: 1, textAlign: 'left', cursor: 'pointer',
    background: active ? 'rgba(181,13,33,0.12)' : '#161616',
    border: '1px solid ' + (active ? 'var(--comesa-red)' : '#2A2A28'),
    padding: '13px 15px', transition: 'border-color 140ms, background-color 140ms',
  }}>
    <div style={{
      fontFamily: 'Sora', fontWeight: 600, fontSize: 13,
      color: active ? '#FFFFFF' : '#EFEDED',
    }}>{label}</div>
    <div style={{
      fontFamily: 'Sora', fontWeight: 300, fontSize: 11,
      color: active ? '#B50D21' : '#565555', marginTop: 3,
    }}>{note}</div>
  </button>
);

const inputStyle = {
  width: '100%', background: '#161616', border: '1px solid #3A3A38', color: '#FFFFFF',
  fontFamily: 'Sora', fontWeight: 300, fontSize: 14, padding: '11px 14px', outline: 'none',
};
const errorStyle = {
  marginTop: 18, fontFamily: 'Sora', fontWeight: 400, fontSize: 12,
  color: '#FFB4B4', background: 'rgba(181,13,33,0.12)', border: '1px solid #B50D21',
  padding: '10px 14px',
};
const modalPrimary = {
  flex: 1, background: 'var(--comesa-red)', border: '1px solid var(--comesa-red)', color: '#fff',
  fontFamily: 'Sora', fontWeight: 600, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
  padding: '14px 18px', cursor: 'pointer',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
};
const modalSecondary = {
  background: '#1D1D1B', border: '1px solid #3A3A38', color: '#EFEDED',
  fontFamily: 'Sora', fontWeight: 600, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
  padding: '14px 18px', cursor: 'pointer',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
};
const modalGhost = {
  background: 'transparent', border: '1px solid #3A3A38', color: '#B7B6B6',
  fontFamily: 'Sora', fontWeight: 600, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
  padding: '14px 18px', cursor: 'pointer',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
};

window.PdfBuilder = PdfBuilder;