/* global React, Icon */
// Feature 3 — Slack/Discord notifications

const SlackMark = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
    <path d="M5 14.5a2 2 0 1 1-2-2h2v2zM6 14.5a2 2 0 1 1 4 0V20a2 2 0 1 1-4 0v-5.5z" fill="#E01E5A"/>
    <path d="M9.5 5a2 2 0 1 1 2-2v2h-2zM9.5 6a2 2 0 1 1 0 4H4a2 2 0 1 1 0-4h5.5z" fill="#36C5F0"/>
    <path d="M19 9.5a2 2 0 1 1 2 2h-2v-2zM18 9.5a2 2 0 1 1-4 0V4a2 2 0 1 1 4 0v5.5z" fill="#2EB67D"/>
    <path d="M14.5 19a2 2 0 1 1-2 2v-2h2zM14.5 18a2 2 0 1 1 0-4H20a2 2 0 1 1 0 4h-5.5z" fill="#ECB22E"/>
  </svg>
);
const DiscordMark = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="#5865F2">
    <path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.74 19.74 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.42 0-1.333.956-2.418 2.157-2.418 1.21 0 2.176 1.094 2.157 2.418 0 1.336-.956 2.42-2.157 2.42zm7.974 0c-1.183 0-2.157-1.085-2.157-2.42 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.094 2.157 2.418 0 1.336-.946 2.42-2.157 2.42z"/>
  </svg>
);

const CHANNELS = [
  {
    id: "c1", kind: "slack", name: "#ops-alerts",
    webhook: "hooks.slack.com/services/T0XXX/B0XXX/...XYZ",
    events: ["run.failed", "scheduled.failed"],
    last: "2 hrs ago", lastV: "fail", fired: 47, enabled: true,
  },
  {
    id: "c2", kind: "discord", name: "QA Runner",
    webhook: "discord.com/api/webhooks/12345.../abc...456",
    events: ["run.failed"], filters: { min: 3 },
    last: "5 days ago", lastV: "fail", fired: 12, enabled: true,
  },
  {
    id: "c3", kind: "slack", name: "#qa-passed (chatty)",
    webhook: "hooks.slack.com/services/T0XXX/B0YYY/...ABC",
    events: ["run.passed", "run.failed"],
    last: "12d ago", fired: 0, enabled: false,
  },
];

const EVENT_LABEL = {
  "run.failed": "Run failed",
  "run.passed": "Run passed",
  "suite.failed": "Suite failed",
  "scheduled.failed": "Scheduled failed",
  "trigger.failed": "Trigger failed",
};

