/* global React, Icon */
// Feature 2 — GitHub Triggers (index, connect, edit, history, empty)

const REPOS = [
  { name: "tinhnguyen0110/myapp", health: "ok", since: "12 days" },
  { name: "tinhnguyen0110/groundwork", health: "warn", since: "3 days" },
];

const TRIGGERS = [
  {
    id: "t1", name: "Production guard", repo: "tinhnguyen0110/myapp",
    branch: "main", events: ["push","pr"],
    sel: { type: "feature", label: "Stripe Payments", count: 12 },
    check: "QA Runner — Stripe full", required: true,
    last: { when: "2 min ago", verdict: "pass", n: 12, total: 12, sha: "abc123de", msg: "fix charge endpoint timeout", by: "tinhnguyen0110" },
    enabled: true,
  },
  {
    id: "t2", name: "Feature branch smoke", repo: "tinhnguyen0110/myapp",
    branch: "feature/*", events: ["pr"],
    sel: { type: "suite", label: "Smoke", count: 3 },
    check: "QA Runner — smoke", required: false,
    last: { when: "15 min ago", verdict: "fail", n: 2, total: 3, sha: "5e4d3c2b", msg: "wip auth refactor", by: "collaborator" },
    enabled: true,
  },
  {
    id: "t3", name: "Nightly regression", repo: "tinhnguyen0110/groundwork",
    branch: "main", events: ["scheduled"],
    sel: { type: "feature", label: "Full regression", count: 84 },
    check: "QA Runner — nightly", required: false,
    last: { when: "12h ago", verdict: "error", n: 0, total: 84, msg: "PAT expired" },
    enabled: false,
  },
];

const HEALTH_BADGE = (h) => h === "ok"
  ? <span className="status pass" style={{fontSize:10}}><Icon name="check" size={10}/>HEALTHY</span>
  : <span className="status fail" style={{fontSize:10}}><Icon name="bolt" size={10}/>PAT 401</span>;

const VERDICT_DOT = (v) => <span className={"dot " + (v === "pass" ? "pass" : v === "fail" ? "fail" : "idle")} style={{boxShadow:'none'}}/>;

