import { Link, usePage } from '@inertiajs/react';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/Components/ui/breadcrumb';
import type { PageProps } from '@/types';

/** Map URL path segments to human-readable labels */
const SEGMENT_LABELS: Record<string, string> = {
  analyze: 'Analysis',
  recommendations: 'Recommendations',
  'content-briefs': 'Content Briefs',
  'content-intelligence': 'Content Intelligence',
  'opportunity-map': 'Opportunity Map',
  calendar: 'Calendar',
  alerts: 'Alerts',
  reports: 'Reports',
  roi: 'ROI',
  device: 'Device',
  geographic: 'Geographic',
  cannibalization: 'Cannibalization',
  'topic-clusters': 'Topic Clusters',
  freshness: 'Freshness',
  'batch-ai': 'Batch AI',
  snapshots: 'Content History',
  members: 'Team Members',
  schedule: 'Schedule',
  settings: 'Settings',
  edit: 'Edit',
};

interface BreadcrumbEntry {
  label: string;
  href?: string;
}

function buildCrumbs(url: string, siteName: string, siteId: number): BreadcrumbEntry[] {
  const crumbs: BreadcrumbEntry[] = [{ label: 'Dashboard', href: '/dashboard' }];

  // Strip query string
  const path = url.split('?')[0];
  const sitePrefix = `/sites/${siteId}/`;

  if (!path.includes(`/sites/${siteId}`)) {
    return crumbs;
  }

  crumbs.push({ label: siteName, href: `/sites/${siteId}/analyze` });

  const rest = path.startsWith(sitePrefix) ? path.slice(sitePrefix.length) : '';
  if (!rest) return crumbs;

  const segments = rest.split('/').filter(Boolean);

  segments.forEach((seg, index) => {
    // Skip numeric IDs as labels — they're part of a detail path
    if (/^\d+$/.test(seg)) return;

    const label = SEGMENT_LABELS[seg] ?? seg.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
    const isLast = index === segments.length - 1 || !segments.slice(index + 1).some((s) => !/^\d+$/.test(s));

    // Non-terminal segments get an href so they're clickable links
    const segPath = sitePrefix + segments.slice(0, index + 1).join('/');
    crumbs.push(isLast ? { label } : { label, href: segPath });
  });

  return crumbs;
}

export function SiteBreadcrumb() {
  const { url, props } = usePage<PageProps>();
  const { sites = [] } = props;

  // Detect current site from URL
  const match = url?.match(/\/sites\/(\d+)/);
  if (!match) return null;

  const siteId = parseInt(match[1], 10);
  const site = sites.find((s) => s.id === siteId);
  if (!site) return null;

  const crumbs = buildCrumbs(url, site.name, siteId);
  if (crumbs.length <= 1) return null;

  return (
    <Breadcrumb className="px-4 pt-3 pb-1 container">
      <BreadcrumbList>
        {crumbs.map((crumb, index) => {
          const isLast = index === crumbs.length - 1;
          return (
            <span key={index} className="contents">
              <BreadcrumbItem>
                {isLast || !crumb.href ? (
                  <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
                ) : (
                  <BreadcrumbLink asChild>
                    <Link href={crumb.href}>{crumb.label}</Link>
                  </BreadcrumbLink>
                )}
              </BreadcrumbItem>
              {!isLast && <BreadcrumbSeparator />}
            </span>
          );
        })}
      </BreadcrumbList>
    </Breadcrumb>
  );
}