import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { CtaBanner } from "@/components/sections/cta-banner";
import {
  QrCode, ShoppingCart, BarChart3, Users, Package,
  Bell, Smartphone, ChevronRight,
} from "lucide-react";

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://meezi.ir";

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("tourTitle"),
    description: t("tourDesc"),
    alternates: {
      canonical: `${BASE_URL}/${locale}/tour`,
      languages: { fa: `${BASE_URL}/fa/tour`, en: `${BASE_URL}/en/tour` },
    },
    openGraph: { title: t("tourTitle"), description: t("tourDesc"), url: `${BASE_URL}/${locale}/tour` },
  };
}

const STEPS = [
  {
    id: "qr-menu",
    icon: QrCode,
    stepFa: "مرحله ۱", stepEn: "Step 1",
    titleFa: "منوی دیجیتال QR",
    titleEn: "QR Digital Menu",
    descFa: "مشتری گوشی خود را جلوی کد QR میز نگه می‌دارد. منو باز می‌شود — کامل با تصاویر، توضیحات، قیمت و دسته‌بندی. مشتری آیتم‌ها را انتخاب می‌کند و مستقیم سفارش می‌دهد.",
    descEn: "The customer holds their phone up to the table QR code. The menu opens — complete with images, descriptions, price, and categories. They select items and order directly.",
    mockup: "qr",
    color: "brand",
  },
  {
    id: "pos",
    icon: ShoppingCart,
    stepFa: "مرحله ۲", stepEn: "Step 2",
    titleFa: "سیستم POS و صندوق",
    titleEn: "POS & Cashier System",
    descFa: "سفارش‌ها بلافاصله در داشبورد گارسون و صندوق ظاهر می‌شوند. پرداخت با نقد، کارتخوان یا آنلاین. تخفیف، کوپن و تقسیم صورت‌حساب همه در یک صفحه.",
    descEn: "Orders instantly appear on the waiter dashboard and cashier. Payment by cash, card terminal, or online. Discounts, coupons, and bill splitting all on one screen.",
    mockup: "pos",
    color: "amber",
  },
  {
    id: "kitchen",
    icon: Bell,
    stepFa: "مرحله ۳", stepEn: "Step 3",
    titleFa: "اعلان آشپزخانه",
    titleEn: "Kitchen Notifications",
    descFa: "سفارش به‌صورت خودکار به پرینتر آشپزخانه ارسال می‌شود و روی صفحه KDS ظاهر می‌شود. آشپز آماده می‌کند، وضعیت را به «آماده» تغییر می‌دهد، گارسون اعلان می‌گیرد.",
    descEn: "The order auto-prints to the kitchen printer and appears on the KDS screen. The chef prepares, marks it ready, and the waiter gets a notification.",
    mockup: "kitchen",
    color: "orange",
  },
  {
    id: "analytics",
    icon: BarChart3,
    stepFa: "مرحله ۴", stepEn: "Step 4",
    titleFa: "تحلیل و گزارش‌گیری",
    titleEn: "Analytics & Reporting",
    descFa: "داشبورد مدیریتی فروش لحظه‌ای، پرفروش‌ترین آیتم‌ها، ساعت پیک، درآمد هفتگی و مقایسه ماهانه را نشان می‌دهد. همه داده‌ها قابل export به Excel.",
    descEn: "The management dashboard shows real-time sales, best sellers, peak hours, weekly revenue, and monthly comparisons. All data exportable to Excel.",
    mockup: "analytics",
    color: "blue",
  },
  {
    id: "staff",
    icon: Users,
    stepFa: "مرحله ۵", stepEn: "Step 5",
    titleFa: "مدیریت کارکنان",
    titleEn: "Staff Management",
    descFa: "هر کارمند کد QR اختصاصی برای ثبت حضور دارد. شیفت‌بندی، مرخصی و عملکرد همه در یک پنل. دسترسی نقش‌محور: گارسون، کاشیر، مدیر.",
    descEn: "Each employee has a unique QR code for attendance. Shifts, leaves, and performance all in one panel. Role-based access: waiter, cashier, manager.",
    mockup: "staff",
    color: "purple",
  },
  {
    id: "mobile",
    icon: Smartphone,
    stepFa: "مرحله ۶", stepEn: "Step 6",
    titleFa: "اپ موبایل گارسون",
    titleEn: "Waiter Mobile App",
    descFa: "گارسون‌ها با اپ موبایل میزی وضعیت میزها را می‌بینند، سفارش‌های جدید دریافت می‌کنند، به درخواست مشتریان پاسخ می‌دهند و حضور خود را ثبت می‌کنند.",
    descEn: "Waiters use the Meezi mobile app to see table status, receive new orders, respond to customer calls, and track their attendance.",
    mockup: "mobile",
    color: "brand",
  },
];

