import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
import { idpElementStyles } from './tokens.js';
import './idp-approval-card.js';
import './idp-badge.js';
import './idp-button.js';
import './idp-icon.js';
import './idp-mobile-frame.js';

declare global {
  interface HTMLElementTagNameMap {
    'idp-inbox-preview': IdpInboxPreview;
  }
}

@customElement('idp-inbox-preview')
export class IdpInboxPreview extends DeesElement {
  public static demo = () => html`<idp-inbox-preview></idp-inbox-preview>`;
  public static demoGroups = ['idp.global v3 approval surfaces'];

  @property({ type: Boolean, reflect: true })
  public accessor dark = false;

  public static styles = [
    ...idpElementStyles,
    css`
      :host {
        display: block;
      }
      idp-mobile-frame {
        --idp-bg: #ffffff;
      }
      :host([dark]) idp-mobile-frame {
        --idp-bg: #09090b;
        --idp-fg: #fafafa;
      }
      .screen {
        height: 100%;
        background: var(--idp-bg);
        color: var(--idp-fg);
        box-sizing: border-box;
        padding-top: 58px;
        display: flex;
        flex-direction: column;
      }
      .header {
        padding: 0 20px 14px;
        border-bottom: 1px solid var(--idp-border);
      }
      .brandline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 650;
      }
      .brandmark {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: var(--idp-primary);
        color: var(--idp-primary-fg);
      }
      h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 760;
        letter-spacing: -0.04em;
      }
      .summary {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        color: var(--idp-muted-fg);
        font-size: 13px;
      }
      .list {
        display: grid;
        gap: 10px;
        padding: 14px 16px 120px;
        overflow: auto;
      }
      .earlier {
        margin: 10px 0 2px;
        color: var(--idp-muted-fg);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--idp-border);
        border-radius: 10px;
        font-size: 13px;
      }
      .row-icon {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: var(--idp-muted);
        color: var(--idp-ok);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .row-sub {
        color: var(--idp-muted-fg);
        font-size: 12px;
        margin-top: 1px;
      }
      .tabbar {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 24px;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 8px;
        border: 1px solid color-mix(in srgb, var(--idp-border), transparent 20%);
        border-radius: 22px;
        background: color-mix(in srgb, var(--idp-card), transparent 8%);
        box-shadow: 0 16px 36px rgb(0 0 0 / 0.16);
        backdrop-filter: blur(24px) saturate(170%);
      }
      .tab {
        display: grid;
        place-items: center;
        gap: 3px;
        min-height: 44px;
        color: var(--idp-muted-fg);
        font-size: 10px;
        font-weight: 600;
      }
      .tab.active {
        color: var(--idp-accent);
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <idp-mobile-frame ?dark=${this.dark}>
        <div class="screen">
          <header class="header">
            <div class="brandline">
              <div class="brand"><span class="brandmark"><idp-icon name="shield" size="14"></idp-icon></span>idp.global</div>
              <idp-button variant="ghost" size="sm" icon="search" aria-label="Search"></idp-button>
            </div>
            <h2>Inbox</h2>
            <div class="summary"><idp-badge variant="ok">3 pending</idp-badge><span>oldest 8 min ago</span></div>
          </header>
          <div class="list">
            <idp-approval-card primary app-name="GitHub" app-initials="GH" app-color="#24292F" request-text="Sign in to github.com" location="Berlin · DE" device="Safari · MBP" time-label="now"></idp-approval-card>
            <idp-approval-card app-name="Lufthansa.com" app-initials="LH" app-color="#05164D" request-text="Verify identity" location="Berlin · DE" device="iPhone 15 Pro" time-label="2m"></idp-approval-card>
            <idp-approval-card app-name="Hetzner Cloud" app-initials="HZ" app-color="#D50C2D" request-text="Sign in to console" location="Falkenstein · DE" device="Firefox · Windows" risk="warning" time-label="8m"></idp-approval-card>
            <div class="earlier">Earlier today</div>
            ${['Notion · Approved 11:42', 'Apple ID · Approved 09:18', 'reddit.com · Denied 08:57'].map((itemArg) => html`
              <div class="row">
                <div class="row-icon"><idp-icon name="check" size="15"></idp-icon></div>
                <div>
                  <div>${itemArg.split(' · ')[0]}</div>
                  <div class="row-sub">${itemArg.split(' · ')[1]}</div>
                </div>
              </div>
            `)}
          </div>
          <nav class="tabbar">
            <div class="tab active"><idp-icon name="bell" size="18"></idp-icon>Inbox</div>
            <div class="tab"><idp-icon name="clock" size="18"></idp-icon>History</div>
            <div class="tab"><idp-icon name="device" size="18"></idp-icon>Devices</div>
            <div class="tab"><idp-icon name="user" size="18"></idp-icon>Identity</div>
          </nav>
        </div>
      </idp-mobile-frame>
    `;
  }
}