/* ============================================================
   KeS Metas — Agendamentos (reuniões + Google Agenda central)
   ============================================================ */
const { useState, useEffect } = React;

/* Banner da conta CENTRAL da KeS (uma agenda para toda a equipe). */
function GoogleBanner({ google, dispatch }) {
  const K = window.KES;
  const [busy, setBusy] = useState(false);
  async function connect() {
    setBusy(true);
    // // AQUI: integrar com Google Calendar API — OAuth da conta central da KeS
    const res = await K.GoogleCalendarService.connect();
    setBusy(false);
    dispatch({ type: "SET_GOOGLE", connected: res.connected });
    dispatch({ type: "TOAST", msg: "Google Agenda da KeS conectado com sucesso." });
  }
  async function disconnect() {
    setBusy(true);
    await K.GoogleCalendarService.disconnect();
    setBusy(false);
    dispatch({ type: "SET_GOOGLE", connected: false });
  }
  return (
    <div className="card card-pad" style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap", marginBottom: 18 }}>
      <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "#fff", display: "grid", placeItems: "center", flexShrink: 0 }}>
        <GoogleG size={24} />
      </div>
      <div style={{ flex: 1, minWidth: 200 }}>
        <div style={{ fontWeight: 700, fontSize: 14.5, display: "flex", alignItems: "center", gap: 9 }}>
          Google Agenda da KeS Assessoria
          {google.connected
            ? <Badge tone="ok" icon="check">Conectado</Badge>
            : <Badge tone="warn" icon="alert">Não conectado</Badge>}
        </div>
        <div style={{ fontSize: 12.5, color: "var(--fg2)", marginTop: 3 }}>
          {google.connected
            ? <>Conta central <strong>{google.account}</strong>. Toda a equipe agenda nesta agenda — cada evento registra quem agendou.</>
            : <>Conecte a conta central <strong>{google.account}</strong> para sincronizar os agendamentos da equipe.</>}
        </div>
      </div>
      {google.connected
        ? <Btn variant="subtle" size="sm" onClick={disconnect} disabled={busy}>{busy ? "Desconectando…" : "Desconectar"}</Btn>
        : <button className="gbtn" onClick={connect} disabled={busy}><GoogleG size={18} />{busy ? "Conectando…" : "Conectar agenda da KeS"}</button>}
    </div>
  );
}

const MESES_ABREV = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];