// CSS mockup components for each step
function QrMockup() {
  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-lg">
      <div className="mb-3 flex items-center gap-2">
        <div className="h-8 w-8 rounded-lg bg-brand-700 p-1.5"><QrCode className="h-full w-full text-white" /></div>
        <div>
          <div className="text-xs font-semibold text-gray-800">کافه درنا</div>
          <div className="text-[10px] text-gray-400">میز ۷</div>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-2">
        {[
          { name: "اسپرسو دوبل", price: "۴۵,۰۰۰", emoji: "☕" },
          { name: "کیک شکلاتی", price: "۵۸,۰۰۰", emoji: "🍰" },
          { name: "لاته کارامل", price: "۶۵,۰۰۰", emoji: "🥤" },
          { name: "اسموتی انبه", price: "۷۲,۰۰۰", emoji: "🥭" },
        ].map((item) => (
          <div key={item.name} className="rounded-xl border border-gray-100 bg-gray-50 p-2.5">
            <div className="mb-1 text-xl">{item.emoji}</div>
            <div className="text-[10px] font-medium text-gray-800 leading-tight">{item.name}</div>
            <div className="text-[10px] text-brand-700 font-semibold">{item.price}</div>
          </div>
        ))}
      </div>
      <button className="mt-3 w-full rounded-lg bg-brand-700 py-2 text-xs font-semibold text-white">
        ثبت سفارش
      </button>
    </div>
  );
}

function PosMockup() {
  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-lg">
      <div className="mb-3 text-xs font-semibold text-gray-700">سفارش فعال — میز ۷</div>
      <div className="space-y-2 mb-3">
        {[
          { name: "اسپرسو دوبل", qty: 2, price: "۹۰,۰۰۰" },
          { name: "کیک شکلاتی", qty: 1, price: "۵۸,۰۰۰" },
        ].map((i) => (
          <div key={i.name} className="flex items-center justify-between rounded-lg bg-gray-50 px-3 py-2">
            <span className="text-[11px] font-medium text-gray-700">{i.name} ×{i.qty}</span>
            <span className="text-[11px] text-brand-700 font-semibold">{i.price}</span>
          </div>
        ))}
      </div>
      <div className="border-t pt-2 flex justify-between">
        <span className="text-xs text-gray-500">جمع</span>
        <span className="text-sm font-bold text-gray-900">۱۴۸,۰۰۰ ت</span>
      </div>
      <div className="mt-3 grid grid-cols-2 gap-2">
        <button className="rounded-lg border border-brand-200 py-1.5 text-[10px] font-medium text-brand-700">کارتخوان</button>
        <button className="rounded-lg bg-brand-700 py-1.5 text-[10px] font-semibold text-white">نقدی</button>
      </div>
    </div>
  );
}

function AnalyticsMockup() {
  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-lg">
      <div className="mb-3 text-xs font-semibold text-gray-700">گزارش هفته</div>
      <div className="grid grid-cols-2 gap-2 mb-3">
        <div className="rounded-xl bg-brand-50 p-3">
          <div className="text-[10px] text-brand-600">فروش کل</div>
          <div className="text-sm font-bold text-brand-700">۱۲.۴ م</div>
          <div className="text-[9px] text-green-600">+۱۸٪</div>
        </div>
        <div className="rounded-xl bg-amber-50 p-3">
          <div className="text-[10px] text-amber-600">سفارش‌ها</div>
          <div className="text-sm font-bold text-amber-700">۸۴۲</div>
          <div className="text-[9px] text-green-600">+۱۲٪</div>
        </div>
      </div>
      <div className="flex h-14 items-end gap-1">
        {[55, 70, 45, 85, 60, 95, 75].map((h, i) => (
          <div key={i} className="flex-1 rounded-t" style={{ height: `${h}%`, background: `rgba(15,110,86,${0.2 + i * 0.08})` }} />
        ))}
      </div>
      <div className="mt-2 text-[9px] text-gray-400 text-center">شنبه — جمعه</div>
    </div>
  );
}

