// App root — wires tabs, state, and views

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": "#60A5FA",
  "fontMode": "inter",
  "density": "comfy"
}/*EDITMODE-END*/;

const App = () => {
  const [tab, setTab] = React.useState("overview");

  // Persistence: Load from localStorage or use INITIAL data
  const [projects, setProjects] = React.useState(() => {
    try {
      const saved = localStorage.getItem("tz-projects");
      return saved ? JSON.parse(saved) : window.INITIAL_PROJECTS;
    } catch (e) { return window.INITIAL_PROJECTS; }
  });

  const [inbox, setInbox] = React.useState(() => {
    try {
      const saved = localStorage.getItem("tz-inbox");
      return saved ? JSON.parse(saved) : window.INITIAL_INBOX;
    } catch (e) { return window.INITIAL_INBOX; }
  });

  const [plannerSyncStatus, setPlannerSyncStatus] = React.useState(null);
  const syncInProgressRef = React.useRef(false);
  const toast = window.useToast();

  // Save to localStorage whenever state changes
  React.useEffect(() => {
    // Repair and sync data before saving (ensures projects are always derived from children)
    const repaired = projects.map(p => {
      let minS = null, maxE = null;
      p.epics.forEach(e => {
        // Ensure all US have start/end
        e.userStories.forEach(us => {
          if (!us.start) us.start = us.deadline || window.TZ_TODAY_ISO;
          if (!us.end) us.end = us.deadline || us.start || "2026-05-15";
          const s = new Date(us.start + "T00:00:00"), end = new Date(us.end + "T00:00:00");
          if (!minS || s < minS) minS = s;
          if (!maxE || end > maxE) maxE = end;
        });
        // Ensure Epics have start/end
        if (!e.start) e.start = window.TZ_TODAY_ISO;
        if (!e.end) e.end = "2026-06-11";
        const es = new Date(e.start + "T00:00:00"), ee = new Date(e.end + "T00:00:00");
        if (!minS || es < minS) minS = es;
        if (!maxE || ee > maxE) maxE = ee;
      });
      if (minS) p.start = minS.toISOString().split('T')[0];
      if (maxE) p.end = maxE.toISOString().split('T')[0];
      return p;
    });
    localStorage.setItem("tz-projects", JSON.stringify(repaired));
  }, [projects]);

  React.useEffect(() => {
    localStorage.setItem("tz-inbox", JSON.stringify(inbox));
  }, [inbox]);

  // Exponer snapshots + sync para integración con SharePoint y Planner
  React.useEffect(() => {
    window.__getProjectsSnapshot = () => projects;
    window.__getInboxSnapshot    = () => inbox;
    window.__applyRemoteData     = (remoteProjects, remoteInbox) => {
      setProjects(remoteProjects);
      setInbox(remoteInbox);
    };
  }, [projects, inbox]);

  // Sync con Planner: importa buckets → proyectos
  const handlePlannerSync = async () => {
    if (syncInProgressRef.current) return;
    if (!window.SP?.isConnected() || !window.Planner?.pull) return;
    syncInProgressRef.current = true;
    setPlannerSyncStatus("loading");
    window.dispatchEvent(new CustomEvent("planner-sync-status", { detail: { status: "loading" } }));
    try {
      const { projects: remote } = await window.Planner.pull(() => {});
      setProjects(remote);
      setPlannerSyncStatus("ok");
      window.dispatchEvent(new CustomEvent("planner-sync-status", { detail: { status: "ok" } }));
      toast.push(`✅ ${remote.length} proyectos sincronizados desde Planner`);
      setTimeout(() => {
        setPlannerSyncStatus(null);
        window.dispatchEvent(new CustomEvent("planner-sync-status", { detail: { status: null } }));
      }, 4000);
    } catch (e) {
      setPlannerSyncStatus("error");
      window.dispatchEvent(new CustomEvent("planner-sync-status", { detail: { status: "error" } }));
      toast.push("Error Planner: " + e.message.slice(0, 80), { color: "var(--rojo-suave)", icon: "close" });
      setTimeout(() => {
        setPlannerSyncStatus(null);
        window.dispatchEvent(new CustomEvent("planner-sync-status", { detail: { status: null } }));
      }, 6000);
    } finally {
      syncInProgressRef.current = false;
    }
  };

  // Exponer para PlannerSyncButton y PlannerSyncSection
  React.useEffect(() => {
    window.__plannerSync = handlePlannerSync;
  });

  // Auto-sync desde Planner al cargar (si hay sesión Microsoft activa)
  React.useEffect(() => {
    const t = setTimeout(() => {
      if (window.SP?.isConnected() && window.Planner?.pull) {
        handlePlannerSync();
      }
    }, 1800); // espera a que MSAL inicialice
    return () => clearTimeout(t);
  }, []); // solo en mount

  const [selection, setSelection] = React.useState(null);

  // Modal state for tree add actions
  const [modal, setModal] = React.useState(null);

  const counts = { projects: projects.length, inbox: inbox.length };

  const handleOpenProject = (pid) => {
    setSelection({ kind: "project", id: pid });
    setTab("tree");
  };

  const addProject = () => setModal({ type: "project" });
  const addEpic = (pid) => setModal({ type: "epic", projectId: pid });
  const addUs = (pid, eid) => setModal({ type: "us", projectId: pid, epicId: eid });

  const onCreate = (data) => {
    if (modal.type === "project") {
      setProjects((prev) => [...prev, {
        id: "p-" + Math.random().toString(36).slice(2, 8),
        name: data.name,
        area: data.area,
        tipo: data.tipo || "quickwin",
        status: data.status || "backlog",
        color: data.color || "#A78BFA",
        notas: data.notas || "",
        epics: [],
      }]);
      toast.push("Proyecto creado");
    } else if (modal.type === "epic") {
      setProjects((prev) => prev.map((p) => p.id !== modal.projectId ? p : {
        ...p,
        epics: [...p.epics, {
          id: "e-" + Math.random().toString(36).slice(2, 8),
          name: data.name,
          status: data.status || "backlog",
          start: data.start || "2026-06-01",
          end: data.end || "2026-08-31",
          tbd: false,
          notas: data.notas || "",
          userStories: [],
        }],
      }));
      toast.push("Epic creado");
    } else if (modal.type === "us") {
      setProjects((prev) => prev.map((p) => p.id !== modal.projectId ? p : {
        ...p,
        epics: p.epics.map((e) => e.id !== modal.epicId ? e : {
          ...e,
          userStories: [...e.userStories, {
            id: "us-" + Math.random().toString(36).slice(2, 8),
            name: data.name,
            status: data.status || "backlog",
            deadline: data.deadline || null,
            notas: data.notas || "",
          }],
        }),
      }));
      toast.push("Actividad creada");
    }
    setModal(null);
  };

  return (
    <div className="app">
      <Topbar />
      <Tabs active={tab} onChange={setTab} counts={counts} />
      <div className="main" data-screen-label={
        tab === "overview" ? "01 Overview"
        : tab === "tree" ? "02 Árbol"
        : tab === "gantt" ? "03 Gantt"
        : "04 Inbox"
      }>
        {tab === "overview" && (
          <OverviewView projects={projects} inbox={inbox} onOpenProject={handleOpenProject} />
        )}
        {tab === "tree" && (
          <TreeView
            projects={projects}
            setProjects={setProjects}
            selection={selection}
            setSelection={setSelection}
            onAddProject={addProject}
            onAddEpic={addEpic}
            onAddUs={addUs}
          />
        )}
        {tab === "gantt" && (
          <GanttView projects={projects} setProjects={setProjects} />
        )}
        {tab === "roadmap" && (
          <RoadmapView projects={projects} />
        )}
        {tab === "inbox" && (
          <InboxView inbox={inbox} setInbox={setInbox} projects={projects} setProjects={setProjects} />
        )}
      </div>

      {modal && <CreateModal modal={modal} projects={projects} onClose={() => setModal(null)} onCreate={onCreate} />}
    </div>
  );
};

