// Small month calendar — pick a single day (today or future)
function MiniCalendar({ value, onChange }) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const [view, setView] = React.useState(() => new Date(today.getFullYear(), today.getMonth(), 1));

  const MONTHS = ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'];
  const DOW = ['Lun','Mar','Mer','Gio','Ven','Sab','Dom'];

  const year = view.getFullYear();
  const month = view.getMonth();
  const firstDay = new Date(year, month, 1);
  // JS: 0=Sun..6=Sat -> shift so Monday is first
  const startOffset = (firstDay.getDay() + 6) % 7;
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const cells = [];
  for (let i = 0; i < startOffset; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d));

  const sameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
  const selected = value ? new Date(value) : null;

  // Don't allow navigating before current month
  const atCurrentMonth = year === today.getFullYear() && month === today.getMonth();

  const fmt = (d) => `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}/${d.getFullYear()}`;

  return (
    <div className="cal">
      <div className="cal-head">
        <button type="button" className="cal-nav" disabled={atCurrentMonth} onClick={() => setView(new Date(year, month - 1, 1))} aria-label="Mese precedente">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
        </button>
        <span className="cal-title">{MONTHS[month]} {year}</span>
        <button type="button" className="cal-nav" onClick={() => setView(new Date(year, month + 1, 1))} aria-label="Mese successivo">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </button>
      </div>
      <div className="cal-dow">
        {DOW.map((d) => <span key={d}>{d}</span>)}
      </div>
      <div className="cal-grid">
        {cells.map((d, i) => {
          if (!d) return <span key={i} className="cal-cell empty"></span>;
          const past = d < today;
          const isToday = sameDay(d, today);
          const isSel = sameDay(d, selected);
          return (
            <button
              type="button"
              key={i}
              className={"cal-cell" + (isSel ? " sel" : "") + (isToday ? " today" : "")}
              disabled={past}
              onClick={() => onChange(fmt(d))}
            >
              {d.getDate()}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function ScheduleModal({ open, onClose }) {
  const empty = { nome: '', azienda: '', email: '', telefono: '', data: '', note: '' };
  const [form, setForm] = React.useState(empty);
  const [status, setStatus] = React.useState('idle'); // idle | sending | done | error
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  React.useEffect(() => {
    if (open) { setStatus('idle'); setForm(empty); }
  }, [open]);

  if (!open) return null;

  const buildMailto = () => {
    const subject = encodeURIComponent('Richiesta call — Controllo Prezzi' + (form.azienda ? ' · ' + form.azienda : ''));
    const body = encodeURIComponent([
      'Richiesta di una call con un consulente SMNET per Controllo Prezzi.', '',
      'Nome: ' + (form.nome || '—'),
      'Azienda: ' + (form.azienda || '—'),
      'Email: ' + (form.email || '—'),
      'Telefono: ' + (form.telefono || '—'),
      'Giorno preferito: ' + (form.data || '—'), '',
      'Note:', form.note || '—',
    ].join('\n'));
    return `mailto:info@smnet.it?subject=${subject}&body=${body}`;
  };

  const submit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('https://formsubmit.co/ajax/info@smnet.it', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          _subject: 'Richiesta call — Controllo Prezzi' + (form.azienda ? ' · ' + form.azienda : ''),
          Nome: form.nome,
          Azienda: form.azienda || '—',
          Email: form.email,
          Telefono: form.telefono || '—',
          'Giorno preferito': form.data || '—',
          Note: form.note || '—',
        }),
      });
      if (!res.ok) throw new Error('bad status');
      setStatus('done');
    } catch (err) {
      setStatus('error');
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" role="dialog" aria-modal="true" aria-label="Schedula una call" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="modal-close" onClick={onClose} aria-label="Chiudi">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>
        </button>

        {status === 'done' ? (
          <div className="modal-success">
            <div className="success-mark"><Icon.Check size={34}/></div>
            <h3 className="h-card" style={{ fontSize: 24 }}>Richiesta inviata</h3>
            <p style={{ fontSize: 14.5, marginTop: 8 }}>Grazie! Abbiamo ricevuto la tua richiesta e ti ricontatteremo a breve per confermare la call{form.data ? ' del ' + form.data : ''}.</p>
            <button type="button" className="btn btn-primary" style={{ marginTop: 24 }} onClick={onClose}>Chiudi</button>
          </div>
        ) : (
          <>
            <div className="modal-head">
              <span className="eyebrow">Parla con un consulente</span>
              <h3 className="h-card" style={{ fontSize: 26, marginTop: 12 }}>Schedula una call</h3>
              <p style={{ fontSize: 14.5, marginTop: 8 }}>Scegli il giorno che preferisci e lasciaci i tuoi dati. La richiesta viene inviata direttamente a <strong style={{ color: 'var(--ink)' }}>info@smnet.it</strong>.</p>
            </div>
            <form className="modal-form" onSubmit={submit}>
              <div className="field-row">
                <label className="field">
                  <span>Nome e cognome *</span>
                  <input type="text" required value={form.nome} onChange={set('nome')} placeholder="Mario Rossi" />
                </label>
                <label className="field">
                  <span>Azienda</span>
                  <input type="text" value={form.azienda} onChange={set('azienda')} placeholder="Nome punto vendita" />
                </label>
              </div>
              <div className="field-row">
                <label className="field">
                  <span>Email *</span>
                  <input type="email" required value={form.email} onChange={set('email')} placeholder="nome@azienda.it" />
                </label>
                <label className="field">
                  <span>Telefono</span>
                  <input type="tel" value={form.telefono} onChange={set('telefono')} placeholder="+39 ..." />
                </label>
              </div>
              <div className="field">
                <span>Giorno preferito {form.data && <strong style={{ color: 'var(--accent)' }}>· {form.data}</strong>}</span>
                <MiniCalendar value={form.data} onChange={(d) => setForm((f) => ({ ...f, data: d }))} />
              </div>
              <label className="field">
                <span>Note</span>
                <textarea rows="3" value={form.note} onChange={set('note')} placeholder="Raccontaci cosa ti serve..."></textarea>
              </label>
              {status === 'error' && (
                <div className="form-error">
                  Invio diretto non disponibile al momento. Usa il pulsante qui sotto per inviare la richiesta via email.
                  <a className="btn btn-primary" href={buildMailto()} onClick={() => setStatus('done')} style={{ marginTop: 12 }}>
                    <Icon.Mail size={16}/> Invia via email
                  </a>
                </div>
              )}
              <div className="modal-actions">
                <button type="button" className="btn btn-ghost" onClick={onClose} disabled={status === 'sending'}>Annulla</button>
                <button type="submit" className="btn btn-primary" disabled={status === 'sending'}>
                  {status === 'sending' ? 'Invio in corso…' : <><Icon.Mail size={16}/> Invia richiesta</>}
                </button>
              </div>
            </form>
          </>
        )}
      </div>
    </div>
  );
}
window.ScheduleModal = ScheduleModal;