---
// RouteTable — the model-routing matrix. Four buttons (one per job profile),
// each carrying the `data-route` hook asserted by `scripts/verify.mjs`.
//
// Static shell: the initial route is marked active and pressed. The shell
// renders the column header + the four rows; task 15 will hydrate the
// "route detail" panel to the right.

type Localized = { en: string; pt: string };

interface Route {
  id: 'plan' | 'build' | 'explore' | 'review' | string;
  /** Strong label, e.g. "Plan". */
  strong: string | Localized;
  /** Profile descriptor, e.g. "strong / broad". */
  profile: string | Localized;
  /** Prompt shape copy. */
  prompt: string | Localized;
}

interface Props {
  routes: Route[];
  initial?: string;
  headWork?: string | Localized;
  headProfile?: string | Localized;
  headPromptShape?: string | Localized;
}

const {
  routes,
  initial = routes[0]?.id ?? 'plan',
  headWork = 'Work',
  headProfile = 'Profile',
  headPromptShape = 'Prompt shape',
} = Astro.props;
---

<div class="route-table">
  <div class="head">
    <span>
      {
        typeof headWork === 'string' ? (
          headWork
        ) : (
          <>
            <span data-language-content="en">{headWork.en}</span>
            <span data-language-content="pt" hidden>
              {headWork.pt}
            </span>
          </>
        )
      }
    </span>
    <span>
      {
        typeof headProfile === 'string' ? (
          headProfile
        ) : (
          <>
            <span data-language-content="en">{headProfile.en}</span>
            <span data-language-content="pt" hidden>
              {headProfile.pt}
            </span>
          </>
        )
      }
    </span>
    <span>
      {
        typeof headPromptShape === 'string' ? (
          headPromptShape
        ) : (
          <>
            <span data-language-content="en">{headPromptShape.en}</span>
            <span data-language-content="pt" hidden>
              {headPromptShape.pt}
            </span>
          </>
        )
      }
    </span>
  </div>
  {
    routes.map((route) => (
      <button
        class:list={['route-row', { active: route.id === initial }]}
        data-route={route.id}
        aria-pressed={route.id === initial}
      >
        <strong>
          {typeof route.strong === 'string' ? (
            route.strong
          ) : (
            <>
              <span data-language-content="en">{route.strong.en}</span>
              <span data-language-content="pt" hidden>
                {route.strong.pt}
              </span>
            </>
          )}
        </strong>
        <b>
          {typeof route.profile === 'string' ? (
            route.profile
          ) : (
            <>
              <span data-language-content="en">{route.profile.en}</span>
              <span data-language-content="pt" hidden>
                {route.profile.pt}
              </span>
            </>
          )}
        </b>
        <small>
          {typeof route.prompt === 'string' ? (
            route.prompt
          ) : (
            <>
              <span data-language-content="en">{route.prompt.en}</span>
              <span data-language-content="pt" hidden>
                {route.prompt.pt}
              </span>
            </>
          )}
        </small>
      </button>
    ))
  }
</div>

<style>
  .route-table {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .head,
  .route-row {
    display: grid;
    grid-template-columns: 0.8fr 0.9fr 1.4fr;
  }

  .head {
    color: var(--paper);
    background: var(--ink);
    /* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
    font:
      500 10px 'DM Mono',
      monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .head > *,
  .route-row > * {
    padding: 15px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .route-row {
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  .route-row strong {
    font-size: var(--step-14);
  }
  .route-row b {
    color: var(--blue);
    letter-spacing: 0;
    text-transform: none;
  }
  .route-row small {
    color: var(--muted);
    font-size: var(--step-12);
  }
  .route-row.active {
    background: var(--line);
  }
  .route-row.active strong {
    box-shadow: inset 4px 0 0 var(--gold);
  }
  .route-row:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: -3px;
  }

  @media (max-width: 800px) {
    .route-table {
      overflow-x: auto;
    }
    .head,
    .route-row {
      min-width: 620px;
    }
  }
</style>
