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

declare global {
  interface HTMLElementTagNameMap {
    'sdig-workspace-inbox': SdigWorkspaceInbox;
  }
}

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

  @property({ type: String }) public accessor density: TDensity = 'comfortable';
  @state() private accessor filter: string = 'all';
  @state() private accessor search: string = '';

  public static styles = [workspaceBaseStyles, css`
    .filterbar { padding: 14px 24px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 8px; }
    .searchbox { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 32px; width: 280px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; }
    .searchbox input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 12px; }
    .segmented { display: flex; gap: 2px; padding: 2px; background: var(--bg-el); border-radius: 6px; border: 1px solid var(--border-subtle); }
    .segmented button { padding: 4px 10px; font-size: 11px; font-weight: 500; border-radius: 4px; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
    .segmented button.active { background: var(--bg-card); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
    .doc-table { min-width: 880px; }
    .doc-head, .doc-row { display: grid; grid-template-columns: 32px minmax(220px,2.4fr) 150px 160px 90px 60px 32px; align-items: center; gap: 14px; padding: 0 16px; }
    .doc-head { height: 36px; border-bottom: 1px solid var(--border-subtle); color: var(--text-dim); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
    .doc-row { height: 60px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.1s ease; }
    .doc-row.compact { height: 48px; }
    .doc-row:last-child { border-bottom: 0; }
    .doc-row:hover { background: var(--row-hover); }
    .doc-icon { width: 28px; height: 32px; border-radius: 4px; background: var(--bg-input); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
    .doc-title { font-size: 13px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .doc-meta { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
    .recipient-stack { display: flex; align-items: center; }
    .recipient-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-input); border: 1.5px solid var(--border); margin-left: -6px; font-size: 9px; font-weight: 600; color: var(--text-sec); display: flex; align-items: center; justify-content: center; }
    .recipient-dot:first-child { margin-left: 0; }
    .recipient-dot.signed { border-color: var(--success); color: var(--success); background: var(--bg-el); }
    .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
    .metric-card { padding: 16px; }
    .metric-value { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
    @media (max-width: 920px) { .filterbar { padding: 12px 16px; display: block; } .searchbox { width: 100%; margin-bottom: 10px; } .stats-grid { grid-template-columns: 1fr; } }
  `];

  private get filteredDocuments(): IDocumentRow[] {
    return demoDocuments
      .filter((doc) => this.filter === 'all' || doc.status === this.filter)
      .filter((doc) => !this.search || doc.title.toLowerCase().includes(this.search.toLowerCase()));
  }

  private statusPill(status: IDocumentRow['status']): TemplateResult {
    const map = {
      awaiting: ['warning', 'awaiting signature'],
      signed: ['success', 'completed'],
      draft: ['default', 'draft'],
      declined: ['error', 'declined'],
    } as const;
    const [tone, label] = map[status];
    return pill(label, tone, true);
  }

  private openDocument(doc: IDocumentRow) {
    requestWorkspaceView(this, doc.status === 'signed' ? 'audit' : 'sign');
  }

  public render(): TemplateResult {
    const filters = [
      { id: 'all', label: 'All', count: demoDocuments.length },
      { id: 'awaiting', label: 'Awaiting', count: demoDocuments.filter((doc) => doc.status === 'awaiting').length },
      { id: 'signed', label: 'Completed', count: demoDocuments.filter((doc) => doc.status === 'signed').length },
      { id: 'draft', label: 'Drafts', count: demoDocuments.filter((doc) => doc.status === 'draft').length },
      { id: 'declined', label: 'Declined', count: demoDocuments.filter((doc) => doc.status === 'declined').length },
    ];

    return html`
      ${topBar({
        breadcrumb: ['signature.digital', 'Lossless GmbH', 'Inbox'],
        title: 'Inbox',
        subtitle: pill(`${demoDocuments.filter((doc) => doc.status === 'awaiting').length} need attention`, 'info'),
        actions: html`${actionButton('Import', 'outline', 'upload')}${actionButton('New document', 'primary', 'plus', () => requestWorkspaceView(this, 'compose'))}`,
      })}
      <div class="filterbar">
        <div class="searchbox">${icon('search', 13)}<input .value=${this.search} @input=${(event: Event) => this.search = (event.target as HTMLInputElement).value} placeholder="Search documents, recipients, IDs..." /><span class="mono" style="font-size: 10px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;">⌘K</span></div>
        <div style="flex: 1;"></div>
        <div class="segmented">${filters.map((filter) => html`<button class=${this.filter === filter.id ? 'active' : ''} @click=${() => this.filter = filter.id}>${filter.label}<span class="mono" style="color: var(--text-dim);">${filter.count}</span></button>`)}</div>
      </div>
      <div class="content-scroll">
        <div class="card" style="overflow-x: auto;">
          <div class="doc-table">
            <div class="doc-head"><span></span><span>Document</span><span>Status</span><span>Recipients</span><span>Deadline</span><span style="text-align: right;">Pages</span><span></span></div>
            ${this.filteredDocuments.map((doc) => html`
              <div class="doc-row ${this.density === 'compact' ? 'compact' : ''}" @click=${() => this.openDocument(doc)}>
                <div class="doc-icon">${icon('file', 14)}</div>
                <div style="min-width: 0;"><div class="doc-title">${doc.title}</div><div class="doc-meta mono">${doc.id} · ${doc.sender} · ${doc.updated}</div></div>
                <div>${this.statusPill(doc.status)}</div>
                <div style="display: flex; align-items: center; gap: 8px;"><div class="recipient-stack">${doc.recipients.slice(0, 4).map((recipient) => html`<span class="recipient-dot ${recipient.signed ? 'signed' : ''}" title=${recipient.name}>${recipient.initials}</span>`)}</div><span style="font-size: 11px; color: var(--text-muted);">${doc.recipients.filter((recipient) => recipient.signed).length}/${doc.recipients.length}</span></div>
                <div class="mono" style="font-size: 11px; color: ${doc.deadline && doc.status === 'awaiting' ? 'var(--warning)' : 'var(--text-dim)'};">${doc.deadline ? html`${icon('clock', 11)} ${doc.deadline}` : '—'}</div>
                <div class="mono" style="font-size: 11px; color: var(--text-muted); text-align: right;">${doc.pages}</div>
                <div>${icon('more', 14)}</div>
              </div>
            `)}
          </div>
        </div>
        <div class="stats-grid">
          ${[
            { label: 'Sent this month', value: '127', delta: '+24%', icon: 'send' },
            { label: 'Avg time to sign', value: '4.2h', delta: '-18%', icon: 'clock' },
            { label: 'Completion rate', value: '94.1%', delta: '+2.1%', icon: 'check' },
            { label: 'API signatures', value: '2,481', delta: '+312', icon: 'code' },
          ].map((metric) => html`<div class="card metric-card"><div style="display: flex; justify-content: space-between; margin-bottom: 12px;">${icon(metric.icon, 14)}<span class="mono" style="font-size: 10px; color: var(--success);">${metric.delta}</span></div><div class="metric-value">${metric.value}</div><div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">${metric.label}</div></div>`)}
        </div>
      </div>
    `;
  }
}