const CreateModal = ({ modal, projects, onClose, onCreate }) => {
  const titles = { project: "Nuevo proyecto", epic: "Nuevo epic", us: "Nueva actividad" };
  const [d, setD] = React.useState({
    name: "",
    area: "Transversal",
    tipo: "quickwin",
    status: modal.type === "us" ? "pendiente" : "backlog",
    color: "#A78BFA",
    notas: "",
    start: "2026-06-01",
    end: "2026-08-31",
    deadline: "",
  });

  const PALETTE = ["#02396B", "#A82025", "#FBBF24", "#34D399", "#A78BFA", "#F87171", "#60A5FA", "#0EA5E9"];

  return (
    <Modal title={titles[modal.type]} onClose={onClose}
      footer={<>
        <button className="btn-secondary" onClick={onClose}>Cancelar</button>
        <button className="btn-primary" disabled={!d.name.trim()} onClick={() => onCreate(d)}>Guardar</button>
      </>}>
      <div className="field"><label>Nombre</label>
        <input type="text" autoFocus value={d.name} onChange={(e) => setD({ ...d, name: e.target.value })} placeholder="Nombre descriptivo…" />
      </div>

      {modal.type === "project" && (
        <>
          <div className="field-row">
            <div className="field"><label>Área</label>
              <select value={d.area} onChange={(e) => setD({ ...d, area: e.target.value })}>
                {window.AREAS.map((a) => <option key={a} value={a}>{a}</option>)}
              </select>
            </div>
            <div className="field"><label>Tipo</label>
              <select value={d.tipo} onChange={(e) => setD({ ...d, tipo: e.target.value })}>
                {window.TIPO_OPTIONS.map((t) => <option key={t.key} value={t.key}>{t.label}</option>)}
              </select>
            </div>
          </div>
          <div className="field"><label>Color</label>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {PALETTE.map((c) => (
                <button key={c} type="button"
                  onClick={() => setD({ ...d, color: c })}
                  style={{
                    width: 28, height: 28, borderRadius: 6, background: c, cursor: "pointer",
                    border: d.color === c ? "2px solid #fff" : "2px solid transparent",
                    boxShadow: d.color === c ? `0 0 0 2px ${c}55` : "none",
                  }}
                />
              ))}
            </div>
          </div>
        </>
      )}

      {modal.type === "epic" && (
        <div className="field-row">
          <div className="field"><label>Inicio</label>
            <input type="date" value={d.start} onChange={(e) => setD({ ...d, start: e.target.value })} />
          </div>
          <div className="field"><label>Fin</label>
            <input type="date" value={d.end} onChange={(e) => setD({ ...d, end: e.target.value })} />
          </div>
        </div>
      )}

      {modal.type === "us" && (
        <div className="field"><label>Fecha límite</label>
          <input type="date" value={d.deadline} onChange={(e) => setD({ ...d, deadline: e.target.value })} />
        </div>
      )}

      <div className="field"><label>Status</label>
        <select value={d.status} onChange={(e) => setD({ ...d, status: e.target.value })}>
          {window.STATUS_OPTIONS.map((s) => <option key={s.key} value={s.key}>{s.label}</option>)}
        </select>
      </div>

      <div className="field"><label>Notas</label>
        <textarea value={d.notas} onChange={(e) => setD({ ...d, notas: e.target.value })} placeholder="Contexto, criterios, links…" />
      </div>
    </Modal>
  );
};

