/* ============================================================
   INside One — Actividades CRM
   Colección Firestore: qg_activities
   ============================================================ */

const ACT_TYPES = [
  { key: "reunion",      label: "Reunión",       color: "#0ea5e9" },
  { key: "llamada",      label: "Llamada",        color: "#6366f1" },
  { key: "visita",       label: "Visita",         color: "#22c55e" },
  { key: "email",        label: "Email",          color: "#f59e0b" },
  { key: "seguimiento",  label: "Seguimiento",    color: "#8b5cf6" },
  { key: "otro",         label: "Otro",           color: "#6b7280" },
];
const ACT_OUTCOMES = [
  { key: "exitoso",       label: "Exitoso"         },
  { key: "en_seguimiento",label: "En seguimiento"  },
  { key: "sin_respuesta", label: "Sin respuesta"   },
  { key: "no_interesado", label: "No interesado"   },
  { key: "pendiente",     label: "Pendiente"       },
];
const ACT_MAP  = Object.fromEntries(ACT_TYPES.map(t => [t.key, t]));
const OUTS_MAP = Object.fromEntries(ACT_OUTCOMES.map(o => [o.key, o]));

function actTypeInfo(key) { return ACT_MAP[key] || ACT_TYPES[5]; }
function actOutcomeLabel(key) { return OUTS_MAP[key]?.label || key || "—"; }

function fmtActDate(iso) {
  try { return new Date(iso).toLocaleDateString("es-PA", { day: "2-digit", month: "short", year: "numeric" }); }
  catch { return iso; }
}

function daysUntil(iso) {
  if (!iso) return null;
  const diff = new Date(iso).setHours(0,0,0,0) - new Date().setHours(0,0,0,0);
  return Math.round(diff / 86400000);
}

// ── ActTypeBadge ─────────────────────────────────────────────
function ActTypeBadge({ type }) {
  const t = actTypeInfo(type);
  return (
    <span style={{ display:"inline-flex", alignItems:"center", gap:5, fontSize:11, fontWeight:600,
      padding:"3px 9px", borderRadius:99, color:t.color,
      background:t.color+"1a", border:"1px solid "+t.color+"44" }}>
      {t.label}
    </span>
  );
}

