import '@signature.digital/catalog';
import { html, render } from '@design.estate/dees-element';

type TWorkspaceView = 'inbox' | 'compose' | 'sign' | 'audit' | 'developers' | 'templates' | 'team' | 'settings';

type TDocumentRow = {
  id: string;
  title: string;
  status: 'awaiting' | 'signed' | 'draft' | 'declined';
  recipients: Array<{ name: string; initials: string; signed: boolean }>;
  updated: string;
  sender: string;
  pages: number;
  deadline?: string;
};

const workspaceViews: TWorkspaceView[] = ['inbox', 'compose', 'sign', 'audit', 'developers', 'templates', 'team', 'settings'];

const appDocuments: TDocumentRow[] = [
  { id: 'app_doc_001', title: 'Platform Services Agreement - App-owned data', status: 'awaiting', recipients: [{ name: 'Sarah Chen', initials: 'SC', signed: true }, { name: 'David Park', initials: 'DP', signed: false }], updated: 'just now', sender: 'App Service', pages: 14, deadline: 'May 5' },
  { id: 'app_doc_002', title: 'Security Addendum - Catalog Integration', status: 'draft', recipients: [{ name: 'Philipp K.', initials: 'PK', signed: false }], updated: '12 min ago', sender: 'App Service', pages: 5 },
  { id: 'app_doc_003', title: 'Completed Vendor NDA - Signed from App', status: 'signed', recipients: [{ name: 'Lila Brooks', initials: 'LB', signed: true }, { name: 'Philipp K.', initials: 'PK', signed: true }], updated: '1h ago', sender: 'App Service', pages: 3 },
];

const isWorkspaceView = (view: string): view is TWorkspaceView => workspaceViews.includes(view as TWorkspaceView);

const viewFromLocation = (): TWorkspaceView => {
  const view = globalThis.location.hash.replace(/^#/, '');
  return isWorkspaceView(view) ? view : 'inbox';
};

let currentView = viewFromLocation();
let appRoot: HTMLElement | null = null;
let routeChangeFrame: number | null = null;

const createAppRoot = () => {
  document.getElementById('signature-digital-app')?.remove();
  appRoot = document.createElement('div');
  appRoot.id = 'signature-digital-app';
  document.body.append(appRoot);
};

const handleViewChange = (event: Event) => {
  const view = (event as CustomEvent<{ view?: TWorkspaceView }>).detail?.view;
  if (!view || !isWorkspaceView(view)) return;
  currentView = view;
  const nextHash = `#${view}`;
  if (globalThis.location.hash !== nextHash) {
    globalThis.location.hash = view;
  }
};

const handleWorkspaceViewRequest = (event: Event) => {
  const view = (event as CustomEvent<{ view?: TWorkspaceView }>).detail?.view;
  if (!view || !isWorkspaceView(view)) return;
  currentView = view;
  const nextHash = `#${view}`;
  if (globalThis.location.hash !== nextHash) {
    globalThis.location.hash = view;
  } else {
    renderApp();
  }
};

const handleRouteChange = () => {
  if (routeChangeFrame !== null) {
    globalThis.cancelAnimationFrame(routeChangeFrame);
  }
  routeChangeFrame = globalThis.requestAnimationFrame(() => {
    routeChangeFrame = null;
    currentView = viewFromLocation();
    renderApp();
  });
};

const renderApp = () => {
  if (!appRoot) createAppRoot();
  render(
    html`
      <style>
        html,
        body {
          margin: 0;
          width: 100%;
          min-height: 100vh;
          background: #09090b;
          color: #fafafa;
          font-family: Geist, Inter, Roboto, sans-serif;
        }

        body {
          overflow: hidden;
        }

        sdig-workspace {
          height: 100vh;
        }
      </style>
      <sdig-workspace accent="#3b82f6" density="comfortable" theme="dark" initialView=${currentView} .initialView=${currentView} view=${currentView} .view=${currentView} .documents=${appDocuments}></sdig-workspace>
    `,
    appRoot!
  );
};

const run = async () => {
  createAppRoot();
  document.body.addEventListener('view-change', handleViewChange);
  document.body.addEventListener('workspace-view-request', handleWorkspaceViewRequest);
  globalThis.addEventListener('popstate', handleRouteChange);
  globalThis.addEventListener('hashchange', handleRouteChange);
  renderApp();
};

run();