/* details.jsx — pravý panel: detaily tiketu + akcie životného cyklu */

/* ---------- vlastný select (Fluent) ----------
   Voliteľný prop onNovaMoznost: keď je zadaný, dole v zozname pribudne "+ Nová možnosť",
   ktorá po kliknutí zobrazí textové pole na zadanie vlastnej hodnoty (namiesto zatvorenia). */
function Select({ value, options, onChange, render, width, dot, onNovaMoznost }) {
  const [open, setOpen] = useState(false);
  const [pridavam, setPridavam] = useState(false);
  const [novyText, setNovyText] = useState("");
  const cur = options.find((o) => (o.value || o) === value) || options[0];

  const zavriet = () => { setOpen(false); setPridavam(false); setNovyText(""); };
  const potvrdNovu = () => {
    const v = novyText.trim();
    if (!v) return;
    onNovaMoznost(v);
    onChange(v);
    zavriet();
  };

  return (
    <div style={{ position: "relative", width: width || "100%" }}>
      <button onClick={() => setOpen((v) => !v)} style={{
        width: "100%", display: "flex", alignItems: "center", gap: 8, padding: "7px 10px", borderRadius: "var(--radius-sm)",
        border: "1px solid var(--stroke-strong)", background: "var(--surface)", color: "var(--text)", fontSize: 13, fontWeight: 600,
        fontFamily: "inherit", textAlign: "left",
      }} onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--accent)"} onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--stroke-strong)"}>
        {render ? render(value) : <span>{value}</span>}
        <Icon name="chevronDown" size={15} style={{ marginLeft: "auto", color: "var(--text-3)" }} />
      </button>
      {open && (
        <>
          <div onClick={zavriet} style={{ position: "fixed", inset: 0, zIndex: 40 }} />
          <div style={{
            position: "absolute", left: 0, right: 0, top: "calc(100% + 4px)", zIndex: 41, background: "var(--surface)",
            border: "1px solid var(--stroke)", borderRadius: "var(--radius)", boxShadow: "var(--shadow-lg)", padding: 4,
            maxHeight: 260, overflowY: "auto", animation: "hd-pop .12s ease",
          }}>
            {options.map((o) => {
              const v = o.value || o;
              const aktiv = v === value;
              return (
                <button key={v} onClick={() => { onChange(v); zavriet(); }} style={{
                  display: "flex", alignItems: "center", gap: 8, width: "100%", padding: "8px 9px", border: "none",
                  background: aktiv ? "var(--accent-tint)" : "transparent", borderRadius: "var(--radius-sm)",
                  color: "var(--text)", fontSize: 13, fontWeight: 600, textAlign: "left",
                }} onMouseEnter={(e) => { if (!aktiv) e.currentTarget.style.background = "var(--surface-3)"; }} onMouseLeave={(e) => { if (!aktiv) e.currentTarget.style.background = "transparent"; }}>
                  {render ? render(v) : v}
                  {aktiv && <Icon name="check" size={15} style={{ marginLeft: "auto", color: "var(--accent)" }} />}
                </button>
              );
            })}
            {onNovaMoznost && (pridavam ? (
              <div style={{ display: "flex", gap: 6, padding: "6px 9px" }}>
                <input
                  autoFocus value={novyText} onChange={(e) => setNovyText(e.target.value)}
                  onKeyDown={(e) => { if (e.key === "Enter") potvrdNovu(); if (e.key === "Escape") setPridavam(false); }}
                  placeholder="Nová hodnota…"
                  style={{
                    flex: 1, minWidth: 0, padding: "6px 8px", borderRadius: "var(--radius-sm)", border: "1px solid var(--stroke-strong)",
                    background: "var(--surface)", color: "var(--text)", fontSize: 13, fontFamily: "inherit",
                  }}
                />
                <button onClick={potvrdNovu} title="Potvrdiť" style={{
                  border: "none", background: "var(--accent)", color: "#fff", borderRadius: "var(--radius-sm)",
                  padding: "0 10px", display: "inline-flex", alignItems: "center",
                }}>
                  <Icon name="check" size={15} />
                </button>
              </div>
            ) : (
              <button onClick={() => setPridavam(true)} style={{
                display: "flex", alignItems: "center", gap: 8, width: "100%", padding: "8px 9px", border: "none",
                background: "transparent", borderRadius: "var(--radius-sm)", color: "var(--accent)", fontSize: 13,
                fontWeight: 600, textAlign: "left",
              }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--surface-3)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                <Icon name="plus" size={15} /> Nová možnosť
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: ".5px", marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}

/* ---------- oslavná animácia (easter egg pri vyriešení tiketu) ---------- */
function CelebrationDancer({ dance, onDone }) {
  useEffect(() => {
    if (!dance) return;
    const t = setTimeout(onDone, 5200);
    return () => clearTimeout(t);
  }, [dance]);

  if (!dance) return null;
  return (
    <div style={{
      position: "absolute", left: "50%", bottom: "100%", marginBottom: 4, zIndex: 60,
      pointerEvents: "none", width: 0, height: 0,
    }}>
      <div className="hd-dancer-figure" style={{ position: "absolute", left: 0, bottom: 0, transform: "translateX(-50%)" }}>
        <img src="assets/dance-celebration.gif" alt="" style={{ display: "block", height: 108, width: "auto" }} />
      </div>
    </div>
  );
}

/* ---------- štopka (meranie odpracovaného času, zápis do CasZaznamy) ----------
   Beh sa zatiaľ drží len v localStorage (per zariadenie/prehliadač), nie v SharePointe
   (stĺpce CasStart/CasStartTechnik na Tickety existujú, ale appka ich zatiaľ nepoužíva —
   možné budúce vylepšenie pre zdieľanú viditeľnosť naprieč zariadeniami). Po reloade appky
   na tom istom zariadení štopka na danom tikete sama ukáže "beží od X" vďaka localStorage.
   Popri štopke je aj RucnyCas — pridanie odpracovaného času bez behu časovača. */
function useStopwatch(cislo, now) {
  const key = "hd_stopwatch_" + cislo;
  const [startTs, setStartTs] = useState(() => {
    const v = localStorage.getItem(key);
    return v ? Number(v) : null;
  });
  useEffect(() => {
    const v = localStorage.getItem(key);
    setStartTs(v ? Number(v) : null);
  }, [cislo]);
  const start = () => {
    const t = Date.now();
    localStorage.setItem(key, String(t));
    setStartTs(t);
  };
  const stop = () => {
    localStorage.removeItem(key);
    const elapsedMs = startTs ? Date.now() - startTs : 0;
    setStartTs(null);
    return elapsedMs;
  };
  return { running: startTs != null, elapsedMs: startTs ? now - startTs : 0, start, stop };
}

// Ručné dodatočné pridanie odpracovaného času (napr. keď technik zabudol spustiť štopku,
// alebo pracoval na tikete offline) — zapisuje do toho istého CasZaznamy zoznamu.
function RucnyCas({ actions }) {
  const [minuty, setMinuty] = useState("");
  const pridat = () => {
    const m = parseInt(minuty, 10);
    if (!m || m <= 0) return;
    actions.zaznamCasu(m);
    setMinuty("");
  };
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
      <input
        type="number" min="1" inputMode="numeric" value={minuty}
        onChange={(e) => setMinuty(e.target.value)}
        onKeyDown={(e) => { if (e.key === "Enter") pridat(); }}
        placeholder="min."
        style={{
          width: 64, padding: "6px 8px", borderRadius: "var(--radius-sm)", border: "1px solid var(--stroke-strong)",
          background: "var(--surface)", color: "var(--text)", fontSize: 13, fontFamily: "inherit",
        }}
      />
      <Btn kind="subtle" size="sm" icon="clock" onClick={pridat}>Pridať čas ručne</Btn>
    </div>
  );
}

function fmtMinuty(minuty) {
  const h = Math.floor(minuty / 60);
  const m = minuty % 60;
  return (h > 0 ? h + "h " : "") + m + "m";
}

function Stopwatch({ tiket, now, actions }) {
  const sw = useStopwatch(tiket.cislo, now);
  const onStop = () => {
    const elapsedMs = sw.stop();
    const minuty = Math.max(1, Math.round(elapsedMs / 60000));
    actions.zaznamCasu(minuty);
  };
  return (
    <Field label="Meranie času">
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 700, fontVariantNumeric: "tabular-nums", color: sw.running ? "var(--accent)" : "var(--text-3)" }}>
          {sw.running ? fmtCountdown(sw.elapsedMs) : "00h 00m 00s"}
        </div>
        {sw.running ? (
          <Btn kind="ghostDanger" size="sm" icon="close" onClick={onStop}>Stop</Btn>
        ) : (
          <Btn kind="default" size="sm" icon="clock" onClick={sw.start}>Štart</Btn>
        )}
      </div>
      <RucnyCas actions={actions} />
      <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 8 }}>
        Celkovo na tikete: <strong style={{ color: "var(--text-2)" }}>{fmtMinuty(tiket.celkovyCasMinut || 0)}</strong>
      </div>
    </Field>
  );
}