function GenericMockup({ icon: Icon, color, label }: { icon: React.ElementType; color: string; label: string }) {
  const colors: Record<string, string> = {
    orange: "bg-orange-50 text-orange-600",
    purple: "bg-purple-50 text-purple-600",
    brand: "bg-brand-50 text-brand-700",
  };
  return (
    <div className="flex h-56 items-center justify-center rounded-2xl border border-gray-200 bg-white shadow-lg flex-col gap-3">
      <div className={`flex h-16 w-16 items-center justify-center rounded-2xl ${colors[color] ?? "bg-gray-100"}`}>
        <Icon className="h-8 w-8" />
      </div>
      <span className="text-sm font-medium text-gray-600">{label}</span>
    </div>
  );
}

function StepMockup({ mockup, icon, titleFa }: { mockup: string; icon: React.ElementType; titleFa: string }) {
  if (mockup === "qr") return <QrMockup />;
  if (mockup === "pos") return <PosMockup />;
  if (mockup === "analytics") return <AnalyticsMockup />;
  return <GenericMockup icon={icon} color={mockup === "kitchen" ? "orange" : mockup === "staff" ? "purple" : "brand"} label={titleFa} />;
}

export default async function TourPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const isEn = locale === "en";
  const base = `/${locale}`;

  return (
    <>
      <Navbar />
      <main className="pt-16">
        {/* Hero */}
        <div className="bg-gradient-to-br from-brand-900 to-brand-700 py-20 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">
            {isEn ? "Application Tour" : "تور اپلیکیشن"}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold text-white sm:text-4xl">
            {isEn ? "See Meezi in action" : "میزی را در عمل ببینید"}
          </h1>
          <p className="mx-auto mt-4 max-w-xl text-lg text-white/60">
            {isEn
              ? "A step-by-step walkthrough of the complete Meezi workflow — from customer order to management report."
              : "یک گردش گام‌به‌گام از جریان کامل کار با میزی — از سفارش مشتری تا گزارش مدیریتی."}
          </p>
        </div>

        {/* Steps */}
        <section className="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
          <div className="space-y-20">
            {STEPS.map((step, i) => (
              <div key={step.id} id={step.id} className={`grid items-center gap-10 lg:grid-cols-2 ${i % 2 === 1 ? "lg:grid-flow-dense" : ""}`}>
                {/* Mockup */}
                <div className={i % 2 === 1 ? "lg:col-start-2" : ""}>
                  <StepMockup mockup={step.mockup} icon={step.icon} titleFa={step.titleFa} />
                </div>
                {/* Text */}
                <div>
                  <div className="mb-2 flex items-center gap-2">
                    <span className="rounded-full bg-brand-100 px-2.5 py-0.5 text-xs font-semibold text-brand-700">
                      {isEn ? step.stepEn : step.stepFa}
                    </span>
                  </div>
                  <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50">
                    <step.icon className="h-5 w-5 text-brand-700" />
                  </div>
                  <h2 className="mb-3 text-2xl font-bold text-gray-900">
                    {isEn ? step.titleEn : step.titleFa}
                  </h2>
                  <p className="text-gray-500 leading-relaxed">
                    {isEn ? step.descEn : step.descFa}
                  </p>
                </div>
              </div>
            ))}
          </div>

          {/* CTA after tour */}
          <div className="mt-20 rounded-2xl border border-brand-100 bg-brand-50 p-8 text-center">
            <h3 className="text-xl font-bold text-gray-900">
              {isEn ? "Ready to try it yourself?" : "آماده‌اید خودتان امتحان کنید؟"}
            </h3>
            <p className="mt-2 text-gray-500">
              {isEn ? "Book a free 30-minute demo and see Meezi live." : "یک دمو ۳۰ دقیقه‌ای رایگان بگیرید و میزی را زنده ببینید."}
            </p>
            <a href={`${base}/demo`} className="mt-5 inline-flex items-center gap-2 rounded-xl bg-brand-700 px-6 py-3 text-sm font-semibold text-white hover:bg-brand-800 transition-colors">
              {isEn ? "Request Free Demo" : "درخواست دمو رایگان"}
              <ChevronRight className="h-4 w-4" />
            </a>
          </div>
        </section>

        <CtaBanner />
      </main>
      <Footer />
    </>
  );
}
