/* conversation.jsx — stredný panel: hlavička, vlákno správ, compose box */

const TYP_META = {
  "Prijatý e-mail": { label: "Prijatý e-mail", icon: "mail", farba: "var(--text-2)" },
  "Odpoveď zákazníkovi": { label: "Odpoveď zákazníkovi", icon: "send", farba: "var(--accent)" },
  "Interná poznámka": { label: "Interná poznámka", icon: "note", farba: "var(--p-vysoka)" },
};

/* ---------- SLA odpočet badge ---------- */
function SlaBadge({ termin, stav, eskalovany, now }) {
  const hotovo = ["Vyriešený", "Zatvorený"].includes(stav);
  const zostava = termin - now;
  const poTermine = zostava < 0;

  if (hotovo) {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "6px 12px", borderRadius: 999,
        background: "color-mix(in srgb, var(--green) 12%, transparent)", color: "var(--green)", fontSize: 12.5, fontWeight: 600 }}>
        <Icon name="checkCircle" size={15} /> {stav === "Vyriešený" ? "Vyriešený" : "Zatvorený"}
      </div>
    );
  }
  const warn = zostava < 3600 * 1000;
  const farba = poTermine ? "var(--red)" : warn ? "var(--p-vysoka)" : "var(--text)";
  const bg = poTermine ? "var(--danger-tint)" : warn ? "var(--warn-tint)" : "var(--surface-3)";
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 12px", borderRadius: 999,
      background: bg, color: farba, fontSize: 12.5, fontWeight: 600,
      border: "1px solid " + (poTermine ? "color-mix(in srgb, var(--red) 30%, transparent)" : "transparent") }}>
      {(poTermine || eskalovany) ? <Icon name="warning" size={15} /> : <Icon name="clock" size={15} />}
      <span style={{ color: "var(--text-2)", fontWeight: 600 }}>{poTermine ? "Po termíne o" : "Do eskalácie"}</span>
      <span style={{ fontVariantNumeric: "tabular-nums", fontWeight: 700, minWidth: 92, textAlign: "right" }}>{fmtCountdown(zostava).replace("−", "")}</span>
    </div>
  );
}

/* ---------- správa vo vlákne ---------- */
function MessageBubble({ m, technici }) {
  const meta = TYP_META[m.typ];
  const odTechnika = m.typ === "Odpoveď zákazníkovi" || m.typ === "Interná poznámka";
  const tech = technici.find((u) => u.meno === m.autor);
  const farba = tech ? tech.farba : "var(--p-stred)";
  const interna = m.typ === "Interná poznámka";

  return (
    <div style={{ display: "flex", gap: 12 }}>
      <Avatar meno={m.autor} farba={odTechnika ? farba : "#69797e"} size={34} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5, flexWrap: "wrap" }}>
          <span style={{ fontWeight: 700, fontSize: 13.5 }}>{m.autor}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11.5, fontWeight: 600, color: meta.farba }}>
            <Icon name={meta.icon} size={13} /> {meta.label}
          </span>
          <span style={{ marginLeft: "auto", fontSize: 11.5, color: "var(--text-3)" }} title={fmtRelative(m.cas)}>{fmtDateTime(m.cas)}</span>
        </div>
        <div style={{
          padding: "12px 14px", borderRadius: "var(--radius)", fontSize: 13.5, lineHeight: 1.55, color: "var(--text)",
          whiteSpace: "pre-wrap", wordBreak: "break-word",
          background: interna ? "var(--warn-tint)" : odTechnika ? "var(--accent-tint)" : "var(--surface-2)",
          border: "1px solid " + (interna ? "color-mix(in srgb, var(--p-vysoka) 28%, transparent)" : odTechnika ? "color-mix(in srgb, var(--accent) 18%, transparent)" : "var(--stroke)"),
        }}>
          {m.text}
          {m.prilohy && m.prilohy.length > 0 && (
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 12 }}>
              {m.prilohy.map((p, i) => <AttachChip key={i} p={p} />)}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function AttachChip({ p, onRemove }) {
  const [hover, setHover] = useState(false);
  return (
    <span onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 10px", borderRadius: "var(--radius-sm)",
      background: "var(--surface)", border: "1px solid var(--stroke-strong)", fontSize: 12.5, maxWidth: 220,
    }}>
      <span style={{ color: "var(--accent)", display: "inline-flex" }}><Icon name={fileIcon(p.typ)} size={16} /></span>
      <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: 600 }}>{p.nazov}</span>
      {p.velkost && <span style={{ color: "var(--text-3)", fontSize: 11, flex: "0 0 auto" }}>{p.velkost}</span>}
      {onRemove && (
        <button onClick={onRemove} title="Odobrať" style={{ border: "none", background: "transparent", color: hover ? "var(--red)" : "var(--text-3)", display: "inline-flex", padding: 0, marginLeft: 2 }}>
          <Icon name="close" size={14} />
        </button>
      )}
    </span>
  );
}

