/* SkyOps — Ask SkyOps: contextual AI copilot.
   FAB + slide-in panel (420px overlay), context-aware by route. */

const { useState: useStateAsk, useEffect: useEffectAsk, useRef: useRefAsk, useMemo: useMemoAsk } = React;

/* Derive context summary for the LLM based on current route */
function buildAskContext(ctx) {
  const { route, activeSite, activeMic, stage } = ctx;
  const sites = window.SITES || [];
  const insps = window.INSPECTIONS || [];
  const site = sites.find(s => s.id === activeSite);
  const mic = insps.find(i => i.id === activeMic);

  const base = {
    tenant: "Iberdrola Renovables",
    region: "EU-WEST",
    portfolioSize: sites.length,
    route,
  };

  if (route === "portfolio" || route === "sites") {
    return {
      ...base,
      sites: sites.map(s => ({
        id: s.id, name: s.name, country: s.country, type: s.type,
        capacity_mw: s.capacity_mw, health: s.health, lastInsp: s.lastInsp
      })),
    };
  }
  if (route === "site" && site) {
    const siteInsps = insps.filter(i => i.siteId === site.id).slice(0, 5);
    return { ...base, site: {
      id: site.id, name: site.name, country: site.country, type: site.type,
      capacity_mw: site.capacity_mw, panels: site.panels, health: site.health,
      lastInspection: site.lastInspection, nextInspection: site.nextInspection,
    }, recentInspections: siteInsps.map(i => ({
      id: i.id, cycle: i.cycle, status: i.status, detections: i.detections,
      critical: i.critical, coverage: i.coverage, startedAt: i.startedAt,
    }))};
  }
  if (route === "workspace" && mic) {
    return { ...base,
      site: site ? { id: site.id, name: site.name, capacity_mw: site.capacity_mw } : null,
      inspection: {
        id: mic.id, cycle: mic.cycle, status: mic.status, stage,
        coverage: mic.coverage, detections: mic.detections, critical: mic.critical,
        area_ha: mic.area_ha, flights: mic.flights, lead: mic.lead, drone: mic.drone,
        baseline: mic.baseline, startedAt: mic.startedAt,
      },
    };
  }
  if (route === "calendar") {
    return { ...base, scope: "portfolio-calendar",
      upcomingScheduled: insps.filter(i => i.status === "scheduled" || i.status === "draft")
        .map(i => ({ id: i.id, siteId: i.siteId, plannedFor: i.plannedFor })) };
  }
  if (route === "compare") {
    return { ...base, scope: "compare", site: site ? { name: site.name } : null };
  }
  return base;
}

/* Starter prompts per context */
function starterPrompts(ctx) {
  const { route } = ctx;
  if (route === "portfolio" || route === "sites") return [
    "Which sites should I prioritize this month?",
    "Benchmark health across the Iberian sites",
    "Summarize critical detections portfolio-wide",
  ];
  if (route === "site") return [
    "Summarize this site's current state",
    "What changed since the last inspection?",
    "When should we schedule the next flight?",
  ];
  if (route === "workspace") return [
    "Explain the critical detections",
    "Is this inspection ready to report?",
    "Compare with the previous cycle",
  ];
  if (route === "calendar") return [
    "Recommend optimal flight windows next week",
    "Which sites are overdue for inspection?",
  ];
  if (route === "compare") return [
    "What are the biggest deltas?",
    "Which panels degraded between cycles?",
  ];
  return [
    "What should I look at first today?",
    "Show me portfolio-wide alerts",
  ];
}

const SYSTEM_PROMPT =
  "You are Argus, a concise technical copilot embedded in a drone ops platform for solar-PV site inspection. " +
  "Answer in at most 4 short sentences unless the user asks for detail. Use domain terms (MIC, ortho, DSM, hot-cell, soiling, thermal delta, AOI, GSD). " +
  "When you cite a specific object, wrap it in square brackets like [MIC-2026-04-033] or [Alba I · panel A7]. " +
  "Never invent data — use only the context block. If a question cannot be answered from context, say so briefly. " +
  "Format: plain text, no markdown headers. Use bullet points only when listing 3+ items.";

function AskFab({ open, setOpen, route }) {
  return (
    <button className={`ask-fab ${open ? "is-open" : ""}`}
            onClick={() => setOpen(v => !v)}
            aria-label="Argus">
      {open ? <Icon name="x" size={18}/> : <Icon name="sparkles" size={18}/>}
      {!open && <span className="ask-fab-lbl">Argus</span>}
      {!open && <kbd className="ask-fab-kbd">⌘K</kbd>}
    </button>
  );
}