// ── ActivityModal ─────────────────────────────────────────────
function ActivityModal({ act, onClose, onSave, onRemove }) {
  const { clients = [] } = React.useContext(window.AppCtx);
  const isNew = !act.id;
  const [form, setForm] = React.useState({
    type: act.type || "reunion",
    date: act.date || new Date().toISOString().slice(0,10),
    client_id:      act.client_id      || "",
    client_name:    act.client_name    || "",
    client_company: act.client_company || "",
    contact_person: act.contact_person || "",
    opp_name:       act.opp_name       || "",
    notes:          act.notes          || "",
    outcome:        act.outcome        || "en_seguimiento",
    next_action:    act.next_action    || "",
    next_action_date: act.next_action_date || "",
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const pickClient = (id) => {
    if (!id) { set("client_id",""); set("client_name",""); set("client_company",""); return; }
    const c = clients.find(x=>x.id===id);
    if (c) setForm(f=>({...f, client_id:id, client_name:c.name||"", client_company:c.company||""}));
  };

  const handleSave = () => {
    if (!form.client_name.trim() && !form.client_company.trim()) {
      alert("Indica al menos el nombre del cliente o la empresa.");
      return;
    }
    onSave({ ...act, ...form });
  };

  const row = (label, child) => (
    <label style={{ fontSize:12, fontWeight:600, color:"var(--muted)", display:"block" }}>
      {label}
      <div style={{ marginTop:4 }}>{child}</div>
    </label>
  );

  return (
    <div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,.45)", zIndex:1000,
      display:"flex", alignItems:"center", justifyContent:"center", padding:16 }}>
      <div style={{ background:"var(--surface)", borderRadius:14, padding:26, width:"100%",
        maxWidth:520, maxHeight:"90vh", overflowY:"auto", boxShadow:"0 20px 60px rgba(0,0,0,.25)" }}>

        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:20 }}>
          <h2 style={{ margin:0, fontSize:18 }}>{isNew ? "Registrar actividad" : "Editar actividad"}</h2>
          <button className="iconbtn" onClick={onClose}><window.Icon name="x" size={18} /></button>
        </div>

        <div style={{ display:"flex", flexDirection:"column", gap:13 }}>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
            {row("Tipo de actividad",
              <select className="inp" value={form.type} onChange={e => set("type", e.target.value)}>
                {ACT_TYPES.map(t => <option key={t.key} value={t.key}>{t.label}</option>)}
              </select>
            )}
            {row("Fecha",
              <input className="inp" type="date" value={form.date} onChange={e => set("date", e.target.value)} />
            )}
          </div>

          {row("Cliente",
            clients.length > 0 ? (
              <select className="inp" value={form.client_id}
                onChange={e => pickClient(e.target.value)}>
                <option value="">— Seleccionar cliente —</option>
                {clients.map(c=>(
                  <option key={c.id} value={c.id}>{c.name}{c.company?" · "+c.company:""}</option>
                ))}
                <option value="__nuevo__">+ Nuevo cliente (libre)</option>
              </select>
            ) : (
              <input className="inp" value={form.client_name}
                onChange={e=>set("client_name",e.target.value)} placeholder="Nombre del contacto"/>
            )
          )}
          {(form.client_id==="__nuevo__" || !form.client_id) && (
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
              {row("Nombre del contacto",
                <input className="inp" value={form.client_name} onChange={e => set("client_name", e.target.value)} placeholder="Nombre del contacto" />
              )}
              {row("Empresa",
                <input className="inp" value={form.client_company} onChange={e => set("client_company", e.target.value)} placeholder="Nombre de la empresa" />
              )}
            </div>
          )}

          {row("Persona de contacto (cargo)",
            <input className="inp" value={form.contact_person} onChange={e => set("contact_person", e.target.value)} placeholder="Ej. Arq. María González — Coordinadora de proyectos" />
          )}

          {row("Proyecto / oportunidad vinculada",
            <input className="inp" value={form.opp_name} onChange={e => set("opp_name", e.target.value)} placeholder="Nombre del proyecto (opcional)" />
          )}

          {row("Notas de la actividad",
            <textarea className="inp" rows={3} value={form.notes} onChange={e => set("notes", e.target.value)}
              style={{ resize:"vertical", fontFamily:"inherit" }}
              placeholder="¿Qué se habló? Resultado, acuerdos, observaciones..." />
          )}

          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
            {row("Resultado",
              <select className="inp" value={form.outcome} onChange={e => set("outcome", e.target.value)}>
                {ACT_OUTCOMES.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
              </select>
            )}
            {row("Fecha de seguimiento",
              <input className="inp" type="date" value={form.next_action_date} onChange={e => set("next_action_date", e.target.value)} />
            )}
          </div>

          {row("Próxima acción",
            <input className="inp" value={form.next_action} onChange={e => set("next_action", e.target.value)}
              placeholder="Ej. Enviar cotización actualizada, llamar para confirmar reunión..." />
          )}
        </div>

        <div style={{ display:"flex", justifyContent:"space-between", marginTop:20, gap:10 }}>
          <div>
            {!isNew && (
              <window.Btn variant="ghost" size="sm" icon="trash"
                onClick={() => { if (confirm("¿Eliminar esta actividad?")) onRemove(act.id); }}>
                Eliminar
              </window.Btn>
            )}
          </div>
          <div style={{ display:"flex", gap:8 }}>
            <window.Btn variant="outline" size="sm" onClick={onClose}>Cancelar</window.Btn>
            <window.Btn variant="primary" size="sm" icon="check" onClick={handleSave}>
              {isNew ? "Registrar" : "Guardar"}
            </window.Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── FollowUpCard ─────────────────────────────────────────────
function FollowUpCard({ act, onClick }) {
  const days = daysUntil(act.next_action_date);
  const isOverdue = days !== null && days < 0;
  const isToday = days === 0;
  const color = isOverdue ? "var(--red,#e53)" : isToday ? "var(--amber,#f90)" : "var(--green,#2a9)";

  return (
    <div onClick={onClick} style={{ padding:"12px 14px", borderRadius:10, cursor:"pointer",
      border:`1px solid ${color}44`, background:`color-mix(in srgb, ${color} 7%, var(--surface))`,
      transition:"transform .12s" }}
      onMouseEnter={e => e.currentTarget.style.transform = "translateY(-1px)"}
      onMouseLeave={e => e.currentTarget.style.transform = ""}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:10 }}>
        <div style={{ minWidth:0 }}>
          <div style={{ fontWeight:600, fontSize:13, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
            {act.client_name || act.client_company || "—"}
            {act.client_company && act.client_name && <span style={{ color:"var(--muted)", fontWeight:400 }}> · {act.client_company}</span>}
          </div>
          <div style={{ fontSize:12, color:"var(--muted)", marginTop:3, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
            {act.next_action || "Seguimiento pendiente"}
          </div>
        </div>
        <div style={{ fontSize:11, fontWeight:700, color, flexShrink:0, textAlign:"right" }}>
          {isOverdue ? `${Math.abs(days)}d vencido` : isToday ? "Hoy" : `En ${days}d`}
          <div style={{ fontSize:10, fontWeight:400, color:"var(--muted)", marginTop:1 }}>{fmtActDate(act.next_action_date)}</div>
        </div>
      </div>
    </div>
  );
}

// ── ActividadesView ───────────────────────────────────────────
function ActividadesView() {
  const { activities = [], addActivity, updateActivity, removeActivity } = React.useContext(window.AppCtx);
  const [modal, setModal]         = React.useState(null);
  const [typeFilter, setTypeFilter] = React.useState("all");
  const [search, setSearch]       = React.useState("");
  const [tab, setTab]             = React.useState("lista"); // lista | seguimientos

  // Follow-ups: activities with next_action_date
  const followUps = React.useMemo(() => {
    const today = new Date().setHours(23,59,59,0);
    return activities
      .filter(a => a.next_action_date && new Date(a.next_action_date).setHours(23,59,59,0) <= today + 7*86400000)
      .sort((a,b) => new Date(a.next_action_date) - new Date(b.next_action_date));
  }, [activities]);

  const overdue = followUps.filter(a => daysUntil(a.next_action_date) < 0);
  const upcoming = followUps.filter(a => daysUntil(a.next_action_date) >= 0);

  const filtered = React.useMemo(() => {
    let list = [...activities].sort((a,b) => new Date(b.date||0) - new Date(a.date||0));
    if (typeFilter !== "all") list = list.filter(a => a.type === typeFilter);
    if (search.trim()) {
      const q = search.trim().toLowerCase();
      list = list.filter(a =>
        (a.client_name||"").toLowerCase().includes(q) ||
        (a.client_company||"").toLowerCase().includes(q) ||
        (a.notes||"").toLowerCase().includes(q)
      );
    }
    return list;
  }, [activities, typeFilter, search]);

  const handleSave = async (data) => {
    if (data.id) await updateActivity(data.id, data);
    else await addActivity({ ...data, created_at: Date.now() });
    setModal(null);
  };

  const handleRemove = async (id) => { await removeActivity(id); setModal(null); };

  const pendingCount = overdue.length + followUps.filter(a => daysUntil(a.next_action_date) === 0).length;

  return (
    <div style={{ padding:"28px 28px 80px" }}>
      {/* Header */}
      <div style={{ display:"flex", alignItems:"flex-start", justifyContent:"space-between", marginBottom:24, gap:16, flexWrap:"wrap" }}>
        <div>
          <h1 style={{ margin:0, fontSize:22, fontWeight:800 }}>Actividades</h1>
          <div style={{ fontSize:13, color:"var(--muted)", marginTop:4 }}>Registro de contactos e interacciones comerciales</div>
        </div>
        <window.Btn variant="primary" size="sm" icon="plus" onClick={() => setModal({})}>
          Registrar actividad
        </window.Btn>
      </div>

      {/* KPI row */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(140px,1fr))", gap:12, marginBottom:24 }}>
        {[
          { label:"Total registradas", val: activities.length },
          { label:"Este mes", val: activities.filter(a => a.date?.slice(0,7) === new Date().toISOString().slice(0,7)).length },
          { label:"Seguimientos urgentes", val: pendingCount, color: pendingCount > 0 ? "var(--red,#e53)" : undefined },
          { label:"Próximos 7 días", val: upcoming.length, color:"var(--amber,#f90)" },
        ].map(k => (
          <div key={k.label} style={{ background:"var(--surface)", border:"1px solid var(--border)",
            borderRadius:12, padding:"14px 16px" }}>
            <div style={{ fontSize:11, fontWeight:600, color:"var(--muted)", textTransform:"uppercase", letterSpacing:".06em", marginBottom:4 }}>{k.label}</div>
            <div style={{ fontSize:24, fontWeight:800, color: k.color || "var(--text)" }}>{k.val}</div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div style={{ display:"flex", gap:6, marginBottom:18 }}>
        {[["lista","Lista completa"],["seguimientos","Seguimientos"]].map(([k,l]) => (
          <button key={k} onClick={() => setTab(k)}
            style={{ padding:"7px 16px", borderRadius:8, fontWeight:600, fontSize:13, cursor:"pointer", border:"1px solid",
              borderColor: tab===k ? "var(--gold)" : "var(--border)",
              background: tab===k ? "var(--gold)" : "transparent",
              color: tab===k ? "var(--accent-ink)" : "var(--muted)" }}>
            {l}{k==="seguimientos" && followUps.length > 0 && ` (${followUps.length})`}
          </button>
        ))}
      </div>

      {tab === "seguimientos" ? (
        <div style={{ display:"flex", flexDirection:"column", gap:24 }}>
          {overdue.length > 0 && (
            <div>
              <div style={{ fontSize:11, fontWeight:700, textTransform:"uppercase", letterSpacing:".08em", color:"var(--red,#e53)", marginBottom:10 }}>
                Vencidos ({overdue.length})
              </div>
              <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
                {overdue.map(a => <FollowUpCard key={a.id} act={a} onClick={() => setModal(a)} />)}
              </div>
            </div>
          )}
          {upcoming.length > 0 && (
            <div>
              <div style={{ fontSize:11, fontWeight:700, textTransform:"uppercase", letterSpacing:".08em", color:"var(--muted)", marginBottom:10 }}>
                Próximos ({upcoming.length})
              </div>
              <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
                {upcoming.map(a => <FollowUpCard key={a.id} act={a} onClick={() => setModal(a)} />)}
              </div>
            </div>
          )}
          {followUps.length === 0 && (
            <div style={{ textAlign:"center", padding:"50px 20px", color:"var(--muted)" }}>
              <window.Icon name="check" size={32} />
              <div style={{ marginTop:10, fontWeight:600, color:"var(--text)" }}>Sin seguimientos pendientes</div>
              <div style={{ fontSize:13, marginTop:4 }}>Todo al día.</div>
            </div>
          )}
        </div>
      ) : (
        <>
          {/* Filters */}
          <div style={{ display:"flex", gap:10, marginBottom:16, flexWrap:"wrap", alignItems:"center" }}>
            <input className="inp" style={{ width:220 }} placeholder="Buscar cliente o notas..."
              value={search} onChange={e => setSearch(e.target.value)} />
            <div style={{ display:"flex", gap:6, flexWrap:"wrap" }}>
              <button onClick={() => setTypeFilter("all")}
                style={{ fontSize:12, padding:"5px 12px", borderRadius:99, fontWeight:600, cursor:"pointer", border:"1px solid",
                  borderColor: typeFilter==="all" ? "var(--gold)" : "var(--border)",
                  background: typeFilter==="all" ? "var(--gold)" : "transparent",
                  color: typeFilter==="all" ? "var(--accent-ink)" : "var(--muted)" }}>
                Todos
              </button>
              {ACT_TYPES.map(t => (
                <button key={t.key} onClick={() => setTypeFilter(t.key)}
                  style={{ fontSize:12, padding:"5px 12px", borderRadius:99, fontWeight:600, cursor:"pointer", border:"1px solid",
                    borderColor: typeFilter===t.key ? t.color : "var(--border)",
                    background: typeFilter===t.key ? t.color+"18" : "transparent",
                    color: typeFilter===t.key ? t.color : "var(--muted)" }}>
                  {t.label}
                </button>
              ))}
            </div>
          </div>

          {filtered.length === 0 ? (
            <div style={{ textAlign:"center", padding:"60px 20px", color:"var(--muted)" }}>
              <window.Icon name="user" size={32} />
              <div style={{ marginTop:12, fontWeight:600, color:"var(--text)", fontSize:15 }}>
                {activities.length === 0 ? "Sin actividades registradas" : "Sin resultados"}
              </div>
              <div style={{ fontSize:13, marginTop:6 }}>
                {activities.length === 0 ? "Registra tu primera interacción comercial." : "Prueba con otro filtro."}
              </div>
              {activities.length === 0 && (
                <window.Btn variant="primary" size="sm" icon="plus" style={{ marginTop:16 }} onClick={() => setModal({})}>
                  Registrar actividad
                </window.Btn>
              )}
            </div>
          ) : (
            <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
              {filtered.map(act => (
                <div key={act.id} onClick={() => setModal(act)}
                  style={{ background:"var(--surface)", border:"1px solid var(--border)", borderRadius:11,
                    padding:"14px 16px", cursor:"pointer", transition:"border-color .12s, transform .12s" }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor="var(--border-strong)"; e.currentTarget.style.transform="translateY(-1px)"; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor="var(--border)"; e.currentTarget.style.transform=""; }}>
                  <div style={{ display:"flex", alignItems:"flex-start", gap:12, flexWrap:"wrap" }}>
                    <div style={{ flex:1, minWidth:200 }}>
                      <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:5, flexWrap:"wrap" }}>
                        <ActTypeBadge type={act.type} />
                        <span style={{ fontSize:12, color:"var(--muted)" }}>{fmtActDate(act.date)}</span>
                        {act.outcome && (
                          <span style={{ fontSize:11, color:"var(--muted)", background:"var(--bg)", border:"1px solid var(--border)",
                            padding:"2px 8px", borderRadius:99 }}>
                            {actOutcomeLabel(act.outcome)}
                          </span>
                        )}
                      </div>
                      <div style={{ fontWeight:600, fontSize:14 }}>
                        {act.client_name || act.client_company || "—"}
                        {act.client_company && act.client_name && (
                          <span style={{ fontWeight:400, color:"var(--muted)", fontSize:13 }}> · {act.client_company}</span>
                        )}
                      </div>
                      {act.contact_person && (
                        <div style={{ fontSize:12, color:"var(--muted)", marginTop:2 }}>{act.contact_person}</div>
                      )}
                      {act.notes && (
                        <div style={{ fontSize:12, color:"var(--muted)", marginTop:6, lineHeight:1.5,
                          display:"-webkit-box", WebkitLineClamp:2, WebkitBoxOrient:"vertical", overflow:"hidden" }}>
                          {act.notes}
                        </div>
                      )}
                    </div>
                    {act.next_action_date && (
                      <div style={{ flexShrink:0, textAlign:"right" }}>
                        <div style={{ fontSize:11, color:"var(--muted)", marginBottom:2 }}>Seguimiento</div>
                        {(() => {
                          const d = daysUntil(act.next_action_date);
                          const c = d < 0 ? "var(--red,#e53)" : d === 0 ? "var(--amber,#f90)" : "var(--muted)";
                          return <div style={{ fontSize:12, fontWeight:600, color:c }}>{fmtActDate(act.next_action_date)}</div>;
                        })()}
                        {act.next_action && (
                          <div style={{ fontSize:11, color:"var(--muted)", marginTop:2, maxWidth:180,
                            overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                            {act.next_action}
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      )}

      {modal !== null && (
        <ActivityModal act={modal} onClose={() => setModal(null)}
          onSave={handleSave} onRemove={handleRemove} />
      )}
    </div>
  );
}

window.ActividadesView = ActividadesView;