function formatVelkost(bytes) {
  if (bytes < 1024) return bytes + " B";
  return Math.round(bytes / 1024) + " kB";
}

/* ---------- compose box ---------- */
function ComposeBox({ tiket, onOdoslat, onPoznamka }) {
  const [mod, setMod] = useState("Odpoveď zákazníkovi"); // alebo "Interná poznámka"
  const [text, setText] = useState("");
  const [prilohy, setPrilohy] = useState([]); // { id, file, nazov, velkost, typ }
  const [chyba, setChyba] = useState("");
  const [odosielam, setOdosielam] = useState(false);
  const taRef = useRef(null);
  const fileInputRef = useRef(null);

  useEffect(() => { setText(""); setPrilohy([]); setChyba(""); }, [tiket.cislo]);

  const ZAKAZANE = [".exe", ".bat", ".cmd", ".com", ".scr", ".js", ".vbs", ".ps1", ".msi"];
  const pridajPrilohu = () => fileInputRef.current && fileInputRef.current.click();
  const onFilesVybrane = (e) => {
    const vybrane = Array.from(e.target.files || []);
    e.target.value = ""; // umožní znovu vybrať ten istý súbor
    let chybaText = "";
    const nove = [];
    for (const file of vybrane) {
      if (ZAKAZANE.some((ext) => file.name.toLowerCase().endsWith(ext))) {
        chybaText = "Prípona súboru " + file.name + " je z bezpečnostných dôvodov zakázaná.";
        continue;
      }
      nove.push({ id: Date.now() + Math.random(), file, nazov: file.name, velkost: formatVelkost(file.size), typ: (file.name.split(".").pop() || "").toLowerCase() });
    }
    if (nove.length) setPrilohy((p) => [...p, ...nove]);
    setChyba(chybaText);
  };

  const reply = mod === "Odpoveď zákazníkovi";
  const submit = async () => {
    if (!text.trim()) { setChyba("Napíšte text " + (reply ? "odpovede" : "poznámky") + "."); taRef.current && taRef.current.focus(); return; }
    setOdosielam(true);
    try {
      if (reply) await onOdoslat(text.trim(), prilohy); else await onPoznamka(text.trim(), prilohy);
      setText(""); setPrilohy([]); setChyba("");
    } catch (e) {
      setChyba(e.message || "Odoslanie zlyhalo, skús to prosím znova.");
    } finally {
      setOdosielam(false);
    }
  };

  const hotovo = ["Vyriešený", "Zatvorený"].includes(tiket.stav);

  return (
    <div style={{ borderTop: "1px solid var(--stroke)", background: "var(--surface)", padding: "12px 18px 14px" }}>
      <div style={{ display: "flex", gap: 4, marginBottom: 10 }}>
        {["Odpoveď zákazníkovi", "Interná poznámka"].map((m) => {
          const aktiv = mod === m;
          const meta = TYP_META[m];
          return (
            <button key={m} onClick={() => { setMod(m); setChyba(""); }} style={{
              display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: "var(--radius-sm)",
              border: "1px solid " + (aktiv ? "transparent" : "var(--stroke)"), fontSize: 13, fontWeight: 600,
              background: aktiv ? (reply ? "var(--accent-tint)" : "var(--warn-tint)") : "transparent",
              color: aktiv ? meta.farba : "var(--text-2)", transition: "background .12s",
            }}>
              <Icon name={meta.icon} size={15} /> {m}
            </button>
          );
        })}
      </div>

      <div style={{
        border: "1px solid var(--stroke-strong)", borderRadius: "var(--radius)", background: "var(--surface-2)",
        overflow: "hidden", transition: "border-color .12s",
      }}>
        <textarea ref={taRef} value={text} onChange={(e) => { setText(e.target.value); setChyba(""); }}
          placeholder={reply ? "Napíšte odpoveď zákazníkovi… (odošle sa e-mailom z helpdesk@proplusco.sk)" : "Napíšte internú poznámku pre kolegov… (zákazník ju nevidí)"}
          rows={3} style={{
            width: "100%", border: "none", outline: "none", resize: "vertical", minHeight: 64, maxHeight: 220,
            padding: "12px 14px", fontFamily: "inherit", fontSize: 13.5, lineHeight: 1.55, color: "var(--text)",
            background: "transparent",
          }} />
        {prilohy.length > 0 && (
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, padding: "0 12px 12px" }}>
            {prilohy.map((p) => <AttachChip key={p.id} p={p} onRemove={() => setPrilohy((arr) => arr.filter((x) => x.id !== p.id))} />)}
          </div>
        )}
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderTop: "1px solid var(--stroke)" }}>
          <input ref={fileInputRef} type="file" multiple onChange={onFilesVybrane} style={{ display: "none" }} />
          <Btn kind="subtle" size="sm" icon="paperclip" onClick={pridajPrilohu} disabled={odosielam}>Priložiť súbor</Btn>
          {reply && <span style={{ fontSize: 11.5, color: "var(--text-3)", display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="mail" size={13} /> Komu: {tiket.ziadatelEmail}</span>}
          <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
            {reply
              ? <Btn kind="green" icon="send" onClick={submit} disabled={odosielam}>{odosielam ? "Odosielam…" : "Odoslať userovi"}</Btn>
              : <Btn kind="primary" icon="note" onClick={submit} disabled={odosielam}>{odosielam ? "Ukladám…" : "Uložiť poznámku"}</Btn>}
          </div>
        </div>
      </div>

      {chyba && (
        <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--red)" }}>
          <Icon name="warning" size={14} /> {chyba}
        </div>
      )}
      {hotovo && (
        <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--text-3)" }}>
          <Icon name="checkCircle" size={14} /> Tiket je {tiket.stav.toLowerCase()}. Odpoveď ho automaticky vráti do stavu „V riešení".
        </div>
      )}
    </div>
  );
}

