/* ============================================================
   KeS Metas — Tarefas (agenda de afazeres da equipe)
   - Padrão: tarefas de hoje + amanhã
   - Atrasadas (vencidas e não concluídas) sempre aparecem
   - Filtro de datas para ver tarefas anteriores
   - Permissão: líder/admin veem todas; comum vê só as próprias
   ============================================================ */
const { useState, useRef, useEffect } = React;

/* ---- Períodos do filtro de tarefas (inclui datas futuras) ---- */
function rangePreset(name) {
  const K = window.KES;
  const iso = K.iso;
  const today = new Date(K.iso(K.SIM_TODAY) + "T00:00:00");
  if (name === "hoje") return { preset: "hoje", start: iso(today), end: iso(today), label: "Hoje" };
  if (name === "hojeAmanha") return { preset: "hojeAmanha", start: iso(today), end: iso(K.addDays(today, 1)), label: "Hoje e amanhã" };
  if (name === "semana") {
    const dow = (today.getDay() + 6) % 7;        // 0 = segunda
    const s = K.addDays(today, -dow);
    return { preset: "semana", start: iso(s), end: iso(K.addDays(s, 6)), label: "Esta semana" };
  }
  if (name === "mes") {
    const s = new Date(today.getFullYear(), today.getMonth(), 1);
    const e = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    return { preset: "mes", start: iso(s), end: iso(e), label: "Este mês" };
  }
  if (name === "mesPassado") {
    const s = new Date(today.getFullYear(), today.getMonth() - 1, 1);
    const e = new Date(today.getFullYear(), today.getMonth(), 0);
    return { preset: "mesPassado", start: iso(s), end: iso(e), label: "Mês passado" };
  }
  return rangePreset("hojeAmanha");
}

