import { Link } from '@tanstack/react-router';
import { ArrowRight, type LucideIcon } from 'lucide-react';
import { relatedLinksSchema, faqSchema } from '@/lib/schemas';
import { useT } from '@/lib/i18n';

export interface RelatedLink {
  to: string;
  label: string;
  description?: string;
  icon?: LucideIcon;
}

interface RelatedLinksProps {
  title?: string;
  subtitle?: string;
  links: RelatedLink[];
  /** Aria label voor screenreaders en SEO context */
  ariaLabel?: string;
  /**
   * Voeg ItemList JSON-LD schema toe (default: true).
   * Geeft zoekmachines extra context over de interne navigatie.
   */
  emitSchema?: boolean;
  /**
   * Optioneel: emit ook FAQPage schema waarbij elke link wordt
   * geïnterpreteerd als Q&A. Gebruik dit alleen wanneer titel + descriptions
   * werkelijk vraag/antwoord-vorm hebben (bv. op contact/FAQ-achtige pagina's).
   */
  faqMode?: boolean;
}

/**
 * Herbruikbare interne links sectie voor SEO en doorzoekbaarheid.
 * Plaats onderaan content-pagina's zodat zoekmachine bots meer
 * interne pagina's kunnen ontdekken vanuit elke pagina.
 *
 * Voegt automatisch ItemList (SiteNavigationElement) JSON-LD toe;
 * optioneel ook FAQPage-schema via `faqMode`.
 */
const RelatedLinks = ({
  title,
  subtitle,
  links,
  ariaLabel,
  emitSchema = true,
  faqMode = false,
}: RelatedLinksProps) => {
  const t = useT();
  const resolvedTitle = title ?? t('Verder lezen op Peptidewinkel', 'Keep reading on Peptidewinkel');
  const resolvedAriaLabel = ariaLabel ?? t('Gerelateerde pagina\'s', 'Related pages');
  if (!links?.length) return null;

  const schemas: Record<string, unknown>[] = [];
  if (emitSchema) schemas.push(relatedLinksSchema(links, resolvedTitle));
  if (faqMode) {
    const faqItems = links
      .filter((l) => l.description && l.description.length >= 10)
      .map((l) => ({ q: l.label, a: l.description as string }));
    if (faqItems.length >= 2) schemas.push(faqSchema(faqItems));
  }

  return (
    <nav aria-label={resolvedAriaLabel} className="border-t border-border/50 bg-surface/30">
      {schemas.length > 0 &&
        schemas.map((s, i) => (
          <script
            key={i}
            type="application/ld+json"
            dangerouslySetInnerHTML={{ __html: JSON.stringify(s) }}
          />
        ))}
      <div className="container py-12 md:py-16 max-w-5xl">
        <div className="mb-8">
          <h2 className="text-xl md:text-2xl font-black text-foreground mb-2 tracking-tight">
            {resolvedTitle}
          </h2>
          {subtitle && (
            <p className="text-sm text-muted-foreground max-w-2xl">{subtitle}</p>
          )}
        </div>

        <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {links.map((link) => {
            const Icon = link.icon;
            return (
              <li key={link.to}>
                <Link
                  to={link.to as string}
                  className="group flex items-start gap-3 p-4 rounded-xl border border-border bg-card hover:border-primary/40 hover:shadow-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 transition-all h-full"
                >
                  {Icon && (
                    <div className="w-9 h-9 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0 group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
                      <Icon className="w-4 h-4" />
                    </div>
                  )}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between gap-2">
                      <span className="font-semibold text-sm text-foreground group-hover:text-primary transition-colors">
                        {link.label}
                      </span>
                      <ArrowRight className="w-3.5 h-3.5 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 transition-all shrink-0" />
                    </div>
                    {link.description && (
                      <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
                        {link.description}
                      </p>
                    )}
                  </div>
                </Link>
              </li>
            );
          })}
        </ul>
      </div>
    </nav>
  );
};

export default RelatedLinks;