// EvidenceDrawer — slide-in from right, 400px wide.

// React hooks (Babel-standalone — make hooks visible per-script)
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;

const edStyles = {
  scrim: { position: "fixed", inset: 0, background: "rgba(14,10,26,0.55)", zIndex: 70 },
  panel: {
    position: "fixed", top: 0, right: 0, bottom: 0, width: 400,
    background: "var(--vk-surface-1)",
    borderLeft: "1px solid var(--vk-border-emphasis)",
    zIndex: 80, display: "flex", flexDirection: "column",
    animation: "vkslide 200ms cubic-bezier(0.2,0.7,0.2,1)",
  },
  header: {
    padding: 16, borderBottom: "1px solid var(--vk-border-subtle)",
    display: "flex", alignItems: "flex-start", gap: 8,
  },
  body: { padding: 16, display: "flex", flexDirection: "column", gap: 14, flex: 1, overflowY: "auto" },
  snippet: {
    fontSize: 13, lineHeight: 1.6, color: "var(--vk-text-primary)",
    padding: 12, background: "var(--vk-surface-2)", borderRadius: 5,
    borderLeft: "2px solid var(--vk-magenta)",
  },
  metaRow: { display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--vk-text-secondary)", padding: "4px 0", borderBottom: "1px solid var(--vk-border-subtle)" },
};

function EvidenceDrawer({ evidence, onClose }) {
  if (!evidence) return null;
  return (
    <>
      <div style={edStyles.scrim} onClick={onClose}></div>
      <div style={edStyles.panel}>
        <div style={edStyles.header}>
          <Icon name="ti-folder" style={{ fontSize: 18, color: "var(--vk-text-tertiary)" }} />
          <div style={{ flex: 1 }}>
            <MicroCap>Evidence</MicroCap>
            <div style={{ fontSize: 14, fontWeight: 500, color: "var(--vk-text-primary)", marginTop: 4, lineHeight: 1.4 }}>
              {evidence.source_title}
            </div>
          </div>
          <button
            className="vk-btn vk-btn--ghost"
            onClick={onClose}
            aria-label="Close drawer"
            style={{ width: 28, padding: 0, justifyContent: "center" }}
          >
            <Icon name="ti-x" style={{ fontSize: 16 }} />
          </button>
        </div>
        <div style={edStyles.body}>
          <div style={edStyles.snippet}>"{evidence.snippet}"</div>

          <div>
            <MicroCap>Metadata</MicroCap>
            <div style={{ marginTop: 6 }}>
              <div style={edStyles.metaRow}>
                <span>Publisher</span>
                <span style={{ color: "var(--vk-text-primary)" }}>{evidence.publisher_or_owner}</span>
              </div>
              <div style={edStyles.metaRow}>
                <span>Source type</span>
                <span style={{ color: "var(--vk-text-primary)" }}>{evidence.source_type}</span>
              </div>
              <div style={edStyles.metaRow}>
                <span>Published</span>
                <span className="vk-mono" style={{ color: "var(--vk-text-primary)" }}>{evidence.date_published}</span>
              </div>
              <div style={edStyles.metaRow}>
                <span>Accessed</span>
                <span className="vk-mono" style={{ color: "var(--vk-text-primary)" }}>{evidence.date_accessed}</span>
              </div>
              <div style={edStyles.metaRow}>
                <span>Confidence</span>
                <ConfPill confidence={evidence.confidence} />
              </div>
              <div style={edStyles.metaRow}>
                <span>City relevance</span>
                <span style={{ color: "var(--vk-text-primary)" }}>{evidence.city_relevance}</span>
              </div>
              <div style={edStyles.metaRow}>
                <span>evidence_id</span>
                <span className="vk-mono" style={{ color: "var(--vk-text-tertiary)" }}>{evidence.evidence_id}</span>
              </div>
            </div>
          </div>

          <a
            href={evidence.source_url}
            target="_blank"
            rel="noreferrer"
            className="vk-btn"
            style={{ alignSelf: "flex-start", textDecoration: "none", borderBottom: "1px solid var(--vk-border-subtle)" }}
          >
            <Icon name="ti-external-link" style={{ fontSize: 14 }} />
            Open source
            <span className="vk-mono" style={{ fontSize: 11, color: "var(--vk-text-tertiary)", marginLeft: 4, overflow: "hidden", textOverflow: "ellipsis", maxWidth: 180 }}>
              {evidence.source_url.replace(/^https?:\/\//, "")}
            </span>
          </a>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { EvidenceDrawer });