/* global React, Emblem */
// ============================================================
//  AI Lawyer — UI components (LIVE verzija)
// ============================================================

function Icon({ name, size = 16, color = "currentColor", w = 1.8 }) {
  const p = { fill: "none", stroke: color, strokeWidth: w, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    plus:  <g {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></g>,
    clip:  <g {...p}><path d="M21 11.5l-8.5 8.5a4.5 4.5 0 0 1-6.4-6.4l8.7-8.7a3 3 0 0 1 4.3 4.3l-8.7 8.7a1.5 1.5 0 0 1-2.1-2.1l7.9-7.9"/></g>,
    send:  <g {...p}><line x1="12" y1="19" x2="12" y2="5"/><path d="M6 11l6-6 6 6"/></g>,
    chev:  <g {...p}><path d="M6 9l6 6 6-6"/></g>,
    copy:  <g {...p}><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/></g>,
    dl:    <g {...p}><path d="M12 4v11"/><path d="M7 11l5 5 5-5"/><path d="M5 20h14"/></g>,
    out:   <g {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><line x1="21" y1="12" x2="9" y2="12"/></g>,
    menu:  <g {...p}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></g>,
    x:     <g {...p}><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></g>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">{paths[name]}</svg>;
}

/* ============================== SIDEBAR ============================== */
function Sidebar({ t, conversations, activeId, onSelect, onNew, onLogout, mobileOpen, onClose, search }) {
  const ui = t.ui;
  const q = search ? search.query : "";
  const results = (search && search.results) || [];
  const searching = q.trim().length >= 2;
  return (
    <aside className={"sidebar" + (mobileOpen ? " mobile-open" : "")}>
      <div className="sb-brand">
        <Emblem size={42} variant="badge" />
        <div className="wordmark">
          <span className="name">AI <em>Lawyer</em></span>
          <span className="sub">{ui.brandSub}</span>
        </div>
        <button className="sb-close" onClick={onClose} aria-label="Close"><Icon name="x" size={20} /></button>
      </div>
      <button className="sb-new" onClick={onNew}>
        <span className="plus"><Icon name="plus" size={16} color="#c6a468" /></span>
        {ui.newConv}
      </button>
      <div className="sb-search">
        <input type="text" value={q} placeholder={ui.searchPh || "Iskanje…"}
          onChange={(e) => search && search.setQuery(e.target.value)} />
        {q && <button className="sb-search-x" onClick={() => search && search.setQuery("")} aria-label="clear"><Icon name="x" size={14} /></button>}
      </div>
      <div className="sb-list scroll scroll-navy">
        {searching ? (
          results.length === 0
            ? <div className="sb-empty">{ui.searchNo || "Ni zadetkov"}</div>
            : results.map((r) => (
                <button key={r.id} className="sb-item sb-result" onClick={() => onSelect(r.id)}>
                  <div className="t">{r.title}</div>
                  {r.matches.slice(0, 3).map((m, i) => (
                    <div key={i} className="sb-snip">
                      {m.where === "document"
                        ? <span className="sb-snip-tag">📎 {m.filename}</span>
                        : null}
                      <span className="sb-snip-txt">{m.snippet}</span>
                    </div>
                  ))}
                </button>
              ))
        ) : (
          <React.Fragment>
            <div className="sb-group-label">{ui.thisWeek}</div>
            {conversations.map((c) => (
              <button key={c.id}
                className={"sb-item" + (c.id === activeId ? " active" : "")}
                onClick={() => onSelect(c.id)}>
                <div className="t">{c.title}</div>
                {(c.ago || c.count !== "") && (
                  <div className="meta">
                    <span>{c.ago}</span>
                    {c.count !== "" && <span className="pill">{c.count} ⟡</span>}
                  </div>
                )}
              </button>
            ))}
            {conversations.length === 0 && <div className="sb-empty">{ui.noConvs || "Ni pogovorov"}</div>}
          </React.Fragment>
        )}
      </div>
      <div className="sb-foot">
        <div className="ava">{t.ui.userInitials || "AL"}</div>
        <div className="who">
          <b>{t.ui.userName}</b>
          {t.ui.userRole}
        </div>
      </div>
    </aside>
  );
}

/* ============================== TOPBAR ============================== */
function LangSwitch({ lang, setLang }) {
  const order = ["de", "en", "si"];
  return (
    <div className="lang" role="group" aria-label="Language">
      {order.map(code => (
        <button key={code} className={lang === code ? "on" : ""} onClick={() => setLang(code)}>
          {window.I18N[code].label}
        </button>
      ))}
    </div>
  );
}
function TopBar({ t, title, lang, setLang, onLogout, onMenu }) {
  return (
    <header className="topbar">
      <button className="tb-menu" onClick={onMenu} aria-label="Menu"><Icon name="menu" size={22} /></button>
      <div className="tb-left">
        <div className="tb-title">
          <div className="h">{title}</div>
          <div className="panel-dots">
            <span className="lbl">{t.ui.brandSub}</span>
            {window.MODEL_META.map(m => (
              <span key={m.id} className="d" style={{ background: m.hue }} />
            ))}
          </div>
        </div>
      </div>
      <div className="tb-right">
        <LangSwitch lang={lang} setLang={setLang} />
        <button className="ghost-btn" onClick={onLogout}>
          <Icon name="out" size={15} /> {t.ui.logout}
        </button>
      </div>
    </header>
  );
}

/* ============================== INTAKE BLOCK ============================== */
function IntakeBlock({ t, content }) {
  const [open, setOpen] = React.useState(true);
  const ui = t.ui;
  // content je lahko JSON (@@INTAKE_JSON@@{...}) ali navaden markdown (starejsi zapisi)
  let data = null;
  if (typeof content === "string" && content.indexOf("@@INTAKE_JSON@@") === 0) {
    try { data = JSON.parse(content.slice("@@INTAKE_JSON@@".length)); } catch (e) { data = null; }
  }
  const row = (label, val) => val ? (
    <p><b>{label}:</b> {val}</p>
  ) : null;
  return (
    <div className={"intake" + (open ? " open" : "")}>
      <button className="intake-head" onClick={() => setOpen(!open)}>
        <span className="ico">🔍</span>
        <span className="lab">{ui.intakeLabel || "Analiza"}</span>
        <span className="chev"><Icon name="chev" size={14} /></span>
      </button>
      {open && (data ? (
        <div className="intake-body">
          {row(ui.inSummary || "Summary", data.summary)}
          {row(ui.inGoal || "Goal", data.goal)}
          {row(ui.inTask || "Task", data.task)}
          <p className="intake-meta">
            {(ui.inArea || "Area")}: {data.legal_area} · {(ui.inJuris || "Jurisdiction")}: {data.jurisdiction} · {(ui.inMode || "Mode")}: {(ui.modes && ui.modes[data.mode]) || data.mode}
          </p>
        </div>
      ) : (
        <div className="intake-body" dangerouslySetInnerHTML={{ __html: window.mdToHtml(content) }} />
      ))}
    </div>
  );
}

/* ============================== MODEL CARD ============================== */
function ModelCard({ meta, model, open, onToggle, t }) {
  const thinking = model.status === "thinking";
  return (
    <button className={"mcard" + (open ? " open" : "") + (thinking ? " thinking" : "")}
      onClick={() => !thinking && onToggle()}>
      <div className="top">
        <span className="dot" style={{ background: thinking ? "#c9cdd4" : (meta ? meta.hue : "#888") }} />
        <span className="nm">{model.label || (meta && meta.name) || model.model}</span>
        {!thinking && <span className="chev"><Icon name="chev" size={13} /></span>}
      </div>
      {thinking ? (
        <div className="dots3"><span/><span/><span/></div>
      ) : (
        <div className={"body" + (open ? "" : " clamp")}
          dangerouslySetInnerHTML={{ __html: window.mdToHtml(model.answer) }} />
      )}
    </button>
  );
}

/* ============================== PANEL ============================== */
function Panel({ t, models, allDone, pending }) {
  const [openId, setOpenId] = React.useState(null);
  // poravnaj modele po MODEL_META vrstnem redu kjer mozno
  const metaFor = (m) => window.MODEL_META.find(x =>
    (m.label && x.name && m.label.toLowerCase().includes(x.id)) ||
    (m.model && m.model.toLowerCase().includes(x.id)) ||
    (m.label && x.name && m.label.toLowerCase().startsWith(x.name.toLowerCase().split(" ")[0]))
  ) || null;
  const list = pending && models.length === 0
    ? window.MODEL_META.map(meta => ({ label: meta.name, status: "thinking" }))
    : models;
  return (
    <div className="panel">
      <div className="panel-head">
        <span className="lab">{allDone ? t.ui.panelDone : t.ui.panelLabel}</span>
        <span className="rule" />
        <span className="count">{list.length} ⟡</span>
      </div>
      <div className="model-grid">
        {list.map((model, i) => (
          <ModelCard key={i} meta={pending ? window.MODEL_META[i] : metaFor(model)}
            model={model} open={openId === i}
            onToggle={() => setOpenId(openId === i ? null : i)} t={t} />
        ))}
      </div>
    </div>
  );
}

/* ============================== SYNTHESIS ============================== */
function SynthesisHero({ t, content, lang }) {
  const ui = t.ui;
  const [copied, setCopied] = React.useState(false);
  const [shown, setShown] = React.useState(content);
  const [translated, setTranslated] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  React.useEffect(() => { setShown(content); setTranslated(false); }, [content]);
  const copy = () => {
    navigator.clipboard.writeText(shown).then(() => {
      setCopied(true); setTimeout(() => setCopied(false), 1500);
    });
  };
  const doTranslate = async () => {
    if (translated) { setShown(content); setTranslated(false); return; }
    setBusy(true);
    try {
      const tx = await window.AILAPI.translate(content, lang);
      setShown(tx); setTranslated(true);
    } catch (e) {}
    setBusy(false);
  };
  return (
    <div className="synth enter">
      <div className="synth-head">
        <Emblem size={38} variant="badge" />
        <div className="meta">
          <div className="k">{ui.synthLabel}</div>
          <div className="by">{ui.synthBy}</div>
        </div>
      </div>
      <div className="synth-body">
        <div className="synth-md" dangerouslySetInnerHTML={{ __html: window.mdToHtml(shown) }} />
        <div className="synth-foot">
          <div className="acts">
            <button onClick={copy}><Icon name="copy" size={14} />{copied ? (ui.copied || "Kopirano") : ui.copy}</button>
            <button onClick={doTranslate} disabled={busy}>
              <Icon name="chev" size={14} />
              {busy ? (ui.translating || "…") : (translated ? (ui.showOriginal || "Original") : (ui.translate || "Prevedi"))}
            </button>
            <button className="exp-pdf"><Icon name="dl" size={14} />{ui.export}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================== USER MESSAGE ============================== */
function UserMessage({ t, text, docs }) {
  return (
    <div className="msg-user">
      <div className="bubble">
        <div>{text}</div>
        {docs && docs.length > 0 && docs.map((d, i) => (
          <div className="doc" key={i}>
            <span className="ic" />
            {d.filename || d.name}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  Icon, Sidebar, TopBar, LangSwitch, IntakeBlock, ModelCard, Panel, SynthesisHero, UserMessage,
});