const NotifIndex = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    <div className="page">
      <header className="page__h">
        <div>
          <h1 className="page__title">Notifications</h1>
          <div className="muted">Slack &amp; Discord alerts when runs complete · close the loop on async runs</div>
        </div>
        <div style={{flex:1}}/>
        <button className="btn"><Icon name="book" size={11}/>Webhook setup guide</button>
        <button className="btn btn--primary"><Icon name="plus" size={11}/>Add channel</button>
      </header>

      <div className="notif-stats">
        <div className="stat-card"><div className="stat-card__l muted">Channels</div><div className="stat-card__v mono">3</div><div className="stat-card__d muted">2 active · 1 disabled</div></div>
        <div className="stat-card"><div className="stat-card__l muted">Sent (30d)</div><div className="stat-card__v mono">59</div><div className="stat-card__d muted">avg 2.0 / day</div></div>
        <div className="stat-card"><div className="stat-card__l muted">Delivery rate</div><div className="stat-card__v mono" style={{color:'var(--pass)'}}>100%</div><div className="stat-card__d muted">0 webhook errors</div></div>
        <div className="stat-card"><div className="stat-card__l muted">Quietest hour</div><div className="stat-card__v mono">3 AM</div><div className="stat-card__d muted">deepest sleep ✓</div></div>
      </div>

      <div className="ch-list">
        {CHANNELS.map(c => (
          <div key={c.id} className={"ch" + (!c.enabled ? " ch--off" : "")}>
            <div className="ch__icon">
              {c.kind === "slack" ? <SlackMark/> : <DiscordMark/>}
            </div>
            <div className="ch__body">
              <div className="ch__top">
                <span className="ch__name">{c.name}</span>
                <span className="chip mono" style={{textTransform:'capitalize'}}>{c.kind}</span>
                {!c.enabled && <span className="chip">disabled</span>}
                <div style={{flex:1}}/>
                <label className="switch"><input type="checkbox" defaultChecked={c.enabled}/><span/></label>
              </div>
              <div className="ch__webhook mono muted">{c.webhook}</div>
              <div className="ch__events">
                <span className="muted">Events:</span>
                {c.events.map(e => (
                  <span key={e} className={"chip " + (e.includes("failed") ? "chip--danger" : "chip--accent")} style={{fontSize:10}}>
                    {EVENT_LABEL[e] || e}
                  </span>
                ))}
                {c.filters?.min && <span className="chip" style={{fontSize:10}}>min {c.filters.min} failures</span>}
                <div style={{flex:1}}/>
                {c.last && <span className="muted" style={{fontSize:11}}>last fired <b style={{color:'var(--fg-2)'}}>{c.last}</b></span>}
                <span className="muted mono" style={{fontSize:11}}>· {c.fired} sent</span>
              </div>
              <div className="ch__actions">
                <button className="btn btn--ghost" style={{height:22}}><Icon name="send" size={10}/>Send test</button>
                <button className="btn btn--ghost" style={{height:22}}><Icon name="edit" size={10}/>Edit</button>
                <button className="btn btn--ghost" style={{height:22}}><Icon name="history" size={10}/>Delivery log</button>
                <div style={{flex:1}}/>
                <button className="btn btn--ghost" style={{height:22, color:'var(--fail)'}}><Icon name="trash" size={10}/></button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// Add / edit channel modal (with live preview pane)
const NotifAddChannel = () => (
  <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--notif">
        <header className="modal__h">
          <div>
            <div className="modal__title"><Icon name="send" size={13} style={{color:'var(--accent)'}}/>Add notification channel</div>
            <div className="modal__sub muted">Webhook URL only · no OAuth, no app install</div>
          </div>
          <button className="btn btn--ghost"><Icon name="x" size={12}/></button>
        </header>

        <div className="notif-grid">
          <div className="notif-form">
            <div className="form-row form-row--top"><label>Type</label>
              <div className="kind-pick">
                <label className="kind-pick__c kind-pick__c--on"><input type="radio" name="k" defaultChecked/><SlackMark/><span>Slack</span></label>
                <label className="kind-pick__c"><input type="radio" name="k"/><DiscordMark/><span>Discord</span></label>
              </div>
            </div>

            <div className="form-row"><label>Name</label><input className="input" defaultValue="#ops-alerts" autoFocus/></div>
            <div className="form-row form-row--hint"><label/><span className="muted" style={{fontSize:11}}>Label only · for your reference</span></div>

            <div className="form-row form-row--top"><label>Webhook URL</label>
              <div style={{flex:1, display:'flex', flexDirection:'column', gap:4}}>
                <input className="input mono" defaultValue="https://hooks.slack.com/services/T01ABCDEF/B0XYZ123/aB12cD34eF56gH78"/>
                <span className="muted" style={{fontSize:11}}>Slack: <b>Settings → Integrations → Incoming Webhooks → Add</b> · paste here</span>
              </div>
            </div>

            <div className="form-row form-row--top"><label>Notify on</label>
              <div className="event-list">
                <label className="ev-row ev-row--on"><input type="checkbox" defaultChecked/><div><div className="ev-row__t">Run failed</div><div className="muted">Any TC fails</div></div></label>
                <label className="ev-row"><input type="checkbox"/><div><div className="ev-row__t">Run passed</div><div className="muted">Chatty — recommended only for prod</div></div></label>
                <label className="ev-row ev-row--on"><input type="checkbox" defaultChecked/><div><div className="ev-row__t">Scheduled failed</div><div className="muted">Nightly / cron run failures</div></div></label>
                <label className="ev-row ev-row--on"><input type="checkbox" defaultChecked/><div><div className="ev-row__t">GitHub trigger failed</div><div className="muted">PR / push triggered run failed</div></div></label>
                <label className="ev-row"><input type="checkbox"/><div><div className="ev-row__t">Suite failed</div><div className="muted">Suite-level batch fails</div></div></label>
              </div>
            </div>

            <div className="form-row form-row--top"><label>Filters</label>
              <div style={{flex:1, display:'flex', flexDirection:'column', gap:8}}>
                <div style={{display:'flex', alignItems:'center', gap:8, fontSize:12}}>
                  <span className="muted">Only notify if at least</span>
                  <input className="input mono" defaultValue="3" style={{width:60}}/>
                  <span className="muted">TCs fail</span>
                </div>
                <div style={{display:'flex', alignItems:'center', gap:8, fontSize:12}}>
                  <span className="muted">Limit to feature</span>
                  <span className="select"><Icon name="folder" size={11}/>Any feature<Icon name="chevronDown" size={10}/></span>
                </div>
                <div style={{display:'flex', alignItems:'center', gap:8, fontSize:12}}>
                  <span className="muted">Quiet hours</span>
                  <span className="select">disabled<Icon name="chevronDown" size={10}/></span>
                </div>
              </div>
            </div>
          </div>

          <aside className="notif-preview">
            <div className="notif-preview__h">
              <Icon name="eye" size={11}/>
              <span>Live preview</span>
              <div style={{flex:1}}/>
              <span className="seg-group">
                <span className="seg seg--active">Slack</span>
                <span className="seg">Discord</span>
              </span>
            </div>

            <div className="slack">
              <div className="slack__msg">
                <div className="slack__avatar">QA</div>
                <div className="slack__body">
                  <div className="slack__head">
                    <b>QA Runner</b>
                    <span className="slack__bot">APP</span>
                    <span className="slack__time">6:05 AM</span>
                  </div>
                  <div className="slack__attach">
                    <div className="slack__attach-bar"/>
                    <div className="slack__attach-body">
                      <div className="slack__title">🔴 Scheduled run failed</div>
                      <div className="slack__fields">
                        <div><span className="muted">Schedule</span><b className="mono">nightly-prod-regression</b></div>
                        <div><span className="muted">Suite</span><b className="mono">stripe-charges-prod</b></div>
                        <div><span className="muted">Result</span><b style={{color:'#e01e5a'}}>3 of 12 failed</b></div>
                        <div><span className="muted">Duration</span><b className="mono">2m 41s</b></div>
                      </div>
                      <div className="slack__list">
                        <div>• <span className="mono">TC-S001</span> — HTTP 502 from <span className="mono">/v1/charges</span></div>
                        <div>• <span className="mono">TC-S003</span> — timeout 10s</div>
                        <div>• <span className="mono">TC-S004</span> — assertion failed</div>
                      </div>
                      <div className="slack__btns">
                        <span className="slack__btn">📊 View run</span>
                        <span className="slack__btn">🔍 Failure cluster</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="muted" style={{fontSize:11, marginTop:10, padding:'0 4px'}}>
              <Icon name="bolt" size={10}/> Discord renders identically with a red embed bar (failure) or green (passed).
            </div>
          </aside>
        </div>

        <footer className="modal__f">
          <button className="btn"><Icon name="send" size={10}/>Send test message</button>
          <span className="muted mono" style={{fontSize:11}}>posts a "👋 QA Runner connected" to verify webhook</span>
          <div style={{flex:1}}/>
          <button className="btn btn--ghost">Cancel</button>
          <button className="btn btn--primary">Save channel</button>
        </footer>
      </div>
    </div>
  </div>
);

// Sample messages reference (Slack + Discord side-by-side)
const NotifSamples = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    <div className="page">
      <header className="page__h">
        <div>
          <h1 className="page__title">Message formats</h1>
          <div className="muted">Reference · how each event renders in Slack &amp; Discord</div>
        </div>
        <div style={{flex:1}}/>
        <button className="btn"><Icon name="copy" size={11}/>Copy webhook payload</button>
      </header>

      <div className="samples">
        {/* Slack — failure */}
        <div className="sample">
          <div className="sample__h"><SlackMark/><span><b>Slack</b> · run.failed</span><div style={{flex:1}}/><span className="chip chip--danger">RED</span></div>
          <div className="slack">
            <div className="slack__msg">
              <div className="slack__avatar">QA</div>
              <div className="slack__body">
                <div className="slack__head">
                  <b>QA Runner</b>
                  <span className="slack__bot">APP</span>
                  <span className="slack__time">6:05 AM</span>
                </div>
                <div className="slack__attach">
                  <div className="slack__attach-bar"/>
                  <div className="slack__attach-body">
                    <div className="slack__title">🔴 Scheduled run failed</div>
                    <div className="slack__fields">
                      <div><span className="muted">Schedule</span><b className="mono">nightly-prod-regression</b></div>
                      <div><span className="muted">Suite</span><b className="mono">stripe-charges-prod</b></div>
                      <div><span className="muted">Result</span><b style={{color:'#e01e5a'}}>3 of 12 failed</b></div>
                    </div>
                    <div className="slack__list">
                      <div>• <span className="mono">TC-S001</span> — HTTP 502 from <span className="mono">/v1/charges</span></div>
                      <div>• <span className="mono">TC-S003</span> — timeout 10s</div>
                      <div>• <span className="mono">TC-S004</span> — assertion failed</div>
                    </div>
                    <div className="slack__btns"><span className="slack__btn">📊 View run</span><span className="slack__btn">🔍 Failure cluster</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Slack — pass */}
        <div className="sample">
          <div className="sample__h"><SlackMark/><span><b>Slack</b> · run.passed</span><div style={{flex:1}}/><span className="chip" style={{color:'var(--pass)', borderColor:'oklch(0.74 0.15 145 / 0.4)'}}>GREEN</span></div>
          <div className="slack">
            <div className="slack__msg">
              <div className="slack__avatar">QA</div>
              <div className="slack__body">
                <div className="slack__head"><b>QA Runner</b><span className="slack__bot">APP</span><span className="slack__time">9:14 AM</span></div>
                <div className="slack__attach">
                  <div className="slack__attach-bar" style={{background:'#2EB67D'}}/>
                  <div className="slack__attach-body">
                    <div className="slack__title">✅ Trigger passed · Production guard</div>
                    <div className="slack__fields">
                      <div><span className="muted">Repo</span><b className="mono">tinhnguyen0110/myapp</b></div>
                      <div><span className="muted">Commit</span><b className="mono">abc123de · main</b></div>
                      <div><span className="muted">Result</span><b style={{color:'#2eb67d'}}>12 / 12 passed in 2m 14s</b></div>
                    </div>
                    <div className="slack__btns"><span className="slack__btn">📊 View run</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Discord — failure */}
        <div className="sample">
          <div className="sample__h"><DiscordMark/><span><b>Discord</b> · run.failed</span><div style={{flex:1}}/><span className="chip chip--danger">RED EMBED</span></div>
          <div className="dc">
            <div className="dc__msg">
              <div className="dc__avatar" style={{background:'#5865F2'}}>QA</div>
              <div className="dc__body">
                <div className="dc__head"><b>QA Runner</b><span className="dc__bot">BOT</span><span className="muted">Today at 6:05</span></div>
                <div className="dc__embed">
                  <div className="dc__embed-bar"/>
                  <div className="dc__embed-body">
                    <div className="dc__title">🔴 Scheduled run failed</div>
                    <div className="dc__sub muted">nightly-prod-regression</div>
                    <div className="dc__fields">
                      <div><span className="muted">Suite</span><b className="mono">stripe-charges-prod</b></div>
                      <div><span className="muted">Failures</span><b style={{color:'#ed4245'}}>3 / 12</b></div>
                      <div><span className="muted">Duration</span><b className="mono">2m 41s</b></div>
                      <div><span className="muted">Run by</span><b className="mono">scheduler</b></div>
                    </div>
                    <div className="dc__list">
                      <div>• <span className="mono">TC-S001</span> — HTTP 502 from <span className="mono">/v1/charges</span></div>
                      <div>• <span className="mono">TC-S003</span> — timeout 10s</div>
                      <div>• <span className="mono">TC-S004</span> — assertion failed</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Empty state */}
        <div className="sample">
          <div className="sample__h"><Icon name="send" size={12}/><span><b>Empty state</b> · no channels yet</span></div>
          <div className="empty-card empty-card--inline">
            <div className="empty-card__art empty-card__art--repo"><Icon name="send" size={22}/></div>
            <div className="empty-card__body">
              <div className="empty-card__t">Get notified when tests fail</div>
              <div className="empty-card__s muted">Connect Slack or Discord with a webhook URL — takes about 30 seconds. Quiet by default; messages only fire on the events you pick.</div>
              <div className="empty-card__cta">
                <button className="btn btn--primary"><Icon name="plus" size={11}/>Add channel</button>
                <button className="btn btn--ghost"><Icon name="book" size={11}/>Read the guide</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { NotifIndex, NotifAddChannel, NotifSamples });