import type { Metadata } from "next";
import Link from "next/link";
import type { Lang } from "@/lib/config";
import JsonLd from "@/components/JsonLd";
import { buildPageMetadata } from "@/lib/seo";
import {
  getCompetitorBySlug,
  getAllCompetitorSlugs,
  type CompetitorFeature,
} from "@/lib/config/competitors";
import { notFound } from "next/navigation";

// ---------------------------------------------------------------------------
// Static params — generate all competitor x lang combinations
// ---------------------------------------------------------------------------
export function generateStaticParams() {
  return getAllCompetitorSlugs().flatMap((slug) => [
    { lang: "en" as const, competitor: slug },
    { lang: "ar" as const, competitor: slug },
  ]);
}

// ---------------------------------------------------------------------------
// Metadata
// ---------------------------------------------------------------------------
export function generateMetadata({
  params,
}: {
  params: { lang: Lang; competitor: string };
}): Metadata {
  const comp = getCompetitorBySlug(params.competitor);
  if (!comp) return {};

  const isAr = params.lang === "ar";
  const title = isAr
    ? `موعدي مقابل ${comp.name} | مقارنة شاملة`
    : `Mawidi vs ${comp.name} | Full Comparison`;
  const description = isAr ? comp.descriptionAr : comp.descriptionEn;

  return buildPageMetadata({
    lang: params.lang,
    title,
    description,
    path: `/compare/${comp.slug}`,
    keywords: isAr
      ? [
          "موعدي",
          comp.name,
          "مقارنة",
          "حجز مواعيد",
          "واتساب",
          "الخليج",
          "عيادات",
        ]
      : [
          "Mawidi",
          comp.name,
          "comparison",
          "appointment booking",
          "WhatsApp",
          "GCC",
          "clinics",
        ],
  });
}

// ---------------------------------------------------------------------------
// Feature cell renderer
// ---------------------------------------------------------------------------
function FeatureCell({
  value,
  isGreen,
}: {
  value: boolean | string;
  isGreen: boolean;
}) {
  if (value === true) {
    return (
      <span
        className={`inline-flex items-center font-semibold ${isGreen ? "text-brand-green" : "text-slate-600 dark:text-slate-300"}`}
      >
        <svg
          className="mr-1.5 h-5 w-5 shrink-0"
          fill="currentColor"
          viewBox="0 0 20 20"
        >
          <path
            fillRule="evenodd"
            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
            clipRule="evenodd"
          />
        </svg>
      </span>
    );
  }

  if (value === false) {
    return (
      <span className="inline-flex items-center font-semibold text-red-500">
        <svg
          className="mr-1.5 h-5 w-5 shrink-0"
          fill="currentColor"
          viewBox="0 0 20 20"
        >
          <path
            fillRule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clipRule="evenodd"
          />
        </svg>
      </span>
    );
  }

  // String value — description
  return (
    <span
      className={`text-sm font-medium ${isGreen ? "text-brand-green" : "text-slate-600 dark:text-slate-400"}`}
    >
      {value}
    </span>
  );
}