/* ---- Filtro de período (mesmo visual dos painéis), com datas futuras ---- */
function FiltroPeriodoTarefas({ value, onChange }) {
  const K = window.KES;
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  const popRef = useRef(null);
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  // Mantém o popup dentro da tela em qualquer posição/tamanho.
  useEffect(() => {
    if (!open || !popRef.current) return;
    const el = popRef.current; el.style.transform = "";
    const r = el.getBoundingClientRect(); const m = 8; let dx = 0;
    if (r.right > window.innerWidth - m) dx = (window.innerWidth - m) - r.right;
    else if (r.left < m) dx = m - r.left;
    if (dx) el.style.transform = "translateX(" + Math.round(dx) + "px)";
  }, [open]);
  const atalhos = [["hojeAmanha", "Hoje e amanhã"], ["hoje", "Hoje"], ["semana", "Esta semana"], ["mes", "Este mês"], ["mesPassado", "Mês passado"]];
  const labelText = value.preset === "custom" ? `${K.fmtBR(value.start)} – ${K.fmtBR(value.end)}` : value.label;
  return (
    <div className="period" ref={ref}>
      <button className="period-trigger" onClick={() => setOpen((o) => !o)}>
        <Icon name="calendar" size={16} />{labelText}<Icon name="chevronDown" size={15} />
      </button>
      {open && (
        <div className="period-pop" ref={popRef}>
          <div className="period-shortcuts">
            {atalhos.map(([k, lbl]) => (
              <button key={k} className={"chip" + (value.preset === k ? " active" : "")}
                onClick={() => { onChange(rangePreset(k)); setOpen(false); }}>{lbl}</button>
            ))}
          </div>
          <div className="period-custom">
            <Field label="De"><input type="date" className="field" value={value.start} max={value.end}
              onChange={(e) => onChange({ ...value, preset: "custom", start: e.target.value, label: "Personalizado" })} /></Field>
            <Field label="Até"><input type="date" className="field" value={value.end} min={value.start}
              onChange={(e) => onChange({ ...value, preset: "custom", end: e.target.value, label: "Personalizado" })} /></Field>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---- Modal para criar/editar tarefa (reutilizável) ---- */
function TarefaModal({ initial, state, viewer, dispatch, onClose, leadFixo }) {
  const K = window.KES;
  const isAdmin = viewer.papel === "admin" || viewer.cargo === "lider";
  const editing = !!(initial && initial.id);
  const hojeISO = K.iso(K.SIM_TODAY);
  const [f, setF] = useState(initial || {
    titulo: "", descricao: "", data: hojeISO, hora: "09:00",
    responsavelId: viewer.id, leadId: leadFixo ? leadFixo.id : "",
  });
  const [err, setErr] = useState("");
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));

  function salvar() {
    if (!f.titulo.trim()) return setErr("Descreva a tarefa.");
    if (!f.data) return setErr("Escolha a data.");
    const dados = {
      titulo: f.titulo.trim(), descricao: (f.descricao || "").trim(),
      data: f.data, hora: f.hora || "", responsavelId: f.responsavelId || viewer.id,
      leadId: f.leadId || null, criadaPor: viewer.id,
    };
    if (editing) dispatch({ type: "UPDATE_TAREFA", id: initial.id, patch: dados });
    else dispatch({ type: "ADD_TAREFA", tarefa: dados });
    dispatch({ type: "TOAST", msg: editing ? "Tarefa atualizada." : "Tarefa agendada." });
    onClose();
  }

  const leadVinc = leadFixo || (f.leadId ? (state.leads || []).find((l) => l.id === f.leadId) : null);

  return (
    <Modal title={editing ? "Editar tarefa" : "Agendar tarefa"} onClose={onClose}
      footer={<><Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
        <Btn variant="primary" icon="check" onClick={salvar} disabled={!(f.titulo.trim() && f.data)}>{editing ? "Salvar" : "Agendar tarefa"}</Btn></>}>
      {leadVinc && (
        <div style={{ padding: "8px 12px", background: "var(--kes-navy-700)", borderRadius: "var(--radius-md)", fontSize: 12.5, marginBottom: 4 }}>
          <Icon name="funnel" size={13} /> Vinculada ao lead: <strong>{leadVinc.nome}</strong>{leadVinc.empresa ? " · " + leadVinc.empresa : ""}
        </div>
      )}
      <Field label="Tarefa" required><input className="field" value={f.titulo} onChange={(e) => set("titulo", e.target.value)} placeholder="Ex.: Ligar para o cliente, enviar proposta…" /></Field>
      <Field label="Detalhes (opcional)"><textarea className="field" style={{ minHeight: 60 }} value={f.descricao} onChange={(e) => set("descricao", e.target.value)} placeholder="Anotações da tarefa…" /></Field>
      <div className="form-row">
        <Field label="Data" required><input type="date" className="field" value={f.data} onChange={(e) => set("data", e.target.value)} /></Field>
        <Field label="Horário"><input type="time" className="field" value={f.hora} onChange={(e) => set("hora", e.target.value)} /></Field>
      </div>
      {/* Admin/líder pode atribuir a outra pessoa; comum cria só para si. */}
      {isAdmin ? (
        <Field label="Responsável">
          <select className="field" value={f.responsavelId} onChange={(e) => set("responsavelId", e.target.value)}>
            {(state.users || []).map((u) => <option key={u.id} value={u.id}>{u.nome}{u.id === viewer.id ? " (você)" : ""}</option>)}
          </select>
        </Field>
      ) : null}
      {!leadFixo && (
        <Field label="Vincular a um lead (opcional)">
          <select className="field" value={f.leadId} onChange={(e) => set("leadId", e.target.value)}>
            <option value="">— nenhum —</option>
            {(state.leads || []).filter((l) => isAdmin || l.responsavelId === viewer.id).map((l) => (
              <option key={l.id} value={l.id}>{l.nome}{l.empresa ? " · " + l.empresa : ""}</option>
            ))}
          </select>
        </Field>
      )}
      {err && <div className="form-err"><Icon name="alert" size={14} />{err}</div>}
    </Modal>
  );
}

/* ---- WhatsApp nas tarefas ---- */
// Link de WhatsApp a partir de um telefone (adiciona DDI 55 se faltar).
function waTarefa(tel) {
  const d = String(tel || "").replace(/\D/g, "");
  if (d.length < 10) return null;
  return "https://wa.me/" + (d.length <= 11 ? "55" + d : d);
}
// Deixa números de telefone no TEXTO clicáveis — 1 clique abre o WhatsApp.
function TextoComWhats({ texto }) {
  const s = String(texto || "");
  const re = /(\+?55[\s.-]?)?\(?\d{2}\)?[\s.-]?\d{4,5}[\s.-]?\d{4}/g;
  const partes = [];
  let last = 0, m;
  while ((m = re.exec(s))) {
    if (m.index > last) partes.push(s.slice(last, m.index));
    const link = waTarefa(m[0]);
    if (link) partes.push(
      <a key={"w" + m.index} href={link} target="_blank" rel="noreferrer" className="wa-fone"
        title="Abrir no WhatsApp" onClick={(e) => e.stopPropagation()}>{m[0]}</a>
    );
    else partes.push(m[0]);
    last = m.index + m[0].length;
  }
  if (last < s.length) partes.push(s.slice(last));
  return <>{partes}</>;
}

/* ---- Linha de uma tarefa ---- */
function TarefaRow({ t, usersById, leadsById, viewer, onToggle, onEdit, onDelete, atrasada }) {
  const K = window.KES;
  const resp = usersById[t.responsavelId];
  const lead = t.leadId ? leadsById[t.leadId] : null;
  const waLead = lead ? waTarefa(lead.telefone || lead.telefone2 || lead.telefone3) : null;
  const podeMexer = viewer.papel === "admin" || viewer.cargo === "lider" || t.responsavelId === viewer.id || t.criadaPor === viewer.id;
  return (
    <div style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "12px 14px", borderBottom: "1px solid var(--border-dark)", opacity: t.concluida ? 0.55 : 1 }}>
      <button onClick={() => podeMexer && onToggle(t)} title={t.concluida ? "Reabrir" : "Concluir"}
        style={{ background: "transparent", border: 0, cursor: podeMexer ? "pointer" : "default", padding: 0, marginTop: 1 }}>
        <Icon name={t.concluida ? "checkCircle" : "circle"} size={20} style={{ color: t.concluida ? "var(--ok)" : (atrasada ? "var(--kes-red-400)" : "var(--fg3)") }} />
      </button>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 13.5, textDecoration: t.concluida ? "line-through" : "none" }}><TextoComWhats texto={t.titulo} /></div>
        {t.descricao && <div className="muted" style={{ fontSize: 12, marginTop: 2 }}><TextoComWhats texto={t.descricao} /></div>}
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 5, fontSize: 11.5, color: atrasada ? "var(--kes-red-400)" : "var(--fg3)", alignItems: "center" }}>
          <span><Icon name="calendar" size={12} /> {K.fmtBR(t.data)}{t.hora ? " " + t.hora : ""}{atrasada ? " · atrasada" : ""}</span>
          {resp && <span><Icon name="user" size={12} /> {resp.nome}</span>}
          {lead && <span><Icon name="funnel" size={12} /> {lead.nome}{lead.empresa ? " · " + lead.empresa : ""}</span>}
          {/* Cliente vinculado com telefone → 1 clique abre a conversa no WhatsApp */}
          {waLead && (
            <a href={waLead} target="_blank" rel="noreferrer" className="wa-chamar" title={"Chamar " + lead.nome + " no WhatsApp"}
              onClick={(e) => e.stopPropagation()}>
              <Icon name="phone" size={12} /> WhatsApp · {lead.telefone || lead.telefone2 || lead.telefone3}
            </a>
          )}
        </div>
      </div>
      {podeMexer && (
        <div style={{ display: "flex", gap: 4 }}>
          <button className="iconbtn" title="Editar" onClick={() => onEdit(t)}><Icon name="pencil" size={15} /></button>
          <button className="iconbtn" title="Excluir" onClick={() => onDelete(t)} style={{ color: "var(--kes-red-400)" }}><Icon name="trash" size={15} /></button>
        </div>
      )}
    </div>
  );
}

