import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import {
  BookOpen,
  QrCode,
  LayoutGrid,
  ChefHat,
  BarChart3,
  Package,
  UserCog,
  Building2,
  Printer,
  Smartphone,
  ArrowLeft,
  ArrowRight,
  Search,
  LifeBuoy,
} from "lucide-react";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "meta" });
  return { title: t("docsTitle") };
}

const fa = {
  badge: "مستندات",
  title: "راهنمای میزی",
  subtitle: "همه چیزی که برای راه‌اندازی و استفاده از میزی نیاز داری در اینجاست.",
  searchPlaceholder: "جستجو در مستندات...",
  gettingStartedTitle: "شروع سریع",
  gettingStarted: [
    { step: "۱", title: "ثبت‌نام و ساخت کافه", desc: "حساب بساز، اطلاعات کافه‌ات را وارد کن و میزها را تعریف کن." },
    { step: "۲", title: "ورود اقلام منو", desc: "دسته‌بندی‌ها و آیتم‌های منو را با تصویر و قیمت اضافه کن." },
    { step: "۳", title: "چاپ کد QR", desc: "کدهای QR هر میز را پرینت بگیر و روی میزها بچسبان." },
    { step: "۴", title: "آموزش تیم", desc: "داشبورد را به کارکنان نشان بده — در چند ساعت یاد می‌گیرند." },
  ],
  modulesTitle: "راهنمای ماژول‌ها",
  modules: [
    { icon: QrCode, title: "منوی دیجیتال QR", desc: "ساخت و مدیریت منوی آنلاین، دسته‌بندی، تصاویر و قیمت‌ها." },
    { icon: LayoutGrid, title: "سیستم POS", desc: "ثبت سفارش از صندوق، پرداخت‌ها و مدیریت میزها." },
    { icon: ChefHat, title: "آشپزخانه (KDS)", desc: "نمایش سفارش‌ها در آشپزخانه و تایید آماده‌سازی." },
    { icon: BarChart3, title: "گزارش‌ها", desc: "گزارش فروش روزانه، ماهانه و تحلیل پرفروش‌ها." },
    { icon: Package, title: "انبار", desc: "کنترل موجودی مواد اولیه و هشدار کمبود." },
    { icon: UserCog, title: "منابع انسانی", desc: "حضور غیاب، شیفت‌بندی و سطح دسترسی کارکنان." },
    { icon: Building2, title: "چند شعبه", desc: "مدیریت تمام شعبه‌ها از یک داشبورد مرکزی." },
    { icon: Printer, title: "پرینتر", desc: "اتصال پرینتر حرارتی، رسید مشتری و برگه آشپزخانه." },
    { icon: Smartphone, title: "اپ موبایل", desc: "اپ گارسون برای دریافت سفارش و مدیریت میزها." },
  ],
  supportTitle: "به کمک نیاز داری؟",
  supportDesc: "تیم پشتیبانی ما آماده است. از طریق داشبورد یا ایمیل با ما در ارتباط باش.",
  supportBtn: "تماس با پشتیبانی",
  demoBtn: "درخواست آموزش رایگان",
};

const en = {
  badge: "Documentation",
  title: "Meezi Help Center",
  subtitle: "Everything you need to set up and use Meezi is right here.",
  searchPlaceholder: "Search documentation...",
  gettingStartedTitle: "Quick Start",
  gettingStarted: [
    { step: "1", title: "Sign up & create your cafe", desc: "Create an account, enter your cafe details, and define your tables." },
    { step: "2", title: "Add menu items", desc: "Add categories and menu items with photos and prices." },
    { step: "3", title: "Print QR codes", desc: "Print QR codes for each table and place them on the tables." },
    { step: "4", title: "Train your team", desc: "Show staff the dashboard — they'll get comfortable in a few hours." },
  ],
  modulesTitle: "Module Guides",
  modules: [
    { icon: QrCode, title: "QR Digital Menu", desc: "Create and manage your online menu, categories, images, and prices." },
    { icon: LayoutGrid, title: "POS System", desc: "Register orders from the counter, handle payments, and manage tables." },
    { icon: ChefHat, title: "Kitchen (KDS)", desc: "Display orders in the kitchen and confirm preparation." },
    { icon: BarChart3, title: "Reports", desc: "Daily and monthly sales reports and best-seller analysis." },
    { icon: Package, title: "Inventory", desc: "Track ingredient stock levels and low-stock alerts." },
    { icon: UserCog, title: "HR", desc: "Attendance, shift scheduling, and staff access levels." },
    { icon: Building2, title: "Multi-Branch", desc: "Manage all your branches from a single central dashboard." },
    { icon: Printer, title: "Printer", desc: "Connect a thermal printer, customer receipts, and kitchen slips." },
    { icon: Smartphone, title: "Mobile App", desc: "Waiter app for receiving orders and managing tables." },
  ],
  supportTitle: "Need help?",
  supportDesc: "Our support team is ready. Reach us through the dashboard or by email.",
  supportBtn: "Contact Support",
  demoBtn: "Request free training",
};

