---
import BaseLayout from "@/layouts/BaseLayout.astro";
import type { AnyLink } from "@/lib/collections";
import {
  collectionColor,
  filterByCollection,
  filterByTag,
  getUniqueCollections,
  getUniqueTags,
} from "@/lib/links";

export interface Props {
  title: string;
  description: string;
  links: AnyLink[];
}

const { title, description, links } = Astro.props;

const collections = getUniqueCollections(links);
const tags = getUniqueTags(links);
const pathname = Astro.url.pathname.replace(/\/$/, "");

function isActive(href: string): boolean {
  return pathname === href.replace(/\/$/, "");
}
---

<BaseLayout {title} {description} navHidden={true} footerHidden={true}>
  <div class="links-app">
    <aside class="sidebar">
      <div class="sidebar__brand">
        <a href="/" class="sidebar__back">← Back home</a>
      </div>

      <div class="sidebar__collapsible">
        <nav class="sidebar__nav">
          <a
            href="/links"
            class:list={[
              "sidebar__item",
              { "sidebar__item--active": isActive("/links") },
            ]}
          >
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <line x1="8" y1="6" x2="21" y2="6"></line>
              <line x1="8" y1="12" x2="21" y2="12"></line>
              <line x1="8" y1="18" x2="21" y2="18"></line>
              <line x1="3" y1="6" x2="3.01" y2="6"></line>
              <line x1="3" y1="12" x2="3.01" y2="12"></line>
              <line x1="3" y1="18" x2="3.01" y2="18"></line>
            </svg>
            All Links
            <span class="sidebar__count">{links.length}</span>
          </a>
        </nav>

        {
          collections.length > 0 && (
            <div class="sidebar__section">
              <a
                href="/links/collection"
                class:list={[
                  "sidebar__section-title",
                  {
                    "sidebar__section-title--active":
                      isActive("/links/collection"),
                  },
                ]}
              >
                Collections
              </a>
              {collections.map((col) => (
                <a
                  href={`/links/collection/${encodeURIComponent(col.toLowerCase())}`}
                  class:list={[
                    "sidebar__item",
                    {
                      "sidebar__item--active": isActive(
                        `/links/collection/${col.toLowerCase()}`,
                      ),
                    },
                  ]}
                >
                  <span
                    class="sidebar__folder"
                    style={`background: ${collectionColor(col)}`}
                    aria-hidden="true"
                  >
                    <svg
                      width="10"
                      height="10"
                      viewBox="0 0 24 24"
                      fill="white"
                      stroke="none"
                      aria-hidden="true"
                    >
                      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
                    </svg>
                  </span>
                  {col}
                  <span class="sidebar__count">
                    {filterByCollection(links, col).length}
                  </span>
                </a>
              ))}
            </div>
          )
        }

        {
          tags.length > 0 && (
            <div class="sidebar__section">
              <a
                href="/links/tag"
                class:list={[
                  "sidebar__section-title",
                  { "sidebar__section-title--active": isActive("/links/tag") },
                ]}
              >
                Tags
              </a>
              {tags.map((tag) => (
                <a
                  href={`/links/tag/${encodeURIComponent(tag.toLowerCase())}`}
                  class:list={[
                    "sidebar__item",
                    {
                      "sidebar__item--active": isActive(
                        `/links/tag/${tag.toLowerCase()}`,
                      ),
                    },
                  ]}
                >
                  <span class="sidebar__hash" aria-hidden="true">
                    #
                  </span>
                  {tag}
                  <span class="sidebar__count">
                    {filterByTag(links, tag).length}
                  </span>
                </a>
              ))}
            </div>
          )
        }
      </div>
    </aside>

    <main class="links-main">
      <div class="mobile-header">
        <a href="/" class="mobile-header__back">← Back home</a>
        <nav class="mobile-subnav">
          <a
            href="/links"
            class:list={[
              "mobile-subnav__item",
              { "mobile-subnav__item--active": isActive("/links") },
            ]}>All Links</a
          >
          <a
            href="/links/collection"
            class:list={[
              "mobile-subnav__item",
              { "mobile-subnav__item--active": isActive("/links/collection") },
            ]}>Collections</a
          >
          <a
            href="/links/tag"
            class:list={[
              "mobile-subnav__item",
              { "mobile-subnav__item--active": isActive("/links/tag") },
            ]}>Tags</a
          >
        </nav>
      </div>
      <div class="links-content">
        <slot />
      </div>
    </main>
  </div>
</BaseLayout>

<style>
  .links-app {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100dvh;
    background: #f5f5f3;
  }

  /* Sidebar */
  .sidebar {
    background: #fff;
    border-right: 1px solid #e0e0de;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }

  .sidebar__brand {
    padding: 1rem;
    border-bottom: 1px solid #e0e0de;
  }

  .sidebar__nav {
    padding: 0.5rem 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .sidebar__section {
    padding: 0.75rem 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .sidebar__section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0.5rem 0.25rem;
    text-decoration: none;
  }

  .sidebar__section-title:hover,
  .sidebar__section-title--active {
    color: #555;
  }

  .sidebar__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #444;
    text-decoration: none;
    transition:
      background 0.1s,
      color 0.1s;
  }

  .sidebar__item:hover {
    background: #f0f0ee;
    color: #111;
  }

  .sidebar__item--active {
    background: #eee;
    color: #111;
    font-weight: 500;
  }

  .sidebar__folder {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .sidebar__hash {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #999;
    font-weight: 600;
  }

  .sidebar__count {
    margin-left: auto;
    font-size: 0.75rem;
    color: #aaa;
    font-variant-numeric: tabular-nums;
  }

  .sidebar__back {
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .sidebar__back:hover {
    color: var(--accent);
  }

  /* Main content */
  .links-main {
    padding: 2rem 2.5rem;
    min-width: 0;
    max-width: 680px;
  }

  .mobile-header {
    display: none;
  }

  .links-content {
    height: 100%;
  }

  @media (max-width: 768px) {
    .links-app {
      grid-template-columns: 1fr;
    }

    .sidebar {
      display: none;
    }

    .links-main {
      padding: 0;
      max-width: 100%;
    }

    .links-content {
      padding: 1.25rem 1rem;
    }

    .mobile-header {
      display: block;
      background: #fff;
      border-bottom: 1px solid #e0e0de;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .mobile-header__back {
      display: block;
      font-size: 0.72rem;
      color: #666;
      text-decoration: none;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 0.6rem 1rem 0;
    }

    .mobile-header__back:hover {
      color: var(--accent);
    }

    .mobile-subnav {
      display: flex;
    }

    .mobile-subnav__item {
      flex: 1;
      text-align: center;
      padding: 0.6rem 0.5rem;
      font-size: 0.8rem;
      font-weight: 500;
      color: #888;
      text-decoration: none;
      border-bottom: 2px solid transparent;
      transition: color 0.1s;
    }

    .mobile-subnav__item:hover {
      color: #111;
    }

    .mobile-subnav__item--active {
      color: #111;
      border-bottom-color: #111;
    }
  }
</style>
