'use client';

import Link from 'next/link';
import {
  LayoutDashboard, ShoppingBag, CalendarDays, Bot, MessageSquare,
  BarChart3, BookOpen, Phone, Layers, Upload,
  Store, Shield, Users, GitBranch, CreditCard, Code2, Headphones,
  Database, Globe, CheckCircle2, Zap, Volume2,
} from 'lucide-react';
import DemoLaunchButton, {
  DemoLaunchCard,
} from '@client/components/demo/DemoLaunchButton';
import {
  DEMO_OWNER_EMAIL, DEMO_OWNER_PASSWORD,
  DEMO_ADMIN_EMAIL, DEMO_ADMIN_PASSWORD,
} from '@/lib/demoMode';

const TOUR_CARDS: Array<{
  title: string;
  description: string;
  href: string;
  target: 'owner' | 'admin';
  icon: React.ReactNode;
  accent: 'orange' | 'teal' | 'navy';
}> = [
  {
    title: 'AI Agent Configuration',
    description: 'Tune the chat & voice agent — tone, prompts, knowledge, and escalation rules.',
    href: '/ai-agent-config',
    target: 'owner',
    icon: <Bot size={18} />,
    accent: 'orange',
  },
  {
    title: 'Unified Conversations',
    description: 'Every chat, voice call and message in one inbox, with one-click human takeover.',
    href: '/conversations',
    target: 'owner',
    icon: <MessageSquare size={18} />,
    accent: 'teal',
  },
  {
    title: 'Order Management',
    description: 'Real-time orders across dine-in, takeaway, and delivery channels.',
    href: '/order-management',
    target: 'owner',
    icon: <ShoppingBag size={18} />,
    accent: 'orange',
  },
  {
    title: 'Table Bookings',
    description: 'Live reservation calendar with capacity rules and automated confirmations.',
    href: '/table-booking-management',
    target: 'owner',
    icon: <CalendarDays size={18} />,
    accent: 'teal',
  },
  {
    title: 'Menu Management',
    description: 'Multi-branch menu with categories, modifiers, photos and bulk CSV upload.',
    href: '/menu-management',
    target: 'owner',
    icon: <BookOpen size={18} />,
    accent: 'orange',
  },
  {
    title: 'Analytics Dashboard',
    description: 'Live KPIs, channel breakdown, AI accuracy, and revenue trends.',
    href: '/analytics',
    target: 'owner',
    icon: <BarChart3 size={18} />,
    accent: 'navy',
  },
];

const FEATURES: Array<{ label: string; icon: React.ReactNode }> = [
  // AI & messaging
  { label: 'AI agent (chat + voice)', icon: <Bot size={14} /> },
  { label: 'AI human takeover', icon: <Headphones size={14} /> },
  { label: 'Voice / Twilio calls', icon: <Phone size={14} /> },
  { label: 'Unified conversations inbox', icon: <MessageSquare size={14} /> },
  { label: 'Knowledge base', icon: <Database size={14} /> },
  { label: 'Embeddable chat widget', icon: <Code2 size={14} /> },
  { label: 'Voice prompt library', icon: <Volume2 size={14} /> },
  // Restaurant ops
  { label: 'Real-time orders', icon: <ShoppingBag size={14} /> },
  { label: 'Real-time channel breakdown', icon: <BarChart3 size={14} /> },
  { label: 'Table bookings & calendar', icon: <CalendarDays size={14} /> },
  { label: 'Menu with modifiers', icon: <Layers size={14} /> },
  { label: 'Bulk menu CSV upload', icon: <Upload size={14} /> },
  { label: 'Multi-branch support', icon: <GitBranch size={14} /> },
  { label: 'Customer profiles & history', icon: <Users size={14} /> },
  { label: 'Staff & roles', icon: <Shield size={14} /> },
  // Platform
  { label: 'Stripe billing & plans', icon: <CreditCard size={14} /> },
  { label: 'Multi-tenant admin panel', icon: <Store size={14} /> },
  { label: 'Platform analytics', icon: <LayoutDashboard size={14} /> },
  { label: 'White-label branding', icon: <Globe size={14} /> },
];

const accentMap: Record<string, { ring: string; bg: string; text: string }> = {
  orange: { ring: 'ring-orange-200 dark:ring-orange-800', bg: 'bg-orange-50 dark:bg-orange-950/30', text: 'text-orange-600 dark:text-orange-400' },
  teal: { ring: 'ring-teal-200 dark:ring-teal-800', bg: 'bg-teal-50 dark:bg-teal-950/30', text: 'text-teal-600 dark:text-teal-400' },
  navy: { ring: 'ring-slate-300 dark:ring-slate-700', bg: 'bg-slate-100 dark:bg-slate-800/60', text: 'text-slate-700 dark:text-slate-200' },
};