function MeetingRow({ m, autor, onDelete }) {
  const K = window.KES;
  const d = K.parseISO(m.date);
  return (
    <div className="meeting-row">
      <div className="meeting-date">
        <div className="d">{String(d.getDate()).padStart(2, "0")}</div>
        <div className="m">{MESES_ABREV[d.getMonth()]}</div>
      </div>
      <div className="meeting-info">
        <div style={{ display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap" }}>
          <span className="mt">{m.titulo}</span>
          {m.googleSynced
            ? <Badge tone="sync" icon="cloudCheck">Na agenda da KeS</Badge>
            : <Badge tone="warn" icon="refresh">Pendente</Badge>}
        </div>
        <div className="ms">
          <span><Icon name="clock" size={13} />{m.hora} · {m.duracao} min</span>
          <span><Icon name="user" size={13} />{m.participante}</span>
          {m.convidados && m.convidados.length > 0 && <span><Icon name="users" size={13} />{m.convidados.length} convidado{m.convidados.length > 1 ? "s" : ""}</span>}
        </div>
        {autor && (
          <div className="meeting-author">
            <Avatar user={autor} size={22} />
            <span>Agendado por <strong>{autor.nome}</strong> · {autor.papel === "admin" ? "Administrador" : "Comercial"}</span>
          </div>
        )}
        {m.meetLink && (
          <a href={m.meetLink} target="_blank" rel="noreferrer" className="meetlink" style={{ marginTop: 6 }} onClick={(e) => e.stopPropagation()}>
            <Icon name="video" size={14} />{m.meetLink.replace("https://", "")}
          </a>
        )}
        {m.observacoes ? <div style={{ fontSize: 12.5, color: "var(--fg3)", marginTop: 5 }}>{m.observacoes}</div> : null}
      </div>
      {onDelete && (
        <button className="iconbtn" onClick={onDelete} title="Excluir" style={{ alignSelf: "center" }}><Icon name="trash" size={17} /></button>
      )}
    </div>
  );
}

function AgendaScreen({ state, dispatch, viewer }) {
  const K = window.KES;
  const isAdmin = viewer.papel === "admin";
  const usersById = {}; state.users.forEach((u) => { usersById[u.id] = u; });
  const google = state.google;

  // "autor" = quem está agendando. Admin pode agendar em nome de qualquer um.
  const [autorId, setAutorId] = useState(viewer.id);
  const autor = state.users.find((u) => u.id === autorId) || viewer;

  const todayISO = K.iso(K.SIM_TODAY);
  const newBlank = () => ({ titulo: "", date: todayISO, hora: "09:00", duracao: "30", participante: "", contexto: "", observacoes: "", meetLink: "", convidados: [], leadId: null });
  const [form, setForm] = useState(newBlank);
  const [guestInput, setGuestInput] = useState("");
  const [syncing, setSyncing] = useState(false);
  const [err, setErr] = useState("");
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  // Pré-preenche a partir de um lead do CRM (ação "Agendar reunião").
  useEffect(() => {
    const lead = state.agendaPrefill;
    if (!lead) return;
    if (isAdmin && lead.responsavelId) setAutorId(lead.responsavelId);
    const ctx = [
      lead.empresa && `Empresa: ${lead.empresa}`,
      lead.porte && `Porte: ${lead.porte}`,
      lead.telefone && `Tel: ${lead.telefone}`,
      lead.valor && `Oportunidade: ${K.fmtMoeda(lead.valor)}`,
    ].filter(Boolean).join(" · ");
    setForm({
      titulo: `Reunião — ${lead.empresa || lead.nome}`,
      date: todayISO, hora: "09:00", duracao: "30",
      participante: `${lead.nome}${lead.empresa ? " (" + lead.empresa + ")" : ""}`,
      contexto: ctx,
      observacoes: lead.observacoes || "",
      meetLink: "",
      convidados: lead.email ? [lead.email] : [],
      leadId: lead.id,
    });
    dispatch({ type: "CLEAR_PREFILL" });
    dispatch({ type: "TOAST", msg: `Agendando reunião com ${lead.nome}.` });
  }, [state.agendaPrefill]);

  function addGuest(v) {
    const e = v.trim().toLowerCase();
    if (!e) return;
    if (!/^\S+@\S+\.\S+$/.test(e)) { setErr("E-mail de convidado inválido."); return; }
    if (!form.convidados.includes(e)) set("convidados", [...form.convidados, e]);
    setGuestInput(""); setErr("");
  }

  async function submit(e) {
    e.preventDefault();
    if (!form.titulo.trim()) { setErr("Informe o título da reunião."); return; }
    if (!form.participante.trim()) { setErr("Informe o participante/contato."); return; }
    setErr(""); setSyncing(true);
    const meeting = {
      id: "m" + Date.now(), userId: autor.id, autorNome: autor.nome, titulo: form.titulo.trim(),
      date: form.date, hora: form.hora, duracao: parseInt(form.duracao, 10),
      participante: form.participante.trim(), contexto: form.contexto.trim(), observacoes: form.observacoes.trim(),
      meetLink: form.meetLink, convidados: form.convidados, leadId: form.leadId,
      calendar: google.account, googleSynced: false, eventId: null,
    };
    // // AQUI: integrar com Google Calendar API — events.insert na agenda CENTRAL da KeS
    // (descrição do evento inclui autor + contexto; attendees = convidados; conferenceData = Meet)
    let synced = { synced: false, eventId: null, meetLink: form.meetLink };
    if (google.connected) {
      const res = await K.GoogleCalendarService.createEvent(autor, meeting);
      synced = { synced: res.synced, eventId: res.eventId, meetLink: res.meetLink || form.meetLink };
    }
    meeting.googleSynced = synced.synced; meeting.eventId = synced.eventId; meeting.meetLink = synced.meetLink;
    dispatch({ type: "ADD_MEETING", meeting });
    setSyncing(false); setForm(newBlank()); setGuestInput("");
    dispatch({ type: "TOAST", msg: google.connected ? "Reunião criada na agenda da KeS e convites enviados." : "Reunião criada (sincronização pendente — conecte a agenda da KeS)." });
  }

  // Exclui a reunião do sistema E do Google Agenda da KeS.
  async function excluirReuniao(m) {
    dispatch({ type: "DELETE_MEETING", id: m.id });
    if (m.eventId && google.connected) {
      const res = await K.GoogleCalendarService.deleteEvent(m.eventId);
      dispatch({ type: "TOAST", msg: res.ok ? "Reunião excluída da agenda da KeS." : "Reunião removida aqui (não foi possível excluir do Google)." });
    } else {
      dispatch({ type: "TOAST", msg: "Reunião excluída." });
    }
  }

  // Admin vê todas as próximas reuniões da equipe; comum vê só as suas.
  const upcoming = state.meetings
    .filter((m) => (isAdmin || m.userId === viewer.id) && m.date >= todayISO)
    .sort((a, b) => (a.date + a.hora).localeCompare(b.date + b.hora));

  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl">
          <h1>Agendamentos</h1>
          <p>Uma agenda central da KeS para toda a equipe. Cada reunião registra quem agendou e alimenta o indicador "Reuniões Agendadas".</p>
        </div>
      </div>

      <GoogleBanner google={google} dispatch={dispatch} />

      <div className="agenda-layout">
        {/* Lista */}
        <div className="card">
          <div style={{ padding: "18px 20px 6px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <h3 style={{ margin: 0, fontSize: "var(--text-lg)" }}>{isAdmin ? "Próximas reuniões da equipe" : "Suas próximas reuniões"}</h3>
            <Badge tone="muted">{upcoming.length}</Badge>
          </div>
          {upcoming.length === 0 ? (
            <div className="empty"><Icon name="calendar" size={40} /><div style={{ fontWeight: 700 }}>Nenhuma reunião futura</div><div style={{ fontSize: 13 }}>Crie a primeira no formulário ao lado.</div></div>
          ) : (
            <div>{upcoming.map((m) => <MeetingRow key={m.id} m={m} autor={usersById[m.userId]} onDelete={() => excluirReuniao(m)} />)}</div>
          )}
        </div>

        {/* Form */}
        <form className="card card-pad" onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 20 }}>
          <h3 style={{ margin: 0, fontSize: "var(--text-lg)" }}>Nova reunião</h3>
          {isAdmin && (
            <Field label="Agendar em nome de">
              <select className="field" value={autorId} onChange={(e) => setAutorId(e.target.value)}>
                {state.users.map((u) => <option key={u.id} value={u.id}>{u.nome}{u.id === viewer.id ? " (você)" : ""}</option>)}
              </select>
            </Field>
          )}
          <Field label="Título"><input className="field" placeholder="Ex.: Reunião — Cliente X" value={form.titulo} onChange={(e) => set("titulo", e.target.value)} /></Field>
          <div className="form-row">
            <Field label="Data"><input type="date" className="field" value={form.date} onChange={(e) => set("date", e.target.value)} /></Field>
            <Field label="Horário"><input type="time" className="field" value={form.hora} onChange={(e) => set("hora", e.target.value)} /></Field>
          </div>
          <Field label="Duração">
            <select className="field" value={form.duracao} onChange={(e) => set("duracao", e.target.value)}>
              <option value="15">15 minutos</option><option value="30">30 minutos</option>
              <option value="45">45 minutos</option><option value="60">1 hora</option><option value="90">1h30</option>
            </select>
          </Field>
          <Field label="Participante / contato"><input className="field" placeholder="Nome (empresa)" value={form.participante} onChange={(e) => set("participante", e.target.value)} /></Field>
          <Field label="Contexto do contato"><input className="field" placeholder="Empresa, porte, telefone, oportunidade…" value={form.contexto} onChange={(e) => set("contexto", e.target.value)} /></Field>
          <Field label="Convidados (e-mails)">
            <div className="tagedit">
              {form.convidados.map((g) => (
                <span key={g} className="guest"><span className="av">{g[0].toUpperCase()}</span>{g}<button type="button" onClick={() => set("convidados", form.convidados.filter((x) => x !== g))}><Icon name="x" size={13} /></button></span>
              ))}
              <input className="field" style={{ flex: 1, minWidth: 150 }} type="email" placeholder="email@convidado.com + Enter"
                value={guestInput} onChange={(e) => setGuestInput(e.target.value)}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addGuest(guestInput); } }} />
            </div>
          </Field>
          <Field label="Link da reunião (Google Meet)">
            <div className="field" style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--fg2)" }}>
              <Icon name="video" size={16} />
              <span style={{ fontSize: 13 }}>O link do Google Meet é criado automaticamente pelo Google ao agendar.</span>
            </div>
          </Field>
          <Field label="Observações" error={err || null}><textarea className="field" placeholder="Notas, pauta, link…" value={form.observacoes} onChange={(e) => set("observacoes", e.target.value)} /></Field>
          <Btn type="submit" variant="primary" disc disabled={syncing} className="btn-block">
            {syncing ? "Sincronizando com a agenda da KeS…" : "Agendar reunião"}
          </Btn>
          <p className="muted" style={{ fontSize: 11.5, margin: 0, textAlign: "center", display: "flex", gap: 6, justifyContent: "center", alignItems: "center" }}>
            <Icon name="cloudCheck" size={14} /> Evento na agenda da KeS, agendado por {autor.nome.split(" ")[0]}.
          </p>
        </form>
      </div>
    </div>
  );
}

window.AgendaScreen = AgendaScreen;