/* ---------- celý konverzačný panel ---------- */
function Conversation({ tiket, technici, now, onOdoslat, onPoznamka, onToggleDetail, detailOpen, onBack }) {
  const threadRef = useRef(null);
  useEffect(() => {
    const el = threadRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [tiket.cislo, tiket.komunikacia.length]);

  return (
    <main className="hd-conversation" style={{ display: "flex", flexDirection: "column", minWidth: 0, height: "100%", background: "var(--bg)" }}>
      <header style={{ padding: "12px 18px", borderBottom: "1px solid var(--stroke)", background: "var(--surface)", flex: "0 0 auto" }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
          <button className="hd-back" onClick={onBack} style={{ display: "none", border: "none", background: "transparent", color: "var(--text-2)", padding: 4, marginLeft: -4 }}>
            <Icon name="chevron" size={20} style={{ transform: "scaleX(-1)" }} />
          </button>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
              <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--accent)", fontVariantNumeric: "tabular-nums" }}>{tiket.cislo}</span>
              <StatusDot stav={tiket.stav} />
              <span style={{ fontSize: 12, color: "var(--text-3)" }}>{tiket.kategoria}</span>
              {tiket.eskalovany && <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11.5, fontWeight: 700, color: "var(--red)" }}><Icon name="warning" size={13} /> Eskalovaný</span>}
            </div>
            <h1 style={{ margin: 0, fontSize: 18, fontWeight: 700, letterSpacing: "-.01em", lineHeight: 1.25,
              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{tiket.predmet}</h1>
          </div>
          <div style={{ flex: "0 0 auto", display: "flex", alignItems: "center", gap: 8 }}>
            <SlaBadge termin={tiket.termin} stav={tiket.stav} eskalovany={tiket.eskalovany} now={now} />
            <IconBtn name="grid" title={detailOpen ? "Skryť detail" : "Zobraziť detail"} active={detailOpen} onClick={onToggleDetail} />
          </div>
        </div>
      </header>

      <div ref={threadRef} style={{ flex: 1, overflowY: "auto", padding: "20px 18px", display: "flex", flexDirection: "column", gap: 18 }}>
        {tiket.komunikacia.map((m) => <MessageBubble key={m.id} m={m} technici={technici} />)}
      </div>

      <ComposeBox tiket={tiket} onOdoslat={onOdoslat} onPoznamka={onPoznamka} />
    </main>
  );
}

Object.assign(window, { Conversation, SlaBadge, AttachChip });