// Side drawers: AppointmentDrawer + PersonDrawer
const { useState, useEffect, useRef } = React;

// --- Appointment drawer -----------------------------------------------------
function AppointmentDrawer({ appt, store, onClose, openPerson }) {
  const [form, setForm] = useState(appt);
  const [savedFlash, setSavedFlash] = useState(false);
  const [showTemplates, setShowTemplates] = useState(false);
  const [showHistory, setShowHistory] = useState(false);
  const mountedRef = useRef(false);

  useEffect(() => { setForm(appt); mountedRef.current = false; }, [appt?.id]);

  // Debounced auto-save: every time form changes (after initial mount), save to store
  useDebouncedEffect(() => {
    if (!mountedRef.current) { mountedRef.current = true; return; }
    if (!appt?.id) return;
    // Only save fields that changed
    const patch = {};
    for (const k of Object.keys(form)) {
      if (form[k] !== appt[k]) patch[k] = form[k];
    }
    if (Object.keys(patch).length > 0) {
      store.updateAppointment(appt.id, patch);
      setSavedFlash(true);
      setTimeout(() => setSavedFlash(false), 1200);
    }
  }, [form], 700);

  if (!appt) return null;
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const person = store.data.people.find(p => p.id === form.personId);

  const remove = () => {
    if (confirm("Excluir este agendamento?")) {
      store.deleteAppointment(appt.id);
      onClose();
    }
  };

  // Quick note append
  const [quickNote, setQuickNote] = useState("");
  const appendNote = () => {
    if (!quickNote.trim()) return;
    const stamp = new Date().toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
    const next = (form.notes ? form.notes + "\n\n" : "") + `[${stamp}] ${quickNote.trim()}`;
    set("notes", next);
    setQuickNote("");
  };

  // Apply template
  const applyTemplate = (key) => {
    const tpl = NOTE_TEMPLATES[key];
    if (!tpl) return;
    const next = form.notes ? form.notes + "\n\n— " + tpl.label + " —\n" + tpl.body : tpl.body;
    set("notes", next);
    setShowTemplates(false);
  };

  // WhatsApp generator
  const waLink = person ? buildWhatsAppLink(person, form) : null;

  // Audit log entries (most recent first)
  const auditEntries = (form.audit || []).slice().reverse();

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <header className="drawer-head">
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <Pill tone="accent">{form.type}</Pill>
            <Pill tone={statusTone(form.status)}>
              <Dot color={STATUS_META[form.status]?.dot} />{STATUS_META[form.status]?.label}
            </Pill>
            {savedFlash && <Pill tone="success"><Icon name="check" size={11} /> salvo</Pill>}
          </div>
          <button className="icon-btn" onClick={onClose} title="Fechar (Esc)"><Icon name="x" /></button>
        </header>

        <div className="drawer-body">
          <input className="drawer-title" value={form.title} onChange={e => set("title", e.target.value)} placeholder="Título do atendimento" />
          <div className="drawer-meta">
            <span>{new Date(form.date + "T00:00:00").toLocaleDateString("pt-BR", { weekday: "long", day: "2-digit", month: "long" })}</span>
            <span className="dim">·</span>
            <span className="tabular">{form.time}</span>
            <span className="dim">·</span>
            <span>{form.duration} min</span>
            {form.price > 0 && (<><span className="dim">·</span><span className="tabular">{formatBRL(form.price)}</span></>)}
            {person && (<><span className="dim">·</span><button className="link" onClick={() => openPerson(person)}>{person.name}</button></>)}
          </div>

          {/* Quick actions */}
          <div className="drawer-actions">
            {waLink ? (
              <a className="btn btn-ghost small" href={waLink} target="_blank">
                <Icon name="whatsapp" size={13} /> WhatsApp
              </a>
            ) : (
              <button className="btn btn-ghost small" disabled title="Cadastre um telefone para a pessoa"><Icon name="whatsapp" size={13} /> WhatsApp</button>
            )}
            {(form.location || "").includes("meet.google.com") && (
              <a className="btn btn-ghost small" href={form.location} target="_blank">
                <Icon name="video" size={13} /> Abrir Meet
              </a>
            )}
            {form.status !== "confirmado" && form.status !== "realizado" && (
              <button className="btn btn-ghost small" onClick={() => set("status", "confirmado")}>
                <Icon name="check" size={13} /> Marcar confirmado
              </button>
            )}
            {form.status !== "realizado" && (
              <button className="btn btn-ghost small" onClick={() => set("status", "realizado")}>
                <Icon name="check" size={13} /> Marcar realizado
              </button>
            )}
          </div>

          <section className="drawer-section">
            <div className="drawer-section-title" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <span>Anotação rápida</span>
              <button className="link small" onClick={() => setShowTemplates(s => !s)}>{showTemplates ? "fechar modelos" : "+ usar modelo"}</button>
            </div>
            {showTemplates && (
              <div className="template-row">
                {Object.entries(NOTE_TEMPLATES).map(([key, tpl]) => (
                  <button key={key} className="template-chip" onClick={() => applyTemplate(key)}>{tpl.label}</button>
                ))}
              </div>
            )}
            <div className="drawer-quick">
              <textarea
                rows="2"
                placeholder="Anote algo agora — fica com data e hora."
                value={quickNote}
                onChange={e => setQuickNote(e.target.value)}
                onKeyDown={e => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") appendNote(); }}
              />
              <div className="drawer-quick-foot">
                <span className="dim small">⌘+Enter para adicionar</span>
                <Button onClick={appendNote} disabled={!quickNote.trim()}>+ Adicionar nota</Button>
              </div>
            </div>
            <Field label="Anotações da sessão" full hint="Cresce com o tempo — adicione retornos, próximos passos, observações.">
              <textarea rows="6" value={form.notes || ""} onChange={e => set("notes", e.target.value)} placeholder="Você pode preencher depois — anote o que aconteceu, próximos passos, pontos a retomar..." />
            </Field>
          </section>

          <section className="drawer-section">
            <div className="drawer-section-title">Detalhes</div>
            <div className="form-grid">
              <Field label="Status">
                <select value={form.status} onChange={e => set("status", e.target.value)}>
                  {Object.entries(STATUS_META).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
                </select>
              </Field>
              <Field label="Tipo">
                <select value={form.type} onChange={e => set("type", e.target.value)}>
                  {Object.keys(TYPE_META).map(t => <option key={t}>{t}</option>)}
                </select>
              </Field>
              <Field label="Data"><input type="date" value={form.date} onChange={e => set("date", e.target.value)} /></Field>
              <Field label="Horário"><input type="time" value={form.time} onChange={e => set("time", e.target.value)} /></Field>
              <Field label="Duração (min)"><input type="number" min="10" step="5" value={form.duration} onChange={e => set("duration", Number(e.target.value))} /></Field>
              <Field label="Valor (R$)"><input type="number" min="0" step="10" value={form.price || 0} onChange={e => set("price", Number(e.target.value))} /></Field>
              <Field label="Pessoa">
                <select value={form.personId || ""} onChange={e => set("personId", e.target.value)}>
                  <option value="">— sem pessoa —</option>
                  {store.data.people.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                </select>
              </Field>
              <Field label="Lembrete (min antes)">
                <select value={form.reminder || 0} onChange={e => set("reminder", Number(e.target.value))}>
                  <option value={0}>Sem lembrete</option>
                  <option value={10}>10 minutos</option>
                  <option value={15}>15 minutos</option>
                  <option value={30}>30 minutos</option>
                  <option value={60}>1 hora</option>
                </select>
              </Field>
              <Field label="Local / link" full>
                <input value={form.location || ""} onChange={e => set("location", e.target.value)} placeholder="https://meet.google.com/... ou endereço" />
              </Field>
            </div>
          </section>

          <section className="drawer-section">
            <div className="drawer-section-title" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <span><Icon name="history" size={12} /> Histórico ({auditEntries.length})</span>
              {auditEntries.length > 0 && <button className="link small" onClick={() => setShowHistory(s => !s)}>{showHistory ? "ocultar" : "ver"}</button>}
            </div>
            {showHistory && auditEntries.length > 0 && (
              <ol className="audit-list">
                {auditEntries.map((entry, i) => (
                  <li key={i} className="audit-item">
                    <span className="audit-time dim small tabular">{new Date(entry.at).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}</span>
                    <span className="audit-action"><strong>{entry.action}</strong>{entry.detail ? ` — ${entry.detail}` : ""}</span>
                  </li>
                ))}
              </ol>
            )}
            {auditEntries.length === 0 && <div className="dim small">Sem alterações registradas ainda.</div>}
          </section>
        </div>

        <footer className="drawer-foot">
          <Button variant="ghost" onClick={remove}><Icon name="trash" size={13} /> Excluir</Button>
          <div style={{ flex: 1 }} />
          <span className="dim small">Auto-salva enquanto você edita</span>
        </footer>
      </div>
    </div>
  );
}

// --- Person drawer (history of sessions, totals) ----------------------------
function PersonDrawer({ person, store, onClose, openAppt }) {
  const [form, setForm] = useState(person);
  const [savedFlash, setSavedFlash] = useState(false);
  const mountedRef = useRef(false);

  useEffect(() => { setForm(person); mountedRef.current = false; }, [person?.id]);

  useDebouncedEffect(() => {
    if (!mountedRef.current) { mountedRef.current = true; return; }
    if (!person?.id) return;
    const patch = {};
    for (const k of Object.keys(form)) if (form[k] !== person[k]) patch[k] = form[k];
    if (Object.keys(patch).length > 0) {
      store.updatePerson(person.id, patch);
      setSavedFlash(true);
      setTimeout(() => setSavedFlash(false), 1200);
    }
  }, [form], 700);

  if (!person) return null;
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const all = store.data.appointments.filter(a => a.personId === person.id);
  const sorted = all.slice().sort((a, b) => (b.date + b.time).localeCompare(a.date + a.time));
  const upcoming = sorted.filter(a => a.date >= TODAY_ISO && a.status !== "realizado" && a.status !== "cancelado");
  const past = sorted.filter(a => a.date < TODAY_ISO || a.status === "realizado" || a.status === "cancelado");
  const totalRev = all.filter(a => a.status === "realizado").reduce((acc, a) => acc + (Number(a.price) || store.data.settings.prices[a.type] || 0), 0);
  const projRev = all.filter(a => a.status === "agendado" || a.status === "confirmado").reduce((acc, a) => acc + (Number(a.price) || store.data.settings.prices[a.type] || 0), 0);

  const phone = (person.phone || "").replace(/\D/g, "");
  const waUrl = phone ? `https://wa.me/${phone.startsWith("55") ? phone : "55" + phone}` : null;

  const tone = form.tag === "Cliente" ? "success" : form.tag === "Lead quente" ? "accent" : form.tag === "Avaliando" ? "warn" : "default";

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer drawer-wide" onClick={e => e.stopPropagation()}>
        <header className="drawer-head">
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <Pill tone={tone}>{form.tag}</Pill>
            <span className="dim small">{form.source}</span>
            {savedFlash && <Pill tone="success"><Icon name="check" size={11} /> salvo</Pill>}
          </div>
          <button className="icon-btn" onClick={onClose} title="Fechar (Esc)"><Icon name="x" /></button>
        </header>

        <div className="drawer-body">
          <input className="drawer-title" value={form.name} onChange={e => set("name", e.target.value)} placeholder="Nome" />

          <div className="person-stats">
            <div className="person-stat">
              <div className="dim small">Total de sessões</div>
              <div className="person-stat-val tabular">{all.length}</div>
            </div>
            <div className="person-stat">
              <div className="dim small">Realizadas</div>
              <div className="person-stat-val tabular">{all.filter(a => a.status === "realizado").length}</div>
            </div>
            <div className="person-stat">
              <div className="dim small">Faturado</div>
              <div className="person-stat-val tabular">{formatBRL(totalRev)}</div>
            </div>
            <div className="person-stat">
              <div className="dim small">Projetado</div>
              <div className="person-stat-val tabular">{formatBRL(projRev)}</div>
            </div>
          </div>

          <div className="drawer-actions">
            {waUrl && <a className="btn btn-ghost small" href={waUrl} target="_blank"><Icon name="whatsapp" size={13} /> WhatsApp</a>}
            {form.email && <a className="btn btn-ghost small" href={`mailto:${form.email}`}><Icon name="note" size={13} /> Email</a>}
          </div>

          <section className="drawer-section">
            <div className="drawer-section-title">Dados</div>
            <div className="form-grid">
              <Field label="Tag">
                <select value={form.tag} onChange={e => set("tag", e.target.value)}>
                  <option>Lead quente</option><option>Lead frio</option><option>Avaliando</option><option>Cliente</option>
                </select>
              </Field>
              <Field label="Origem">
                <select value={form.source} onChange={e => set("source", e.target.value)}>
                  <option>Instagram</option><option>YouTube</option><option>LinkedIn</option><option>WhatsApp</option><option>Indicação</option><option>Outro</option>
                </select>
              </Field>
              <Field label="WhatsApp"><input value={form.phone || ""} onChange={e => set("phone", e.target.value)} placeholder="11999999999" /></Field>
              <Field label="Email"><input type="email" value={form.email || ""} onChange={e => set("email", e.target.value)} /></Field>
              <Field label="Anotação" full>
                <textarea rows="3" value={form.note || ""} onChange={e => set("note", e.target.value)} placeholder="Contexto, dor, expectativa..." />
              </Field>
            </div>
          </section>

          {upcoming.length > 0 && (
            <section className="drawer-section">
              <div className="drawer-section-title">Próximas sessões ({upcoming.length})</div>
              <div className="person-sessions">
                {upcoming.map(a => <PersonSessionRow key={a.id} a={a} onOpen={openAppt} />)}
              </div>
            </section>
          )}

          {past.length > 0 && (
            <section className="drawer-section">
              <div className="drawer-section-title">Histórico ({past.length})</div>
              <div className="person-sessions">
                {past.map(a => <PersonSessionRow key={a.id} a={a} onOpen={openAppt} />)}
              </div>
            </section>
          )}

          {all.length === 0 && (
            <section className="drawer-section">
              <EmptyState icon={<Icon name="today" size={28} />} title="Nenhuma sessão registrada ainda" />
            </section>
          )}
        </div>

        <footer className="drawer-foot">
          <Button variant="ghost" onClick={() => { if (confirm(`Excluir ${person.name}?`)) { store.deletePerson(person.id); onClose(); } }}>
            <Icon name="trash" size={13} /> Excluir contato
          </Button>
          <div style={{ flex: 1 }} />
          <span className="dim small">Auto-salva</span>
        </footer>
      </div>
    </div>
  );
}

function PersonSessionRow({ a, onOpen }) {
  const status = STATUS_META[a.status] || STATUS_META.agendado;
  const type = TYPE_META[a.type];
  return (
    <div className="person-session clickable" onClick={() => onOpen && onOpen(a)}>
      <span className="appt-type-bar" style={{ background: type?.hue || "var(--c-fg-soft)" }} />
      <div className="person-session-body">
        <div>
          <div className="person-session-date dim small tabular">
            {new Date(a.date + "T00:00:00").toLocaleDateString("pt-BR", { day: "2-digit", month: "short", year: "2-digit" })} · {a.time}
          </div>
          <div className="person-session-title">{a.title}</div>
        </div>
        <Pill tone={statusTone(a.status)}><Dot color={status.dot} />{status.label}</Pill>
      </div>
    </div>
  );
}

Object.assign(window, { AppointmentDrawer, PersonDrawer });