function DetailsPanel({ tiket, technici, jeAdmin, jaMeno, now, actions, onClose }) {
  const { STAVY, PRIORITY, KATEGORIE, PODKATEGORIE } = window.HELPDESK_DATA;
  const technik = technici.find((u) => u.meno === tiket.technik);
  const jeVlastnik = tiket.technik === jaMeno;
  const hotovo = ["Vyriešený", "Zatvorený"].includes(tiket.stav);
  const [dance, setDance] = useState(false);

  const stavRender = (v) => (<span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><StatusDot stav={v} />{v}</span>);
  const prioRender = (v) => (<span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span style={{ width: 7, height: 7, borderRadius: 2, background: PRIO_FARBA[v], transform: "rotate(45deg)" }} />{v}</span>);
  const techRender = (v) => {
    if (v === "— Nepriradený —") return <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--text-3)" }}><Icon name="person" size={16} />Nepriradený</span>;
    const u = technici.find((x) => x.meno === v);
    return <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Avatar meno={v} farba={u && u.farba} size={20} />{v}</span>;
  };

  return (
    <aside className="hd-details" style={{
      display: "flex", flexDirection: "column", background: "var(--surface)", borderLeft: "1px solid var(--stroke)",
      height: "100%", minHeight: 0, minWidth: 0,
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 16px", borderBottom: "1px solid var(--stroke)" }}>
        <span style={{ fontSize: 14, fontWeight: 700 }}>Detail tiketu</span>
        <IconBtn name="close" title="Zavrieť" size={16} onClick={onClose} />
      </div>

      <div style={{ flex: 1, overflowY: "auto", padding: 16 }}>
        {/* žiadateľ */}
        <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px", borderRadius: "var(--radius)", background: "var(--surface-2)", border: "1px solid var(--stroke)", marginBottom: 18 }}>
          <Avatar meno={tiket.ziadatelMeno} farba="#69797e" size={40} />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{tiket.ziadatelMeno}</div>
            <div style={{ fontSize: 12, color: "var(--text-2)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{tiket.ziadatelEmail}</div>
            <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 2 }}>{tiket.kopia ? "Kópia: " + tiket.kopia : "Bez kópie"}</div>
          </div>
        </div>

        <Field label="Stav">
          <Select value={tiket.stav} options={STAVY} onChange={(v) => actions.zmenaStavu(v)} render={stavRender} />
        </Field>
        <Field label="Priorita">
          <Select value={tiket.priorita} options={PRIORITY} onChange={(v) => actions.zmenaPriority(v)} render={prioRender} />
        </Field>

        <Field label="Priradený technik">
          {jeAdmin ? (
            <Select value={tiket.technik || "— Nepriradený —"} options={["— Nepriradený —", ...technici.map((u) => u.meno)]}
              onChange={(v) => actions.priradit(v === "— Nepriradený —" ? null : v)} render={techRender} />
          ) : (
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 10px", borderRadius: "var(--radius-sm)", border: "1px solid var(--stroke)", background: "var(--surface-2)", fontSize: 13, fontWeight: 600 }}>
              {techRender(tiket.technik || "— Nepriradený —")}
            </div>
          )}
          <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
            {tiket.stav === "Nový" && <Btn kind="primary" size="sm" icon="hand" full onClick={() => actions.prevziat()}>Prevziať tiket</Btn>}
            {tiket.technik && (jeVlastnik || jeAdmin) && tiket.stav !== "Nový" && !hotovo && <Btn kind="default" size="sm" icon="reopen" onClick={() => actions.uvolnit()}>Uvoľniť</Btn>}
          </div>
        </Field>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="Kategória">
            <Select value={tiket.kategoria} options={KATEGORIE} onChange={(v) => actions.zmenaKategorie(v)} onNovaMoznost={(v) => actions.pridatKategoriu(v)} />
          </Field>
          <Field label="Zdroj">
            <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "7px 10px", fontSize: 13, fontWeight: 600, color: "var(--text-2)" }}>
              <Icon name={tiket.zdroj === "E-mail" ? "mail" : "person"} size={15} /> {tiket.zdroj}
            </div>
          </Field>
        </div>

        <Field label="Téma (podkategória)">
          <Select value={tiket.podkategoria} options={PODKATEGORIE[tiket.kategoria] || ["Iné"]} onChange={(v) => actions.zmenaPodkategorie(v)} onNovaMoznost={(v) => actions.pridatPodkategoriu(tiket.kategoria, v)} />
          <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 6 }}>Tento výber napĺňa „Najčastejšie témy“ v prehľade Štatistika.</div>
        </Field>

        <Field label="Termín (SLA)">
          <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: hotovo ? "var(--text-2)" : (tiket.termin < now ? "var(--red)" : "var(--text)"), fontWeight: 600 }}>
            <Icon name="clock" size={15} /> {fmtDateTime(tiket.termin)}
          </div>
        </Field>

        <Stopwatch tiket={tiket} now={now} actions={actions} />

        {/* prílohy tiketu */}
        <Field label={"Prílohy tiketu (" + tiket.prilohyTiketu.length + ")"}>
          {tiket.prilohyTiketu.length === 0 ? (
            <div style={{ fontSize: 12.5, color: "var(--text-3)", padding: "10px 12px", border: "1px dashed var(--stroke-strong)", borderRadius: "var(--radius-sm)", textAlign: "center" }}>
              Žiadne prílohy
            </div>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {tiket.prilohyTiketu.map((p, i) => <AttachChip key={i} p={p} />)}
            </div>
          )}
        </Field>
      </div>

      {/* akcie životného cyklu */}
      <div style={{ position: "relative", borderTop: "1px solid var(--stroke)", padding: 14, display: "flex", flexDirection: "column", gap: 8 }}>
        <CelebrationDancer dance={dance} onDone={() => setDance(false)} />
        {!hotovo && (
          <Btn kind="green" icon="check" full onClick={() => { actions.vyriesit(); setDance(true); }}>Označiť ako vyriešený</Btn>
        )}
        {tiket.stav === "Vyriešený" && (
          <div style={{ display: "flex", gap: 8 }}>
            <Btn kind="ghostDanger" icon="close" full onClick={() => actions.zatvorit()}>Zatvoriť</Btn>
            <Btn kind="default" icon="reopen" full onClick={() => actions.znovuOtvorit()}>Znovu otvoriť</Btn>
          </div>
        )}
        {tiket.stav === "Zatvorený" && (
          <Btn kind="default" icon="reopen" full onClick={() => actions.znovuOtvorit()}>Znovu otvoriť tiket</Btn>
        )}
      </div>
    </aside>
  );
}

Object.assign(window, { DetailsPanel, Select, CelebrationDancer, Stopwatch });