const TriggerCard = ({ t }) => (
  <div className={"trig" + (!t.enabled ? " trig--disabled" : "")}>
    <div className="trig__h">
      <div className="trig__id mono muted">#{t.id.slice(1)}</div>
      <div className="trig__name">{t.name}</div>
      {t.required && <span className="chip chip--accent" style={{fontSize:10}}><Icon name="lock" size={9}/>required</span>}
      {!t.enabled && <span className="chip" style={{fontSize:10}}>disabled</span>}
      <div style={{flex:1}}/>
      <label className="switch"><input type="checkbox" defaultChecked={t.enabled}/><span/></label>
    </div>
    <div className="trig__meta">
      <span className="trig__chip"><Icon name="branch" size={10}/><span className="mono">{t.repo}</span></span>
      <span className="trig__chip"><span className="mono" style={{color:'var(--fg)'}}>{t.branch}</span></span>
      <span className="trig__chip">{t.events.includes("push") && <span className="ev-tag">push</span>}{t.events.includes("pr") && <span className="ev-tag">PR</span>}{t.events.includes("scheduled") && <span className="ev-tag">scheduled</span>}</span>
    </div>
    <div className="trig__run">
      <span className="muted">Run</span>
      <span className="mono"><Icon name={t.sel.type === "feature" ? "folder" : "layers"} size={11}/> {t.sel.label}</span>
      <span className="muted mono">({t.sel.count} TCs)</span>
      <span style={{flex:1}}/>
      <span className="muted">Status check</span>
      <span className="mono" style={{color:'var(--fg-2)'}}>{t.check}</span>
    </div>
    <div className="trig__last">
      {VERDICT_DOT(t.last.verdict)}
      <span className="muted">Last fired</span>
      <b>{t.last.when}</b>
      <span className="muted">·</span>
      {t.last.verdict === "pass" && <span style={{color:'var(--pass)'}}>✓ {t.last.n}/{t.last.total} passed</span>}
      {t.last.verdict === "fail" && <span style={{color:'var(--fail)'}}>✗ {t.last.n}/{t.last.total} passed</span>}
      {t.last.verdict === "error" && <span style={{color:'var(--fail)'}}>error · {t.last.msg}</span>}
      {t.last.sha && <><span className="muted">on</span><span className="mono" style={{color:'var(--fg-2)'}}>{t.last.sha}</span></>}
      {t.last.msg && t.last.verdict !== "error" && <><span className="muted">·</span><span className="muted" style={{maxWidth:240, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>"{t.last.msg}"</span></>}
    </div>
    <div className="trig__actions">
      <button className="btn btn--ghost" style={{height:24}}><Icon name="play" size={10}/>Test fire</button>
      <button className="btn btn--ghost" style={{height:24}}><Icon name="edit" size={10}/>Edit</button>
      <button className="btn btn--ghost" style={{height:24}}><Icon name="history" size={10}/>Run history</button>
      <div style={{flex:1}}/>
      <button className="btn btn--ghost" style={{height:24, color:'var(--fail)'}}><Icon name="trash" size={10}/></button>
    </div>
  </div>
);

const GHTriggersIndex = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    <div className="page">
      <header className="page__h">
        <div>
          <h1 className="page__title">GitHub Triggers</h1>
          <div className="muted">Run tests automatically on push, PR, or schedule · all configured from the board</div>
        </div>
        <div style={{flex:1}}/>
        <button className="btn"><Icon name="book" size={11}/>Docs</button>
        <button className="btn btn--primary"><Icon name="plus" size={11}/>Add trigger</button>
      </header>

      <section className="settings-section">
        <div className="settings-section__h">
          <span>Connected repositories</span>
          <span className="chip mono">{REPOS.length}</span>
          <div style={{flex:1}}/>
          <button className="btn"><Icon name="plus" size={11}/>Connect new repo</button>
        </div>
        <div className="repo-list">
          {REPOS.map(r => (
            <div key={r.name} className="repo">
              <div className="repo__icon"><Icon name="branch" size={14}/></div>
              <div>
                <div className="mono" style={{color:'var(--fg)', fontSize:12.5}}>{r.name}</div>
                <div className="muted" style={{fontSize:11}}>connected {r.since} ago · webhook active · 2 triggers</div>
              </div>
              <div style={{flex:1}}/>
              {HEALTH_BADGE(r.health)}
              {r.health === "warn"
                ? <button className="btn"><Icon name="refresh" size={11}/>Reconnect</button>
                : <button className="btn btn--ghost"><Icon name="settings" size={11}/></button>}
              <button className="btn btn--ghost" style={{color:'var(--fail)'}}>Disconnect</button>
            </div>
          ))}
        </div>
      </section>

      <section className="settings-section">
        <div className="settings-section__h">
          <span>Triggers</span>
          <span className="chip mono">{TRIGGERS.length}</span>
          <div style={{flex:1}}/>
          <div className="seg-group">
            <span className="seg seg--active">All</span>
            <span className="seg">Active</span>
            <span className="seg">Disabled</span>
          </div>
        </div>
        <div className="trig-list">
          {TRIGGERS.map(t => <TriggerCard key={t.id} t={t}/>)}
        </div>
      </section>
    </div>
  </div>
);

// ─── Connect repo modal (3 sub-states stacked vertically as cards) ───
const GHConnectRepo = () => (
  <div className="frame app" data-theme="dark" style={{position:'relative'}}>
    {window.TopBar && <window.TopBar/>}
    <div style={{flex:1, opacity:0.32, pointerEvents:'none'}}/>
    <div className="modal-host">
      <div className="modal-back"/>
      <div className="modal modal--connect">
        <header className="modal__h">
          <div>
            <div className="modal__title"><Icon name="branch" size={13}/>Connect GitHub repository</div>
            <div className="modal__sub muted">Verified once per repo · webhook secret stays in this workspace</div>
          </div>
          <button className="btn btn--ghost"><Icon name="x" size={12}/></button>
        </header>

        <div style={{padding:'10px 18px 0'}}>
          <div className="stepper stepper--3">
            <div className="stepper__step stepper__step--done"><span className="stepper__n"><Icon name="check" size={10}/></span><span className="stepper__l">PAT</span></div>
            <div className="stepper__line stepper__line--done"/>
            <div className="stepper__step stepper__step--cur"><span className="stepper__n">2</span><span className="stepper__l">Webhook</span></div>
            <div className="stepper__line"/>
            <div className="stepper__step"><span className="stepper__n">3</span><span className="stepper__l">Verify</span></div>
          </div>
        </div>

        <div className="connect-body">
          <div className="step-card step-card--done">
            <div className="step-card__h"><span className="step-card__n done"><Icon name="check" size={11}/></span><span className="step-card__t">Generate Personal Access Token</span><span style={{flex:1}}/><span className="muted mono" style={{fontSize:11}}>verified · scopes ok</span></div>
            <div className="step-card__b">
              <div className="form-row"><label>Repo</label><input className="input mono" defaultValue="tinhnguyen0110/myapp"/></div>
              <div className="form-row"><label>Token</label><input className="input mono" type="password" defaultValue="ghp_•••••••••••••••••••••••a72f"/><button className="btn btn--ghost" style={{height:26}}><Icon name="eye" size={11}/></button></div>
              <div className="scope-list">
                <span className="muted">Scopes:</span>
                <span className="chip"><Icon name="check" size={9} style={{color:'var(--pass)'}}/><span className="mono">repo</span></span>
                <span className="chip"><Icon name="check" size={9} style={{color:'var(--pass)'}}/><span className="mono">admin:repo_hook</span></span>
              </div>
            </div>
          </div>

          <div className="step-card step-card--cur">
            <div className="step-card__h"><span className="step-card__n cur">2</span><span className="step-card__t">Add webhook in GitHub</span><div style={{flex:1}}/><span className="muted" style={{fontSize:11}}>Settings → Webhooks → Add webhook</span></div>
            <div className="step-card__b">
              <div className="form-row"><label>Payload URL</label>
                <div className="copyable mono">
                  <span style={{flex:1}}>https://qa-api.tinhdev.com/api/webhooks/github</span>
                  <button className="btn btn--ghost" style={{height:22}}><Icon name="copy" size={11}/></button>
                </div>
              </div>
              <div className="form-row"><label>Secret</label>
                <div className="copyable mono">
                  <span style={{flex:1}}>wh_secret_a72f91d4c8b2e6f0</span>
                  <button className="btn btn--ghost" style={{height:22}}><Icon name="eye" size={11}/></button>
                  <button className="btn btn--ghost" style={{height:22}}><Icon name="copy" size={11}/></button>
                </div>
              </div>
              <div className="form-row"><label>Content type</label><span className="select"><span className="mono">application/json</span></span></div>
              <div className="form-row form-row--top"><label>Events</label>
                <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                  <label className="check"><input type="checkbox" defaultChecked/><span>Pushes</span></label>
                  <label className="check"><input type="checkbox" defaultChecked/><span>Pull requests</span></label>
                  <label className="check"><input type="checkbox"/><span>Tag push</span></label>
                  <label className="check"><input type="checkbox"/><span>Releases</span></label>
                </div>
              </div>
            </div>
          </div>

          <div className="step-card">
            <div className="step-card__h"><span className="step-card__n">3</span><span className="step-card__t">Wait for ping</span><div style={{flex:1}}/><span className="dot running"/><span className="muted" style={{fontSize:11}}>listening for test webhook from GitHub…</span></div>
          </div>
        </div>

        <footer className="modal__f">
          <span className="muted mono" style={{fontSize:11}}>secrets stored in this workspace · revoke anytime</span>
          <div style={{flex:1}}/>
          <button className="btn btn--ghost">Cancel</button>
          <button className="btn btn--primary">I've added the webhook <Icon name="arrow" size={11}/></button>
        </footer>
      </div>
    </div>
  </div>
);

// ─── Add / Edit trigger modal ───
const GHEditTrigger = () => (
  <div className="frame app" data-theme="dark" style={{position:'relative'}}>
    {window.TopBar && <window.TopBar/>}
    <div style={{flex:1, opacity:0.32, pointerEvents:'none'}}/>
    <div className="modal-host">
      <div className="modal-back"/>
      <div className="modal modal--connect">
        <header className="modal__h">
          <div>
            <div className="modal__title"><Icon name="plus" size={13}/>New trigger</div>
            <div className="modal__sub muted">Run a feature, suite or specific TCs when GitHub fires an event</div>
          </div>
          <button className="btn btn--ghost"><Icon name="x" size={12}/></button>
        </header>

        <div className="trig-form">
          <div className="form-row"><label>Name</label><input className="input" defaultValue="Production guard" autoFocus/></div>

          <div className="form-row"><label>Repository</label><span className="select"><Icon name="branch" size={11}/><span className="mono">tinhnguyen0110/myapp</span><Icon name="chevronDown" size={10}/></span><label style={{marginLeft:16}}>Branch pattern</label><input className="input mono" defaultValue="main" style={{maxWidth:180}}/></div>
          <div className="form-row form-row--hint"><label/><span className="muted" style={{fontSize:11}}>Patterns: <span className="mono">main</span> · <span className="mono">feature/*</span> · <span className="mono">release/v*</span> · <span className="mono">**</span></span></div>

          <div className="form-row form-row--top"><label>Trigger on</label>
            <div className="event-cards">
              <label className="event-card event-card--on"><input type="checkbox" defaultChecked/><Icon name="arrow" size={14}/><div><div className="event-card__t">Push</div><div className="muted">commits to branch</div></div></label>
              <label className="event-card event-card--on"><input type="checkbox" defaultChecked/><Icon name="branch" size={14}/><div><div className="event-card__t">Pull request</div><div className="muted">opened or synced</div></div></label>
              <label className="event-card"><input type="checkbox"/><Icon name="bolt" size={14}/><div><div className="event-card__t">Tag push</div><div className="muted">refs/tags/*</div></div></label>
            </div>
          </div>

          <div className="form-row form-row--top"><label>Run</label>
            <div className="radio-group" style={{flex:1}}>
              <label className="radio-card radio-card--on">
                <input type="radio" name="sel" defaultChecked/>
                <span className="radio-card__dot"><span/></span>
                <div style={{flex:1}}>
                  <div className="radio-card__t">Feature</div>
                  <div className="radio-card__s muted">All TCs across all suites in a feature</div>
                </div>
                <span className="select"><Icon name="folder" size={11}/>Stripe Payments<span className="muted mono" style={{marginLeft:8}}>12 TCs</span><Icon name="chevronDown" size={10}/></span>
              </label>
              <label className="radio-card">
                <input type="radio" name="sel"/>
                <span className="radio-card__dot"><span/></span>
                <div style={{flex:1}}>
                  <div className="radio-card__t">Suite</div>
                  <div className="radio-card__s muted">Single suite</div>
                </div>
              </label>
              <label className="radio-card">
                <input type="radio" name="sel"/>
                <span className="radio-card__dot"><span/></span>
                <div style={{flex:1}}>
                  <div className="radio-card__t">Specific test cases</div>
                  <div className="radio-card__s muted">Pick individual TCs</div>
                </div>
              </label>
            </div>
          </div>

          <div className="form-row"><label>Status check name</label><input className="input mono" defaultValue="QA Runner — Stripe full"/></div>
          <div className="form-row form-row--hint"><label/><span className="muted" style={{fontSize:11}}>Shown next to your commit/PR on GitHub</span></div>

          <div className="form-row form-row--top"><label>Branch protection</label>
            <div className="protect">
              <label className="check" style={{fontSize:13}}><input type="checkbox" defaultChecked/><span><b>Required for merge</b><span className="muted" style={{marginLeft:6}}>(block PR if fail)</span></span></label>
              <div className="protect__hint">
                <Icon name="bolt" size={11} style={{color:'var(--warn)'}}/>
                <span className="muted">You must <b>also</b> enable this check in GitHub <span className="mono inline-code">Settings → Branches → Branch protection rules</span> for it to actually block merges. We can't enforce it from here.</span>
              </div>
            </div>
          </div>
        </div>

        <footer className="modal__f">
          <button className="btn btn--ghost"><Icon name="play" size={10}/>Test fire (dry run)</button>
          <div style={{flex:1}}/>
          <button className="btn btn--ghost">Cancel</button>
          <button className="btn btn--primary">Save trigger <span className="kbd" style={{marginLeft:4}}>⌘↵</span></button>
        </footer>
      </div>
    </div>
  </div>
);

// ─── Trigger run history ───
const GHTriggerHistory = () => {
  const runs = [
    { v: "pass", when: "2 min ago", branch: "main", sha: "abc123de", ev: "push", n: 12, total: 12, dur: "2m 14s", by: "tinhnguyen0110", msg: "fix charge endpoint timeout" },
    { v: "fail", when: "1 hr ago", branch: "main", sha: "9f8e7d6c", ev: "push", n: 10, total: 12, dur: "2m 03s", by: "tinhnguyen0110", msg: "refactor charge service",
      fails: ["TC-S001: HTTP 500 expected 200", "TC-S003: Timeout 10s"] },
    { v: "warn", when: "3 hrs ago", branch: "main", sha: "7c6b5a4f", ev: "PR #42", n: 11, total: 12, dur: "2m 09s", by: "collaborator", msg: "add metrics endpoint" },
    { v: "pass", when: "5 hrs ago", branch: "main", sha: "1a2b3c4d", ev: "push", n: 12, total: 12, dur: "1m 58s", by: "tinhnguyen0110", msg: "bump deps" },
    { v: "pass", when: "yesterday", branch: "main", sha: "8e7f6a5b", ev: "PR #41", n: 12, total: 12, dur: "2m 21s", by: "collaborator", msg: "improve idempotency" },
    { v: "fail", when: "2 days ago", branch: "main", sha: "d4c3b2a1", ev: "push", n: 9, total: 12, dur: "2m 47s", by: "tinhnguyen0110", msg: "wip pricing rewrite",
      fails: ["TC-S001: assertion failed", "TC-S007: 401 expected 200", "TC-S009: timeout"] },
  ];

  return (
    <div className="frame app" data-theme="dark">
      {window.TopBar && <window.TopBar/>}
      <div className="page">
        <header className="page__h">
          <div>
            <div className="muted" style={{fontSize:11.5, marginBottom:4}}>
              <Icon name="chevronLeft" size={10}/> GitHub Triggers ·
              <span className="mono" style={{color:'var(--fg-2)', marginLeft:6}}>tinhnguyen0110/myapp</span>
            </div>
            <h1 className="page__title">Run history · Production guard</h1>
            <div className="muted">All fires across the last 7 days · 184 total runs</div>
          </div>
          <div style={{flex:1}}/>
          <button className="btn btn--ghost"><Icon name="play" size={11}/>Test fire</button>
          <button className="btn btn--ghost"><Icon name="edit" size={11}/>Edit trigger</button>
        </header>

        <div className="hist-filter">
          <div className="form-row" style={{margin:0, gap:8}}>
            <label style={{width:'auto'}}>Branch</label><span className="select">all<Icon name="chevronDown" size={10}/></span>
            <label style={{width:'auto'}}>Status</label><span className="select">all<Icon name="chevronDown" size={10}/></span>
            <label style={{width:'auto'}}>Range</label><span className="select">last 7 days<Icon name="chevronDown" size={10}/></span>
            <div style={{flex:1}}/>
            <span className="stat-card stat-card--inline"><span className="muted">Pass rate</span><b style={{color:'var(--pass)', fontFamily:'var(--font-mono)'}}>83%</b></span>
            <span className="stat-card stat-card--inline"><span className="muted">Avg duration</span><b className="mono">2m 12s</b></span>
            <span className="stat-card stat-card--inline"><span className="muted">Last 24h</span><b className="mono">18 runs</b></span>
          </div>
        </div>

        <div className="hist-list">
          {runs.map((r,i) => (
            <div key={i} className={"hist hist--" + r.v}>
              <div className="hist__rail">
                {r.v === "pass" && <span className="hist__icon" style={{background:'var(--pass-soft)', color:'var(--pass)'}}><Icon name="check" size={12}/></span>}
                {r.v === "fail" && <span className="hist__icon" style={{background:'var(--fail-soft)', color:'var(--fail)'}}><Icon name="x" size={12}/></span>}
                {r.v === "warn" && <span className="hist__icon" style={{background:'oklch(0.78 0.15 75 / 0.14)', color:'var(--warn)'}}>!</span>}
              </div>
              <div className="hist__body">
                <div className="hist__top">
                  <span className="hist__when">{r.when}</span>
                  <span className="hist__meta mono">{r.branch} · <span style={{color:'var(--fg-2)'}}>{r.sha}</span> · {r.ev}</span>
                  <div style={{flex:1}}/>
                  {r.v === "pass" && <span className="hist__verdict" style={{color:'var(--pass)'}}>{r.n}/{r.total} passed</span>}
                  {r.v === "fail" && <span className="hist__verdict" style={{color:'var(--fail)'}}>{r.n}/{r.total} passed</span>}
                  {r.v === "warn" && <span className="hist__verdict" style={{color:'var(--warn)'}}>{r.n}/{r.total} passed</span>}
                  <span className="muted mono">in {r.dur}</span>
                </div>
                <div className="hist__commit">
                  <span className="muted">@{r.by}</span>
                  <span className="muted">·</span>
                  <span style={{color:'var(--fg-2)'}}>"{r.msg}"</span>
                </div>
                {r.fails && (
                  <div className="hist__fails">
                    {r.fails.map((f,j) => (
                      <div key={j} className="hist__fail">
                        <span className="hist__fail-dot"/>
                        <span className="mono" style={{color:'var(--fg-2)'}}>{f}</span>
                      </div>
                    ))}
                  </div>
                )}
                <div className="hist__actions">
                  <button className="btn btn--ghost" style={{height:22}}><Icon name="eye" size={10}/>Run details</button>
                  {r.fails && <button className="btn btn--ghost" style={{height:22}}><Icon name="layers" size={10}/>Failure cluster</button>}
                  <button className="btn btn--ghost" style={{height:22}}><Icon name="link" size={10}/>GitHub commit</button>
                </div>
              </div>
            </div>
          ))}
          <button className="btn btn--ghost" style={{alignSelf:'center', marginTop:6}}>Load more</button>
        </div>
      </div>
    </div>
  );
};

// ─── Empty states (3 stacked) ───
const GHEmpty = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    <div className="page">
      <header className="page__h">
        <div>
          <h1 className="page__title">GitHub Triggers</h1>
          <div className="muted">First-run states · reference</div>
        </div>
      </header>

      <div className="empties">
        <div className="empty-card">
          <div className="empty-card__art empty-card__art--repo"><Icon name="branch" size={22}/></div>
          <div className="empty-card__body">
            <div className="empty-card__t">No repositories connected</div>
            <div className="empty-card__s muted">Connect your first GitHub repo to start triggering tests automatically. Each repo takes ~1 minute to set up.</div>
            <div className="empty-card__cta">
              <button className="btn btn--primary"><Icon name="plus" size={11}/>Connect repository</button>
              <button className="btn btn--ghost"><Icon name="book" size={11}/>How it works</button>
            </div>
          </div>
        </div>

        <div className="empty-card">
          <div className="empty-card__art"><Icon name="bolt" size={22}/></div>
          <div className="empty-card__body">
            <div className="empty-card__t">Repo connected — add your first trigger</div>
            <div className="empty-card__s muted"><span className="mono" style={{color:'var(--fg-2)'}}>tinhnguyen0110/myapp</span> is healthy. Add a trigger to define when tests run.</div>
            <div className="empty-card__cta">
              <button className="btn btn--primary"><Icon name="plus" size={11}/>Add trigger</button>
              <button className="btn btn--ghost">Use template <span className="muted">(smoke on PR)</span></button>
            </div>
          </div>
        </div>

        <div className="empty-card">
          <div className="empty-card__art"><Icon name="history" size={22}/></div>
          <div className="empty-card__body">
            <div className="empty-card__t">No runs yet</div>
            <div className="empty-card__s muted">Push a commit to <span className="mono">main</span> or open a PR to fire <b>Production guard</b> for the first time.</div>
            <div className="empty-card__cta">
              <button className="btn"><Icon name="play" size={11}/>Test fire (dry run)</button>
              <button className="btn btn--ghost"><Icon name="copy" size={11}/>Copy git push command</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { GHTriggersIndex, GHConnectRepo, GHEditTrigger, GHTriggerHistory, GHEmpty });