export default function DemoClient() {
  return (
    <div data-ra-landing className="min-h-screen bg-slate-50 dark:bg-[#080a0f]">
      {/* Hero */}
      <section className="relative overflow-hidden border-b border-slate-200 dark:border-slate-800">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 left-1/4 w-72 h-72 bg-orange-400/15 dark:bg-orange-500/10 rounded-full blur-3xl" />
          <div className="absolute bottom-0 right-1/4 w-72 h-72 bg-teal-400/10 dark:bg-teal-500/8 rounded-full blur-3xl" />
        </div>
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/10 border border-orange-200 dark:border-orange-800 text-orange-600 dark:text-orange-400 text-xs font-semibold mb-5">
            <Zap size={12} />
            Live demo — pre-seeded data
          </div>
          <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight mb-5">
            See RestroAgent in action.
          </h1>
          <p className="text-base sm:text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto mb-10">
            Sign in instantly with a fully populated demo restaurant or the platform admin panel.
            No signup, no credit card — just one click and you’re inside the product.
          </p>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl mx-auto">
            <DemoLaunchButton
              target="owner"
              primary
              label="Launch Owner Demo"
              description="Restaurant owner — orders, AI, menu, analytics"
              icon={<Store size={16} />}
            />
            <DemoLaunchButton
              target="admin"
              label="Launch Admin Demo"
              description="Platform superadmin — all tenants & billing"
              icon={<Shield size={16} />}
            />
          </div>

          {/* Visible credential hints (in case auto-login is blocked) */}
          <div className="mt-8 max-w-2xl mx-auto">
            <p className="text-xs font-semibold uppercase tracking-widest text-slate-500 dark:text-slate-500 mb-3">
              Or sign in manually with these credentials
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-left">
              <div className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
                <div className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-orange-600 dark:text-orange-400 mb-2">
                  <Store size={11} /> Restaurant owner
                </div>
                <code className="block font-mono text-xs text-slate-700 dark:text-slate-300 leading-relaxed select-all">
                  {DEMO_OWNER_EMAIL}
                  <br />
                  {DEMO_OWNER_PASSWORD}
                </code>
              </div>
              <div className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
                <div className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-slate-700 dark:text-slate-300 mb-2">
                  <Shield size={11} /> Platform superadmin
                </div>
                <code className="block font-mono text-xs text-slate-700 dark:text-slate-300 leading-relaxed select-all">
                  {DEMO_ADMIN_EMAIL}
                  <br />
                  {DEMO_ADMIN_PASSWORD}
                </code>
              </div>
            </div>
          </div>

          <p className="mt-6 text-xs text-slate-500 dark:text-slate-500">
            Sessions are isolated per browser. Demo data resets periodically.
          </p>
        </div>
      </section>

      {/* Tour cards */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center mb-10">
          <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-3">Tour the product</p>
          <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-3">Jump straight to a screen</h2>
          <p className="text-sm text-slate-500 dark:text-slate-400 max-w-xl mx-auto">
            Each card signs you in and drops you exactly where the action is.
          </p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {TOUR_CARDS.map((card) => {
            const a = accentMap[card.accent];
            return (
              <DemoLaunchCard
                key={card.href}
                target={card.target}
                redirect={card.href}
                title={card.title}
                description={card.description}
                ringClass={a.ring}
                icon={
                  <span className={`w-9 h-9 rounded-lg flex items-center justify-center ${a.bg} ${a.text}`}>
                    {card.icon}
                  </span>
                }
              />
            );
          })}
        </div>
      </section>

      {/* Full feature list */}
      <section className="bg-white dark:bg-slate-900/40 border-y border-slate-200 dark:border-slate-800 py-16">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-10">
            <p className="text-xs font-semibold text-teal-600 dark:text-teal-400 uppercase tracking-widest mb-3">Full feature list</p>
            <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-3">Everything you can explore</h2>
            <p className="text-sm text-slate-500 dark:text-slate-400 max-w-xl mx-auto">
              Spanning AI, restaurant operations, and platform admin — every capability in the product is live in the demo.
            </p>
          </div>

          <ul className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
            {FEATURES.map((f) => (
              <li
                key={f.label}
                className="flex items-center gap-2.5 rounded-lg border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 px-3 py-2.5 text-sm text-slate-700 dark:text-slate-300"
              >
                <span className="w-6 h-6 rounded-md bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 flex items-center justify-center shrink-0">
                  {f.icon}
                </span>
                <span className="truncate">{f.label}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* How the demo works */}
      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 sm:p-8">
          <div className="flex items-start gap-3 mb-5">
            <span className="w-9 h-9 rounded-lg bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 flex items-center justify-center shrink-0">
              <CheckCircle2 size={18} />
            </span>
            <div>
              <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-1">How the demo works</h2>
              <p className="text-sm text-slate-500 dark:text-slate-400">A few things to know before you click around.</p>
            </div>
          </div>

          <ol className="space-y-3 text-sm text-slate-600 dark:text-slate-400">
            {[
              'When you click a launch button, we seed the demo accounts (idempotent), then sign you in with a real session cookie.',
              'The owner demo loads a fully populated tenant — sample orders, bookings, a multi-branch menu, and AI agent config.',
              'The admin demo signs you in as a platform superadmin so you can see every tenant, billing plan, and platform setting.',
              'The demo environment is shared across visitors and resets periodically. Please don’t enter real customer information or PII.',
              'On a buyer’s self-hosted install, this /demo page is hidden by default — buyers see only their own real data.',
            ].map((line, i) => (
              <li key={i} className="flex gap-3">
                <span className="shrink-0 w-6 h-6 rounded-full bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 text-xs font-bold flex items-center justify-center">
                  {i + 1}
                </span>
                <span className="leading-relaxed">{line}</span>
              </li>
            ))}
          </ol>

          <div className="mt-6 pt-6 border-t border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <p className="text-sm text-slate-600 dark:text-slate-400">Ready for your own deployment?</p>
            <div className="flex gap-2">
              <Link
                href="/pricing"
                className="px-4 py-2 rounded-lg text-sm font-semibold border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:border-teal-300 dark:hover:border-teal-700 hover:text-teal-600 dark:hover:text-teal-400 transition-colors"
              >
                See pricing
              </Link>
              <Link
                href="/register"
                className="px-4 py-2 rounded-lg text-sm font-semibold bg-orange-500 hover:bg-orange-600 text-white shadow-md hover:shadow-orange-500/30 transition-all"
              >
                Start free trial
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}