function AskPanel({ open, setOpen, ctx }) {
  const [messages, setMessages] = useStateAsk(() => {
    try {
      const saved = localStorage.getItem("skyops_ask_msgs");
      if (saved) return JSON.parse(saved);
    } catch {}
    return [];
  });
  const [input, setInput] = useStateAsk("");
  const [pending, setPending] = useStateAsk(false);
  const bodyRef = useRefAsk();

  useEffectAsk(() => {
    try { localStorage.setItem("skyops_ask_msgs", JSON.stringify(messages.slice(-20))); } catch {}
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages]);

  const context = useMemoAsk(() => buildAskContext(ctx), [ctx.route, ctx.activeSite, ctx.activeMic, ctx.stage]);
  const starters = useMemoAsk(() => starterPrompts(ctx), [ctx.route]);

  const send = async (text) => {
    const q = (text || input).trim();
    if (!q || pending) return;
    const userMsg = { role: "user", content: q, at: Date.now() };
    const newMsgs = [...messages, userMsg];
    setMessages(newMsgs);
    setInput("");
    setPending(true);

    try {
      const contextBlock = "CONTEXT (JSON):\n" + JSON.stringify(context, null, 2);
      const history = newMsgs.slice(-6).map(m => ({ role: m.role, content: m.content }));
      const reply = await window.claude.complete({
        messages: [
          { role: "user", content: SYSTEM_PROMPT + "\n\n" + contextBlock + "\n\nUser question: " + q }
        ],
      });
      setMessages(m => [...m, { role: "assistant", content: reply, at: Date.now() }]);
    } catch (err) {
      setMessages(m => [...m, { role: "assistant", content: "Couldn't reach the LLM. Try again in a moment.", at: Date.now(), error: true }]);
    } finally {
      setPending(false);
    }
  };

  const clearChat = () => {
    setMessages([]);
    try { localStorage.removeItem("skyops_ask_msgs"); } catch {}
  };

  if (!open) return null;

  const ctxLabel = ctx.route === "portfolio" ? "Portfolio view"
    : ctx.route === "site" ? `Site · ${(window.SITES || []).find(s => s.id === ctx.activeSite)?.name || "—"}`
    : ctx.route === "workspace" ? `Inspection · ${ctx.activeMic} · ${ctx.stage}`
    : ctx.route === "calendar" ? "Portfolio calendar"
    : ctx.route === "compare" ? "Compare view"
    : ctx.route;

  return (
    <aside className="ask-panel" role="dialog" aria-label="Argus">
      <header className="ask-hd">
        <div className="ask-hd-l">
          <div className="ask-hd-ic"><Icon name="sparkles" size={14}/></div>
          <div>
            <div className="ask-hd-title">Argus</div>
            <div className="ask-hd-sub"><span className="ask-hd-dot"/>{ctxLabel}</div>
          </div>
        </div>
        <div className="ask-hd-r">
          {messages.length > 0 && (
            <button className="ask-hd-btn" onClick={clearChat} title="Clear conversation">
              <Icon name="trash" size={12}/>
            </button>
          )}
          <button className="ask-hd-btn" onClick={() => setOpen(false)} title="Close">
            <Icon name="x" size={14}/>
          </button>
        </div>
      </header>

      <div className="ask-body" ref={bodyRef}>
        {messages.length === 0 && (
          <div className="ask-welcome">
            <div className="ask-welcome-h">What can I help with?</div>
            <div className="ask-welcome-sub">I see the data on the screen you're on. Ask anything — or pick a starter.</div>
            <div className="ask-starters">
              {starters.map((s, i) => (
                <button key={i} className="ask-starter" onClick={() => send(s)}>
                  <Icon name="zap" size={11}/>
                  <span>{s}</span>
                </button>
              ))}
            </div>
            <div className="ask-capabilities">
              <div className="caps">Capabilities</div>
              <ul>
                <li>Summarize sites, inspections, detections, artefacts</li>
                <li>Compare cycles · explain deltas</li>
                <li>Recommend flight windows · next actions</li>
                <li>Draft reporting language</li>
              </ul>
            </div>
          </div>
        )}
        {messages.map((m, i) => (
          <AskMessage key={i} msg={m}/>
        ))}
        {pending && (
          <div className="ask-msg ask-msg-a">
            <div className="ask-msg-ic"><Icon name="sparkles" size={11}/></div>
            <div className="ask-msg-body">
              <div className="ask-typing">
                <span/><span/><span/>
              </div>
            </div>
          </div>
        )}
      </div>

      <footer className="ask-foot">
        <div className="ask-input-wrap">
          <textarea
            className="ask-input"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
            }}
            placeholder="Ask about this screen…"
            rows={1}
          />
          <button className="ask-send" onClick={() => send()} disabled={pending || !input.trim()} title="Send">
            <Icon name="send" size={13}/>
          </button>
        </div>
        <div className="ask-foot-hint">
          <span>Enter to send · Shift+Enter for newline</span>
          <span className="grow"/>
          <span className="mono">haiku-4.5</span>
        </div>
      </footer>
    </aside>
  );
}

function AskMessage({ msg }) {
  if (msg.role === "user") {
    return (
      <div className="ask-msg ask-msg-u">
        <div className="ask-msg-body">{msg.content}</div>
      </div>
    );
  }
  // Render citation chips inline for [X] patterns
  const parts = msg.content.split(/(\[[^\]]+\])/g);
  return (
    <div className={`ask-msg ask-msg-a ${msg.error ? "is-err" : ""}`}>
      <div className="ask-msg-ic"><Icon name="sparkles" size={11}/></div>
      <div className="ask-msg-body">
        {parts.map((p, i) => {
          if (p.startsWith("[") && p.endsWith("]")) {
            return <span key={i} className="ask-cite">{p.slice(1, -1)}</span>;
          }
          return <span key={i}>{p}</span>;
        })}
      </div>
    </div>
  );
}

/* Root — wraps FAB + panel, listens to ⌘K */
function AskSkyOps({ route, activeSite, activeMic, stage }) {
  const [open, setOpen] = useStateAsk(false);
  const ctx = { route, activeSite, activeMic, stage };

  useEffectAsk(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        setOpen(v => !v);
      }
      if (e.key === "Escape" && open) setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <>
      <AskFab open={open} setOpen={setOpen} route={route}/>
      <AskPanel open={open} setOpen={setOpen} ctx={ctx}/>
    </>
  );
}

window.AskSkyOps = AskSkyOps;
Object.assign(window, { buildAskContext, starterPrompts });