// ---------------------------------------------------------------------------
// Page
// ---------------------------------------------------------------------------
export default function CompetitorComparisonPage({
  params,
}: {
  params: { lang: Lang; competitor: string };
}) {
  const comp = getCompetitorBySlug(params.competitor);
  if (!comp) notFound();

  const { lang } = params;
  const isAr = lang === "ar";
  const faqs = isAr ? comp.faqsAr : comp.faqsEn;
  const weaknesses = isAr ? comp.weaknessesAr : comp.weaknessesEn;

  return (
    <div
      className="bg-white py-20 dark:bg-slate-950"
      dir={isAr ? "rtl" : "ltr"}
    >
      <div className="mx-auto max-w-6xl px-6">
        {/* ── Hero ─────────────────────────────────────── */}
        <header className="mb-16 text-center">
          <span className="mb-4 inline-block rounded-full bg-brand-green/10 px-4 py-1.5 text-sm font-semibold text-brand-green">
            {isAr ? "مقارنة" : "Comparison"}
          </span>
          <h1 className="text-3xl font-bold text-slate-900 dark:text-white md:text-5xl">
            {isAr ? `موعدي مقابل ${comp.name}` : `Mawidi vs ${comp.name}`}
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-xl text-slate-600 dark:text-slate-300">
            {isAr ? comp.taglineAr : comp.taglineEn}
          </p>
          <p className="mx-auto mt-3 max-w-3xl text-base text-slate-500 dark:text-slate-400">
            {isAr ? comp.descriptionAr : comp.descriptionEn}
          </p>
        </header>

        {/* ── Feature Comparison Matrix ────────────────── */}
        <section className="mb-20">
          <h2 className="mb-8 text-center text-2xl font-bold text-slate-900 dark:text-white md:text-3xl">
            {isAr ? "مقارنة الميزات" : "Feature Comparison"}
          </h2>

          <div className="overflow-x-auto rounded-2xl border border-slate-200 shadow-lg dark:border-slate-800">
            <table className="w-full border-collapse bg-white text-left text-sm dark:bg-slate-900">
              <thead>
                <tr className="bg-slate-50 dark:bg-slate-800">
                  <th className="px-6 py-4 font-bold text-slate-900 dark:text-white">
                    {isAr ? "الميزة" : "Feature"}
                  </th>
                  <th className="bg-brand-green/10 px-6 py-4 text-center font-bold text-brand-green">
                    {isAr ? "موعدي" : "Mawidi"}
                  </th>
                  <th className="bg-red-50 px-6 py-4 text-center font-bold text-red-900 dark:bg-red-900/20 dark:text-red-100">
                    {comp.name}
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
                {comp.features.map((f: CompetitorFeature, i: number) => (
                  <tr
                    key={i}
                    className="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50"
                  >
                    <td className="px-6 py-4 font-medium text-slate-900 dark:text-slate-200">
                      {isAr ? f.nameAr : f.nameEn}
                    </td>
                    <td className="bg-brand-green/5 px-6 py-4 text-center">
                      <FeatureCell value={f.mawidi} isGreen />
                    </td>
                    <td className="px-6 py-4 text-center">
                      <FeatureCell value={f.competitor} isGreen={false} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        {/* ── Why GCC Businesses Choose Mawidi ────────── */}
        <section className="mb-20">
          <h2 className="mb-8 text-center text-2xl font-bold text-slate-900 dark:text-white md:text-3xl">
            {isAr
              ? "لماذا تختار شركات الخليج موعدي؟"
              : "Why GCC Businesses Choose Mawidi"}
          </h2>

          <div className="grid gap-6 md:grid-cols-3">
            {[
              {
                iconPath:
                  "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z",
                titleEn: "WhatsApp-First",
                titleAr: "واتساب أولاً",
                descEn:
                  "Built for the #1 messaging app in the GCC. Your patients book, reschedule, and pay — all within WhatsApp.",
                descAr:
                  "مبني لتطبيق المراسلة الأول في الخليج. مرضاك يحجزون ويعيدون الجدولة ويدفعون — كل ذلك عبر واتساب.",
              },
              {
                iconPath:
                  "M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129",
                titleEn: "Native Arabic & RTL",
                titleAr: "عربي أصلي و RTL",
                descEn:
                  "Full Arabic language support with RTL layouts. Your staff and patients interact in their language.",
                descAr:
                  "دعم كامل للغة العربية مع تخطيطات RTL. موظفوك ومرضاك يتفاعلون بلغتهم.",
              },
              {
                iconPath:
                  "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
                titleEn: "AI-Powered Automation",
                titleAr: "أتمتة بالذكاء الاصطناعي",
                descEn:
                  "24/7 AI receptionist + voice agent reduces no-shows by up to 70% and handles bookings while you sleep.",
                descAr:
                  "موظفة استقبال ذكية + وكيل صوتي على مدار الساعة يقلل عدم الحضور بنسبة 70% ويتعامل مع الحجوزات أثناء نومك.",
              },
            ].map((item, i) => (
              <div
                key={i}
                className="rounded-xl border border-slate-200 bg-slate-50 p-6 dark:border-slate-700 dark:bg-slate-900"
              >
                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-brand-green/10">
                  <svg
                    className="h-6 w-6 text-brand-green"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    strokeWidth={1.5}
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d={item.iconPath}
                    />
                  </svg>
                </div>
                <h3 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
                  {isAr ? item.titleAr : item.titleEn}
                </h3>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  {isAr ? item.descAr : item.descEn}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* ── Mawidi Advantages (competitor weaknesses) ─ */}
        <section className="mb-20">
          <h2 className="mb-8 text-center text-2xl font-bold text-slate-900 dark:text-white md:text-3xl">
            {isAr
              ? `ما يفتقر إليه ${comp.name}`
              : `What ${comp.name} Is Missing`}
          </h2>

          <div className="mx-auto grid max-w-3xl gap-4 md:grid-cols-2">
            {weaknesses.map((w, i) => (
              <div
                key={i}
                className="flex items-start gap-3 rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900"
              >
                <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-green/10 text-brand-green">
                  <svg
                    className="h-4 w-4"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                      clipRule="evenodd"
                    />
                  </svg>
                </span>
                <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
                  {w}
                  {" — "}
                  <span className="text-brand-green">
                    {isAr ? "موعدي يوفرها" : "Mawidi has it"}
                  </span>
                </span>
              </div>
            ))}
          </div>
        </section>

        {/* ── Pricing Comparison ──────────────────────── */}
        <section className="mb-20">
          <h2 className="mb-8 text-center text-2xl font-bold text-slate-900 dark:text-white md:text-3xl">
            {isAr ? "مقارنة الأسعار" : "Pricing Comparison"}
          </h2>

          <div className="mx-auto grid max-w-3xl gap-6 md:grid-cols-2">
            {/* Mawidi pricing */}
            <div className="rounded-2xl border-2 border-brand-green bg-brand-green/5 p-6">
              <div className="mb-4 flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-brand-green text-white font-bold text-lg">
                  M
                </div>
                <h3 className="text-xl font-bold text-slate-900 dark:text-white">
                  {isAr ? "موعدي" : "Mawidi"}
                </h3>
              </div>
              <p className="mb-2 text-3xl font-bold text-brand-green">
                {isAr ? "من £179/شهر" : "From \u00A3179/mo"}
              </p>
              <ul className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
                <li className="flex items-center gap-2">
                  <svg
                    className="h-4 w-4 shrink-0 text-brand-green"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                      clipRule="evenodd"
                    />
                  </svg>
                  {isAr
                    ? "بدون عمولة على الحجوزات"
                    : "No commission on bookings"}
                </li>
                <li className="flex items-center gap-2">
                  <svg
                    className="h-4 w-4 shrink-0 text-brand-green"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                      clipRule="evenodd"
                    />
                  </svg>
                  {isAr ? "تسعير شفاف وثابت" : "Transparent flat pricing"}
                </li>
                <li className="flex items-center gap-2">
                  <svg
                    className="h-4 w-4 shrink-0 text-brand-green"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                      clipRule="evenodd"
                    />
                  </svg>
                  {isAr ? "تجربة مجانية 14 يوم" : "14-day free trial"}
                </li>
              </ul>
            </div>

            {/* Competitor pricing */}
            <div className="rounded-2xl border border-slate-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-900">
              <div className="mb-4 flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-200 text-slate-600 font-bold text-lg dark:bg-slate-700 dark:text-slate-300">
                  {comp.name.charAt(0)}
                </div>
                <h3 className="text-xl font-bold text-slate-900 dark:text-white">
                  {comp.name}
                </h3>
              </div>
              <p className="mb-2 text-3xl font-bold text-slate-700 dark:text-slate-300">
                {isAr ? comp.pricingAr : comp.pricingEn}
              </p>
              <ul className="space-y-2 text-sm text-slate-500 dark:text-slate-400">
                <li className="flex items-center gap-2">
                  <svg
                    className="h-4 w-4 shrink-0 text-red-500"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                      clipRule="evenodd"
                    />
                  </svg>
                  {isAr
                    ? "لا يوجد واتساب أو وكيل ذكي"
                    : "No WhatsApp or AI agent"}
                </li>
                <li className="flex items-center gap-2">
                  <svg
                    className="h-4 w-4 shrink-0 text-red-500"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                      clipRule="evenodd"
                    />
                  </svg>
                  {isAr
                    ? "لا يدعم العربية أو الخليج"
                    : "No Arabic or GCC support"}
                </li>
                <li className="flex items-center gap-2">
                  <svg
                    className="h-4 w-4 shrink-0 text-red-500"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                      clipRule="evenodd"
                    />
                  </svg>
                  {isAr ? "لا يدعم مدى أو Apple Pay" : "No Mada or Apple Pay"}
                </li>
              </ul>
            </div>
          </div>
        </section>

        {/* ── FAQ Section ─────────────────────────────── */}
        {faqs.length > 0 && (
          <section className="mb-20">
            <h2 className="mb-8 text-center text-2xl font-bold text-slate-900 dark:text-white md:text-3xl">
              {isAr ? "الأسئلة الشائعة" : "Frequently Asked Questions"}
            </h2>

            <div className="mx-auto max-w-3xl space-y-4">
              {faqs.map((faq, i) => (
                <details
                  key={i}
                  className="group rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
                >
                  <summary className="flex cursor-pointer items-center justify-between px-6 py-4 font-semibold text-slate-900 dark:text-white">
                    {faq.question}
                    <svg
                      className="h-5 w-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      strokeWidth={2}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M19 9l-7 7-7-7"
                      />
                    </svg>
                  </summary>
                  <p className="px-6 pb-4 text-slate-600 dark:text-slate-400">
                    {faq.answer}
                  </p>
                </details>
              ))}
            </div>
          </section>
        )}

        {/* ── CTAs ────────────────────────────────────── */}
        <section className="rounded-2xl bg-gradient-to-br from-brand-green/10 to-brand-green/5 p-8 text-center md:p-12">
          <h2 className="mb-4 text-2xl font-bold text-slate-900 dark:text-white md:text-3xl">
            {isAr ? "جاهز للتبديل إلى موعدي؟" : "Ready to Switch to Mawidi?"}
          </h2>
          <p className="mx-auto mb-8 max-w-xl text-slate-600 dark:text-slate-400">
            {isAr
              ? "انضم لمئات الشركات الخليجية التي تستخدم موعدي لأتمتة حجوزاتها وتقليل عدم الحضور بنسبة 70%."
              : "Join hundreds of GCC businesses using Mawidi to automate bookings and reduce no-shows by 70%."}
          </p>

          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Link
              href={`/${lang}/pricing`}
              className="inline-flex items-center justify-center rounded-lg bg-brand-green px-8 py-4 text-lg font-semibold text-white transition-colors hover:bg-brand-greenHover"
            >
              {isAr ? "ابدأ تجربة مجانية" : "Start Free Trial"}
            </Link>
            <Link
              href={`/${lang}/demo`}
              className="inline-flex items-center justify-center rounded-lg border-2 border-brand-green px-8 py-4 text-lg font-semibold text-brand-green transition-colors hover:bg-brand-green/5"
            >
              {isAr ? "احجز عرض تجريبي" : "Book a Demo"}
            </Link>
            <Link
              href={`/${lang}/comparison`}
              className="inline-flex items-center justify-center rounded-lg border border-slate-300 px-8 py-4 text-lg font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-800"
            >
              {isAr ? "حاسبة العائد" : "ROI Calculator"}
            </Link>
          </div>
        </section>

        {/* ── Back to all comparisons link ─────────────── */}
        <div className="mt-12 text-center">
          <Link
            href={`/${lang}/comparison`}
            className="text-sm font-medium text-brand-green hover:underline"
          >
            {isAr ? "← عرض جميع المقارنات" : "\u2190 View all comparisons"}
          </Link>
        </div>
      </div>

      {/* ── JSON-LD: FAQ structured data ──────────────── */}
      {faqs.length > 0 && (
        <JsonLd
          type="FAQPage"
          data={{
            mainEntity: faqs.map((faq) => ({
              "@type": "Question",
              name: faq.question,
              acceptedAnswer: {
                "@type": "Answer",
                text: faq.answer,
              },
            })),
          }}
        />
      )}
    </div>
  );
}