/* ---- Tela de Tarefas ---- */
function TarefasScreen({ state, dispatch, viewer }) {
  const K = window.KES;
  const isGestor = viewer.papel === "admin" || viewer.cargo === "lider";
  const [modal, setModal] = useState(null);     // null | {} | tarefa
  const [periodo, setPeriodo] = useState(rangePreset("hojeAmanha")); // filtro de período (topo)
  const [verConcluidas, setVerConcluidas] = useState(false);         // mostrar/ocultar concluídas
  const [confirmDel, setConfirmDel] = useState(null); // tarefa a excluir

  const usersById = {}; (state.users || []).forEach((u) => { usersById[u.id] = u; });
  const leadsById = {}; (state.leads || []).forEach((l) => { leadsById[l.id] = l; });

  const hojeISO = K.iso(K.SIM_TODAY);
  const amanhaISO = K.iso(K.addDays(K.SIM_TODAY, 1));
  const dataDe = (t) => (t.data || "").slice(0, 10);

  // Permissão: gestor vê todas; comum vê só as suas (responsável ou criadas por ele).
  const minhas = (state.tarefas || []).filter((t) => isGestor || t.responsavelId === viewer.id || t.criadaPor === viewer.id);

  // Esconde concluídas por padrão; o filtro "Concluídas" revela.
  const vis = (lista) => verConcluidas ? lista : lista.filter((t) => !t.concluida);
  const ordHora = (a, b) => (a.hora || "").localeCompare(b.hora || "");
  const ordDataHora = (a, b) => (dataDe(a) + (a.hora || "")).localeCompare(dataDe(b) + (b.hora || ""));

  // Atrasadas: pendentes vencidas — sempre visíveis no topo até serem concluídas.
  const atrasadas = minhas.filter((t) => !t.concluida && dataDe(t) < hojeISO).sort(ordDataHora);

  const ehDefault = periodo.preset === "hojeAmanha";
  const hoje = vis(minhas.filter((t) => dataDe(t) === hojeISO)).sort(ordHora);
  const amanha = vis(minhas.filter((t) => dataDe(t) === amanhaISO)).sort(ordHora);
  const noPeriodo = vis(minhas.filter((t) => { const d = dataDe(t); return d >= periodo.start && d <= periodo.end; })).sort(ordDataHora);

  const toggle = (t) => dispatch({ type: "TOGGLE_TAREFA", id: t.id });
  const del = (t) => setConfirmDel(t);

  function Secao({ titulo, lista, atrasada, vazio }) {
    return (
      <div className="card" style={{ overflow: "hidden", marginBottom: 16 }}>
        <div style={{ padding: "14px 16px 8px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <h3 style={{ margin: 0, fontSize: "var(--text-md)", color: atrasada ? "var(--kes-red-400)" : "var(--fg1)" }}>
            {atrasada && <Icon name="alert" size={16} style={{ marginRight: 6, verticalAlign: "-3px" }} />}{titulo}
          </h3>
          <Badge tone={atrasada ? "bad" : "muted"}>{lista.length}</Badge>
        </div>
        {lista.length === 0
          ? <div style={{ padding: "8px 16px 16px", color: "var(--fg3)", fontSize: 13 }}>{vazio}</div>
          : lista.map((t) => <TarefaRow key={t.id} t={t} usersById={usersById} leadsById={leadsById} viewer={viewer}
              onToggle={toggle} onEdit={(x) => setModal(x)} onDelete={del} atrasada={atrasada || t.data < hojeISO} />)}
      </div>
    );
  }

  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl"><h1>Tarefas</h1><p>Suas tarefas de hoje e amanhã. As atrasadas ficam visíveis até serem concluídas.</p></div>
        <div className="actions">
          <FiltroPeriodoTarefas value={periodo} onChange={setPeriodo} />
          <Btn variant={verConcluidas ? "primary" : "subtle"} size="sm" icon="checkCircle"
            onClick={() => setVerConcluidas((v) => !v)}>Concluídas</Btn>
          <Btn variant="primary" size="sm" icon="plus" onClick={() => setModal({})}>Agendar tarefa</Btn>
        </div>
      </div>

      {atrasadas.length > 0 && <Secao titulo="Atrasadas" lista={atrasadas} atrasada vazio="" />}

      {ehDefault ? (
        <>
          <Secao titulo={"Hoje · " + K.fmtBR(hojeISO)} lista={hoje}
            vazio={verConcluidas ? "Nenhuma tarefa para hoje." : "Nenhuma tarefa pendente para hoje."} />
          <Secao titulo={"Amanhã · " + K.fmtBR(amanhaISO)} lista={amanha}
            vazio={verConcluidas ? "Nenhuma tarefa para amanhã." : "Nenhuma tarefa pendente para amanhã."} />
        </>
      ) : (
        <Secao titulo={"Período · " + K.fmtBR(periodo.start) + " – " + K.fmtBR(periodo.end)} lista={noPeriodo}
          vazio={verConcluidas ? "Nenhuma tarefa neste período." : "Nenhuma tarefa pendente neste período."} />
      )}

      {modal && <TarefaModal initial={modal.id ? modal : null} state={state} viewer={viewer} dispatch={dispatch} onClose={() => setModal(null)} />}

      {confirmDel && (
        <Modal title="Excluir tarefa" onClose={() => setConfirmDel(null)}
          footer={<>
            <Btn variant="subtle" onClick={() => setConfirmDel(null)}>Cancelar</Btn>
            <Btn variant="danger" icon="trash" onClick={() => { dispatch({ type: "DELETE_TAREFA", id: confirmDel.id }); setConfirmDel(null); }}>Excluir</Btn>
          </>}>
          <p style={{ margin: 0, color: "var(--fg2)", fontSize: 14 }}>Tem certeza que deseja excluir a tarefa <b>"{confirmDel.titulo}"</b>? Essa ação não pode ser desfeita.</p>
        </Modal>
      )}
    </div>
  );
}

window.TarefasScreen = TarefasScreen;
window.TarefaModal = TarefaModal;