export default async function DocsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const c = locale === "fa" ? fa : en;
  const Arrow = locale === "fa" ? ArrowLeft : ArrowRight;
  const base = `/${locale}`;

  return (
    <>
      <Navbar />
      <main className="pt-16">
        {/* Hero */}
        <div className="bg-gradient-to-br from-brand-900 to-brand-700 pb-20 pt-16 text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold text-white/80">
            {c.badge}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold text-white sm:text-4xl">{c.title}</h1>
          <p className="mt-3 text-lg text-white/60">{c.subtitle}</p>
          {/* Search bar */}
          <div className="mx-auto mt-8 max-w-lg px-4">
            <div className="relative">
              <Search className="absolute start-4 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
              <input
                type="text"
                placeholder={c.searchPlaceholder}
                className="w-full rounded-xl border border-gray-200 bg-white py-3 ps-10 pe-4 text-sm text-gray-700 shadow-lg focus:outline-none focus:ring-2 focus:ring-brand-500"
              />
            </div>
          </div>
        </div>

        <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
          {/* Quick Start */}
          <section className="mb-20">
            <h2 className="mb-8 text-2xl font-extrabold text-gray-900">{c.gettingStartedTitle}</h2>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              {c.gettingStarted.map(({ step, title, desc }) => (
                <div
                  key={step}
                  className="relative rounded-2xl border border-gray-100 bg-white p-6 shadow-sm"
                >
                  <div className="mb-4 flex h-9 w-9 items-center justify-center rounded-xl bg-brand-700 text-sm font-extrabold text-white">
                    {step}
                  </div>
                  <h3 className="mb-1 font-semibold text-gray-900">{title}</h3>
                  <p className="text-sm leading-relaxed text-gray-500">{desc}</p>
                </div>
              ))}
            </div>
          </section>

          {/* Modules */}
          <section className="mb-20">
            <h2 className="mb-8 text-2xl font-extrabold text-gray-900">{c.modulesTitle}</h2>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {c.modules.map(({ icon: Icon, title, desc }) => (
                <button
                  key={title}
                  type="button"
                  className="group flex cursor-pointer items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm text-start transition-all hover:border-brand-200 hover:shadow-md"
                >
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 transition-colors group-hover:bg-brand-100">
                    <Icon className="h-5 w-5 text-brand-700" />
                  </div>
                  <div>
                    <h3 className="mb-1 font-semibold text-gray-900">{title}</h3>
                    <p className="text-sm text-gray-500">{desc}</p>
                  </div>
                </button>
              ))}
            </div>
          </section>

          {/* Support CTA */}
          <section className="rounded-2xl bg-gradient-to-br from-brand-900 to-brand-700 p-10">
            <div className="flex flex-col items-center gap-6 text-center sm:flex-row sm:text-start">
              <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-white/10">
                <LifeBuoy className="h-7 w-7 text-white" />
              </div>
              <div className="flex-1">
                <h2 className="mb-1 text-xl font-bold text-white">{c.supportTitle}</h2>
                <p className="text-white/60">{c.supportDesc}</p>
              </div>
              <div className="flex flex-wrap gap-3">
                <a
                  href={`${base}/contact`}
                  className="inline-flex items-center gap-2 rounded-xl bg-white px-5 py-2.5 text-sm font-semibold text-brand-700 transition-colors hover:bg-brand-50"
                >
                  {c.supportBtn}
                  <Arrow className="h-4 w-4" />
                </a>
                <a
                  href={`${base}/demo`}
                  className="inline-flex items-center gap-2 rounded-xl border border-white/20 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-white/10"
                >
                  {c.demoBtn}
                </a>
              </div>
            </div>
          </section>
        </div>
      </main>
      <Footer />
    </>
  );
}