// ── Login Gate: bloquea el dashboard hasta autenticar con Microsoft ──
const LoginGate = ({ children }) => {
  // "checking" mientras MSAL inicializa, "connected" o "disconnected" después
  const [state,   setState]   = React.useState("checking");
  const [loading, setLoading] = React.useState(false);
  const [error,   setError]   = React.useState(null);

  React.useEffect(() => {
    (async () => {
      // Espera a que MSAL procese el redirect (si venimos de Microsoft)
      await (window.SP?.ready || Promise.resolve());
      setState(window.SP?.isConnected() ? "connected" : "disconnected");
    })();
  }, []);

  const handleLogin = async () => {
    if (!window.SP) { setError("Módulo de autenticación no disponible"); return; }
    setLoading(true);
    setError(null);
    try {
      await window.SP.login(); // navega a Microsoft (redirect mode) — no retorna
    } catch (e) {
      setError("No se pudo autenticar: " + (e.message || "intenta de nuevo"));
      setLoading(false);
    }
  };

  // Pantalla de carga mientras MSAL verifica la sesión
  if (state === "checking") return (
    <div style={{
      minHeight: "100vh", display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      background: "var(--bg-deep)", gap: 16,
    }}>
      <div style={{ width: 40, height: 40, borderRadius: 12, background: "#02396B", display: "grid", placeItems: "center" }}>
        <span style={{ color: "#fff", fontWeight: 800, fontSize: 16 }}>TZ</span>
      </div>
      <span style={{
        width: 20, height: 20, borderRadius: "50%",
        border: "2.5px solid rgba(2,57,107,.2)", borderTopColor: "#02396B",
        animation: "spin .7s linear infinite", display: "inline-block",
      }} />
    </div>
  );

  if (state === "connected") return children;

  return (
    <div style={{
      minHeight: "100vh", display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      background: "var(--bg-deep)", gap: 28,
      fontFamily: "var(--font-ui, Inter, sans-serif)",
    }}>
      {/* Branding */}
      <div style={{ textAlign: "center" }}>
        <div style={{
          width: 64, height: 64, borderRadius: 18,
          background: "#02396B", color: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center",
          margin: "0 auto 14px",
          fontSize: 26, fontWeight: 800, letterSpacing: "-1px",
        }}>TZ</div>
        <div style={{ fontSize: 20, fontWeight: 700, color: "var(--text-0)", letterSpacing: "-.3px" }}>
          Ecosistema IA · Termiz
        </div>
        <div style={{ fontSize: 12, color: "var(--text-2)", marginTop: 5 }}>
          Portafolio multifuncional — acceso restringido
        </div>
      </div>

      {/* Card de login */}
      <div style={{
        background: "var(--bg-panel)",
        border: "1px solid var(--border-default)",
        borderRadius: 16, padding: "32px 40px",
        display: "flex", flexDirection: "column",
        alignItems: "center", gap: 18,
        minWidth: 310,
        boxShadow: "0 12px 40px rgba(0,0,0,.1)",
      }}>
        <div style={{ fontSize: 13, color: "var(--text-1)", textAlign: "center", lineHeight: 1.6 }}>
          Inicia sesión con tu cuenta corporativa<br />
          <span style={{ color: "var(--text-2)", fontSize: 11.5 }}>@termiz.co · Microsoft 365</span>
        </div>

        <button
          onClick={handleLogin}
          disabled={loading}
          style={{
            display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
            width: "100%", padding: "11px 20px",
            background: "#02396B", color: "#fff",
            border: "none", borderRadius: 10,
            fontSize: 14, fontWeight: 600, cursor: loading ? "wait" : "pointer",
            opacity: loading ? 0.75 : 1, transition: "opacity .2s",
          }}
        >
          {loading ? (
            <>
              <span style={{
                width: 15, height: 15, borderRadius: "50%",
                border: "2px solid rgba(255,255,255,.35)", borderTopColor: "#fff",
                animation: "spin .7s linear infinite", display: "inline-block",
              }} />
              Autenticando…
            </>
          ) : (
            <>
              {/* Logo Microsoft */}
              <svg width="17" height="17" viewBox="0 0 21 21" fill="none">
                <rect x="1"  y="1"  width="9" height="9" fill="#F25022"/>
                <rect x="11" y="1"  width="9" height="9" fill="#7FBA00"/>
                <rect x="1"  y="11" width="9" height="9" fill="#00A4EF"/>
                <rect x="11" y="11" width="9" height="9" fill="#FFB900"/>
              </svg>
              Entrar con Microsoft
            </>
          )}
        </button>

        {error && (
          <div style={{ fontSize: 11.5, color: "var(--rojo-suave)", textAlign: "center", maxWidth: 240 }}>
            {error}
          </div>
        )}
      </div>

      <div style={{ fontSize: 11, color: "var(--text-3)" }}>
        Solo usuarios autorizados del tenant Termiz
      </div>

      {/* Toggle de tema en la esquina */}
      <div style={{ position: "fixed", top: 16, right: 16 }}>
        <ThemeToggle />
      </div>
    </div>
  );
};

// Mount
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ToastProvider>
    <LoginGate>
      <App />
    </LoginGate>
  </ToastProvider>
);