/* Coach Builder — Aigent's flagship screen. Real sortable/paginated table + Create Coach modal. */
const { useState, useMemo, useEffect, useRef } = React;
const { AppShell } = window;
const { Button, Badge } = window;
const { PlusIcon, SearchIcon, SortIcon, ChevronRight, CoachIcon, XIcon, SparkIcon, TemplateIcon } = window;

/* ---------- Create Coach modal ---------- */
function CreateCoachModal({ onClose }) {
  const buildRef = useRef(null);
  useEffect(() => {
    buildRef.current && buildRef.current.focus();
    const onEsc = (e) => {if (e.key === "Escape") onClose();};
    document.addEventListener("keydown", onEsc);
    return () => document.removeEventListener("keydown", onEsc);
  }, []);
  return (
    <div className="overlay" onMouseDown={(e) => {if (e.target === e.currentTarget) onClose();}}>
      <div className="modal" role="dialog" aria-modal="true" aria-labelledby="cc-title">
        <button className="modal-close" onClick={onClose} aria-label="Close"><XIcon size={18} /></button>
        <div className="modal-head">
          <div className="modal-mascot"><img src={window.ROBOT_SRC} alt="Aigent mascot" /></div>
          <h1 id="cc-title">Create a Real-Time Coach</h1>
          <div className="modal-sub">Start from scratch or pick a pre-built template.</div>
        </div>
        <div className="choice-grid">
          <div className="choice-card">
            <div className="choice-ic"><SparkIcon size={20} /></div>
            <h3>Build from Scratch</h3>
            <p>Define your own keywords, message, and trigger for fully custom guidance.</p>
            <div className="choice-cta">
              <button className="btn btn-primary" ref={buildRef}>Build from Scratch</button>
            </div>
          </div>
          <div className="choice-card">
            <div className="choice-ic"><TemplateIcon size={20} /></div>
            <h3>Select a Template</h3>
            <p>Explore our pre-built templates and pick the one you need.</p>
            <div className="choice-cta">
              <button className="btn btn-primary" onClick={() => {window.location.href = "coach-templates.html";}}>Choose Template</button>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

/* ---------- tenant + user ---------- */
const ACCOUNTS = [
{ id: "bankmobile", name: "BankMobile", sub: "Enterprise" },
{ id: "northwind", name: "Northwind Trading Co." },
{ id: "atlas", name: "Atlas Financial Group" },
{ id: "verdant", name: "Verdant Health Systems" }];

const USER = { name: "Sophie", email: "sophie.guadira@bankmobile.com", initials: "SG" };

const SCREEN_ROUTES = { "coach-builder": "coach-builder.html", "call-monitor": "call-monitor.html", "performance": "performance-analytics.html", "help": "help.html" };
function navigateTo(id) {if (SCREEN_ROUTES[id]) window.location.href = SCREEN_ROUTES[id];}

/* ---------- curated page-1 coaches (A–M; includes edge cases) ---------- */
const CURATED = [
["Account Takeover Alert", "Live", 5902, 99], // edge: highest feedback
["Account Upgrade Offer", "Draft", 0, null], // edge: 0 triggers, draft
["ACH Return Resolution: Unauthorized Debit Investigation & Provisional Credit Walkthrough", "Live", 743, 84], // edge: long name
["Balance Inquiry Assistant", "Live", 4128, 87],
["Bill Pay Enrollment", "Live", 1902, 90],
["Card Replacement Request", "Live", 1156, 92],
["Card Travel Notice", "Paused", 318, 76],
["Credit Limit Increase Review", "Live", 612, 88],
["Dispute Resolution Walkthrough", "Live", 1488, 85],
["Fraud Alert Response", "Live", 3210, 94],
["Late Payment Outreach", "Paused", 612, 71],
["Mobile Deposit Troubleshooting", "Live", 2044, 90]];


/* ---------- generated fillers (N–Z, sort after curated) ---------- */
const FILLER_BASES = [
"New Account Onboarding", "Online Banking Enrollment", "Overdraft Fee Reversal",
"Overdraft Protection Enrollment", "Paperless Statement Opt-In", "Password Reset Flow",
"Payment Plan Negotiation", "PIN Reset Assistance", "Recurring Payment Cancellation",
"Rewards Redemption", "Routing Number Lookup", "Savings Goal Setup", "Scam Awareness Prompt",
"Statement Copy Request", "Stop Payment Order", "Subscription Cancellation Guidance",
"Tax Document Retrieval", "Transfer Limit Increase", "Travel Card Replacement",
"Two-Factor Setup", "Unauthorized Charge Dispute", "Username Recovery", "Virtual Card Issuance",
"Wealth Transfer Inquiry", "Wire Transfer Verification", "Yield Account Upsell",
"Zelle Payment Setup", "Zero Balance Alert"];

const VARIANTS = ["", " (Spanish)", " (Tier 2)", " (Returning Customer)", " (Priority Queue)"];

function mulberry32(seed) {
  return function () {
    seed |= 0;seed = seed + 0x6D2B79F5 | 0;
    let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
    return ((t ^ t >>> 14) >>> 0) / 4294967296;
  };
}

function buildData() {
  const rows = CURATED.map(([name, status, triggers, feedback], i) => ({
    id: "c" + i, name, status, triggers, feedback
  }));
  const rnd = mulberry32(42);
  let n = 0;
  for (let v = 0; v < VARIANTS.length && rows.length < 120; v++) {
    for (let b = 0; b < FILLER_BASES.length && rows.length < 120; b++) {
      const r = rnd();
      const status = r < 0.17 ? "Draft" : r < 0.38 ? "Paused" : "Live";
      const triggers = status === "Draft" ? 0 : Math.floor(rnd() * 5400) + 24;
      const feedback = status === "Draft" ? null : 66 + Math.floor(rnd() * 33);
      rows.push({ id: "f" + n, name: FILLER_BASES[b] + VARIANTS[v], status, triggers, feedback });
      n++;
    }
  }
  return rows;
}

const STATUS_ORDER = { Live: 0, Paused: 1, Draft: 2 };
const STATUS_TONE = { Live: "success", Paused: "warning", Draft: "neutral" };
const PER_PAGE = 12;

const COLUMNS = [
{ key: "name", label: "Coach Name" },
{ key: "status", label: "Coach Status" },
{ key: "triggers", label: "# of Triggers", num: true },
{ key: "feedback", label: "Positive Agent Feedback" }];


function fbColor(v) {return v >= 90 ? "var(--success)" : v >= 78 ? "var(--brand)" : "var(--warning)";}

function StatusBadge({ status }) {
  return <Badge tone={STATUS_TONE[status]}><span className="dot-ind"></span>{status}</Badge>;
}

function Pager({ page, pages, onPage }) {
  if (pages <= 1) return null;
  const set = new Set([1, pages, page, page - 1, page + 1]);
  if (page <= 3) {set.add(2);set.add(3);}
  if (page >= pages - 2) {set.add(pages - 1);set.add(pages - 2);}
  const list = [...set].filter((p) => p >= 1 && p <= pages).sort((a, b) => a - b);
  const items = [];
  let prev = 0;
  for (const p of list) {
    if (p - prev > 1) items.push(<span key={"e" + p} className="page-ellipsis">…</span>);
    items.push(
      <button key={p} className={"page-btn" + (p === page ? " active" : "")}
      onClick={() => p !== page && onPage(p)} aria-current={p === page ? "page" : undefined}>{p}</button>
    );
    prev = p;
  }
  return (
    <div className="pager">
      <button className="page-btn" disabled={page === 1} onClick={() => onPage(page - 1)} aria-label="Previous page">‹</button>
      {items}
      <button className="page-btn" disabled={page === pages} onClick={() => onPage(page + 1)} aria-label="Next page">›</button>
    </div>);

}

function App() {
  const all = useMemo(buildData, []);
  const [account, setAccount] = useState("bankmobile");
  const [sortCol, setSortCol] = useState("name");
  const [sortDir, setSortDir] = useState("asc");
  const [page, setPage] = useState(1);
  const [queryInput, setQueryInput] = useState("");
  const [query, setQuery] = useState("");

  const sorted = useMemo(() => {
    const arr = all.filter((r) => r.name.toLowerCase().includes(query.trim().toLowerCase()));
    const dir = sortDir === "asc" ? 1 : -1;
    arr.sort((a, b) => {
      let d;
      if (sortCol === "name") d = a.name.localeCompare(b.name);else
      if (sortCol === "status") d = STATUS_ORDER[a.status] - STATUS_ORDER[b.status];else
      if (sortCol === "triggers") d = a.triggers - b.triggers;else
      d = (a.feedback ?? -1) - (b.feedback ?? -1);
      return d * dir;
    });
    return arr;
  }, [all, sortCol, sortDir, query]);

  const total = sorted.length;
  const pages = Math.max(1, Math.ceil(total / PER_PAGE));
  const curPage = Math.min(page, pages);
  const start = (curPage - 1) * PER_PAGE;
  const slice = sorted.slice(start, start + PER_PAGE);
  const from = total === 0 ? 0 : start + 1;
  const to = Math.min(start + PER_PAGE, total);

  const toggleSort = (key) => {
    if (sortCol === key) setSortDir((d) => d === "asc" ? "desc" : "asc");else
    {setSortCol(key);setSortDir(key === "name" ? "asc" : "desc");}
    setPage(1);
  };
  const runSearch = (val) => {setQuery(val);setPage(1);};
  const [showCreate, setShowCreate] = useState(false);

  return (
    <AppShell
      active="coach-builder" section="Coach Builder" sectionIcon={CoachIcon}
      account={account} accounts={ACCOUNTS} onAccount={setAccount} user={USER}
      onNavigate={navigateTo}>
      
      <div className="page-head">
        <div>
          <div className="greet">Welcome back, {USER.name}</div>
          <h1>Coaches</h1>
          <div className="sub">Build and manage the real-time scripts that guide your agents on live calls.</div>
        </div>
        <Button variant="primary" onClick={() => setShowCreate(true)}>
          <PlusIcon size={17} /> Create Coach
        </Button>
      </div>

      {showCreate && <CreateCoachModal onClose={() => setShowCreate(false)} />}

      <div className="table-card">
        <div className="table-toolbar">
          <div className="rec-count">
            Showing <b>{from}–{to}</b> of <b>{total}</b> {total === 1 ? "coach" : "coaches"}
          </div>
          <div className="table-search">
            <div className="control has-leading">
              <span className="leading-icon"><SearchIcon size={16} /></span>
              <input className="input" type="text" placeholder="Search coaches…"
              value={queryInput}
              onChange={(e) => {setQueryInput(e.target.value);runSearch(e.target.value);}}
              onKeyDown={(e) => {if (e.key === "Enter") runSearch(queryInput);}} />
            </div>
            <Button variant="primary" onClick={() => runSearch(queryInput)} style={{ height: 38, padding: "0 16px" }}>
              Search
            </Button>
          </div>
        </div>

        <table className="tbl">
          <thead>
            <tr>
              {COLUMNS.map((c) =>
              <th key={c.key} className={(c.num ? "num " : "") + (sortCol === c.key ? "active" : "")}
              onClick={() => toggleSort(c.key)}
              aria-sort={sortCol === c.key ? sortDir === "asc" ? "ascending" : "descending" : "none"} style={{ textAlign: "left" }}>
                  <span className={"th-inner" + (c.num ? " num" : "")}>
                    {c.label}
                    <SortIcon state={sortCol === c.key ? sortDir : "none"} />
                  </span>
                </th>
              )}
              <th style={{ width: 40 }} aria-hidden="true"></th>
            </tr>
          </thead>
          <tbody>
            {slice.map((r) =>
            <tr key={r.id} onClick={() => {window.location.href = "coach-details.html";}}>
                <td><span className="coach-name">{r.name}</span></td>
                <td><StatusBadge status={r.status} /></td>
                <td className={"col-trig" + (r.triggers === 0 ? " zero" : "")} style={{ textAlign: "left" }}>{r.triggers.toLocaleString()}</td>
                <td>
                  {r.feedback == null ?
                <span className="fb-empty">—</span> :

                <span className="fb">
                      <span className="fb-bar"><i style={{ width: r.feedback + "%", background: fbColor(r.feedback) }}></i></span>
                      <span className="fb-val">{r.feedback}%</span>
                    </span>
                }
                </td>
                <td><span className="row-chev"><ChevronRight size={17} /></span></td>
              </tr>
            )}
            {slice.length === 0 &&
            <tr><td colSpan="5" style={{ textAlign: "center", padding: "40px 16px", color: "var(--muted)" }}>
                No coaches match “{query.trim()}”.
              </td></tr>
            }
          </tbody>
        </table>

        <Pager page={curPage} pages={pages} onPage={setPage} />
      </div>
    </AppShell>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);