import { AdSlot } from "@/components/ads/AdSlot";
import { Breadcrumbs } from "@/components/layout/Breadcrumbs";
import { RelatedTools } from "@/components/tools/RelatedTools";
import { ToolFAQSection } from "@/components/tools/ToolFAQ";
import type { Tool } from "@/tools/registry";
import { getRelatedTools } from "@/tools/registry";

interface ToolLayoutProps {
  tool: Tool;
  children: React.ReactNode;
}

export function ToolLayout({ tool, children }: ToolLayoutProps) {
  const related = getRelatedTools(tool.slug, 6);
  const base = (process.env.NEXT_PUBLIC_SITE_URL ?? "https://toolaro.org").replace(/\/$/, "");
  const faqSchema =
    tool.faqs.length > 0
      ? {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: tool.faqs.map((faq) => ({
            "@type": "Question",
            name: faq.question,
            acceptedAnswer: { "@type": "Answer", text: faq.answer },
          })),
        }
      : null;
  const softwareSchema = {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    name: tool.name,
    description: tool.seoDescription,
    applicationCategory: "UtilitiesApplication",
    operatingSystem: "Web",
    url: `${base}/tools/${tool.slug}`,
    offers: { "@type": "Offer", price: "0", priceCurrency: "EUR" },
  };

  return (
    <div className="mx-auto max-w-4xl px-4 py-10">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(softwareSchema) }} />
      {faqSchema && <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }} />}

      <Breadcrumbs items={[{ label: "Tools", href: "/tools" }, { label: tool.name }]} />

      <div className="mb-8">
        <p
          className="mb-2 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-ink-secondary"
          style={{ fontFamily: '"Courier New", monospace' }}
        >
          Toolaro · Werkkatalog
        </p>
        <h1 className="mb-3 font-display text-3xl font-bold uppercase tracking-tight text-ink-primary">
          {tool.name}
        </h1>
        <p className="text-base leading-7 text-ink-secondary">{tool.description}</p>
      </div>

      <div className="mb-6 border-2 border-ink-primary bg-surface-base p-6 shadow-[6px_6px_0_rgb(var(--brand-500))]">
        {children}
      </div>

      {tool.notice && (
        <div className="mb-6 border-2 border-brand-500 bg-brand-50 p-4 text-sm leading-6 text-ink-primary">
          <span
            className="mr-2 text-[0.65rem] font-bold uppercase tracking-[0.2em] text-brand-600"
            style={{ fontFamily: '"Courier New", monospace' }}
          >
            Hinweis
          </span>
          {tool.notice}
        </div>
      )}

      <section className="mb-6 border-2 border-ink-primary bg-surface-sunken p-5">
        <h2
          className="mb-1 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-ink-secondary"
          style={{ fontFamily: '"Courier New", monospace' }}
        >
          Anleitung
        </h2>
        <h3 className="font-display text-lg font-bold uppercase tracking-tight text-ink-primary">
          So funktioniert das Tool
        </h3>
        <p className="mt-3 text-sm leading-7 text-ink-secondary">
          Gib die benötigten Werte oder Inhalte ein, prüfe das Ergebnis direkt im Browser und kopiere
          oder exportiere es, wenn die jeweilige Funktion verfügbar ist. Die kostenlose Basisfunktion
          bleibt ohne Account nutzbar; Premium erweitert passende Tools um Komfort wie gespeicherte
          Einstellungen, höhere Limits, Batch-Verarbeitung, Exporte und werbefreie Nutzung.
        </p>
      </section>

      <section className="mb-6 grid gap-4 md:grid-cols-3">
        <InfoCard title="Beispiel">
          {tool.description} Typisch ist eine schnelle Einzelaufgabe, bei der du ein Ergebnis sofort
          prüfen, kopieren oder weiterverwenden möchtest.
        </InfoCard>
        <InfoCard title="Datenschutz">
          Viele Toolaro-Tools laufen lokal im Browser, soweit technisch umgesetzt. Gib bei
          sicherheitsnahen Tools keine unnötigen vertraulichen Daten ein.
        </InfoCard>
        <InfoCard title="Grenzen">
          Ergebnisse können Fehler enthalten oder vom konkreten Anwendungsfall abhängen. Sie ersetzen
          keine medizinische, finanzielle, rechtliche oder sicherheitstechnische Beratung.
        </InfoCard>
      </section>

      <AdSlot slot="in-content" />

      <ToolFAQSection faqs={tool.faqs} />

      <RelatedTools tools={related} />
    </div>
  );
}

function InfoCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <article className="border-2 border-ink-primary bg-surface-raised p-4 shadow-[4px_4px_0_rgb(var(--brand-500))]">
      <h2
        className="mb-2 text-[0.68rem] font-bold uppercase tracking-[0.18em] text-brand-600"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        {title}
      </h2>
      <p className="text-sm leading-6 text-ink-secondary">{children}</p>
    </article>
  );
}