import { DeesElement, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
import { actionButton, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame } from './sdig-workspace.shared.js';

declare global {
  interface HTMLElementTagNameMap {
    'sdig-workspace-developers': SdigWorkspaceDevelopers;
  }
}

@customElement('sdig-workspace-developers')
export class SdigWorkspaceDevelopers extends DeesElement {
  public static demo = () => workspaceDemoFrame(html`<sdig-workspace-developers></sdig-workspace-developers>`);
  public static demoGroups = ['Signature Digital Workspace'];

  public static styles = [workspaceBaseStyles, css`
    .developer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .metric-card { padding: 14px; }
    .metric-value { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
    pre.code { margin: 0; padding: 16px; background: var(--bg-el); border: 1px solid var(--border-subtle); border-radius: 6px; font-size: 12px; line-height: 1.7; color: var(--text-sec); overflow: auto; }
    @media (max-width: 920px) { .developer-grid, .stats-grid { grid-template-columns: 1fr; } }
  `];

  public render(): TemplateResult {
    return html`
      ${topBar({ breadcrumb: ['signature.digital', 'Developers'], title: 'Developers', subtitle: pill('API · v0.42', 'info', true), actions: html`${actionButton('View on GitHub', 'outline', 'github')}${actionButton('New API key', 'primary', 'plus')}` })}
      <div class="content-scroll developer-grid">
        <div style="display: flex; flex-direction: column; gap: 16px;">
          <div class="card" style="padding: 20px;"><div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;"><span style="font-size: 14px; font-weight: 600;">Send a document in 8 lines</span><span class="pill">node</span></div><pre class="code mono">import { Signature } from '@signature.digital/sdk';

const sig = new Signature(process.env.SIGD_KEY);

await sig.documents.send({
  file: './msa.pdf',
  recipients: [{ name: 'Sarah Chen', email: 'sarah@acme.com' }],
  fields: 'auto',
});</pre></div>
          <div class="stats-grid">${[['Requests this month', '14,892', '+8.2%'], ['P95 latency', '142ms', '-12ms'], ['Error rate', '0.04%', '✓']].map((metric) => html`<div class="card metric-card"><div class="metric-value">${metric[1]}</div><div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">${metric[0]}</div><div class="mono" style="font-size: 10px; color: var(--success); margin-top: 6px;">${metric[2]}</div></div>`)}</div>
        </div>
        <div style="display: flex; flex-direction: column; gap: 16px;">
          <div class="card" style="padding: 16px;"><div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">${icon('github', 14)}<span style="font-size: 12px; font-weight: 600;">signature-digital/core</span></div><div style="font-size: 11px; color: var(--text-muted); line-height: 1.5;">MIT-licensed. Self-host on your own infra, or use signature.digital cloud.</div></div>
          <div class="card" style="padding: 16px;"><div class="label-upper">Self-host status</div>${[['Docker image', 'ghcr.io/signature-digital'], ['Helm chart', 'v0.42.1'], ['Postgres ≥ 14', 'required'], ['S3-compatible', 'optional']].map((row) => html`<div style="display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 6px;"><span style="color: var(--text-muted);">${row[0]}</span><span class="mono" style="color: var(--text-sec);">${row[1]}</span></div>`)}</div>
        </div>
      </div>
    `;
  }
}