smoothschedule/frontend/src/pages/help/HelpSettingsEmbedWidget.tsx

/**
 * Help Embed Widget Settings Page
 *
 * User-friendly help documentation for the Embed Widget feature.
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import {
  ArrowLeft,
  Code,
  ExternalLink,
  Copy,
  Layout,
  Palette,
  Globe,
  ChevronRight,
  HelpCircle,
  Monitor,
  Smartphone,
  Settings,
  CheckCircle,
} from 'lucide-react';

const HelpSettingsEmbedWidget: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      {/* Back Button */}
      <button
        onClick={() => navigate(-1)}
        className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
      >
        <ArrowLeft size={20} />
        {t('common.back', 'Back')}
      </button>

      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
            <Code size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Embed Widget Guide
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              Add a booking widget to your website in minutes
            </p>
          </div>
        </div>
      </div>

      {/* Overview Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Layout size={20} className="text-brand-500" />
          Overview
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The Embed Widget lets you add SmoothSchedule's booking functionality directly to your existing website.
            Your customers can book appointments without leaving your site, creating a seamless experience that
            matches your brand.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            Works on any website platform including WordPress, Wix, Squarespace, Shopify, or custom HTML sites.
            No technical expertise required - just copy and paste the code snippet.
          </p>
        </div>
      </section>

      {/* Embed Options Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Code size={20} className="text-brand-500" />
          Embed Options
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Layout size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Iframe Embed</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Simple HTML iframe - works everywhere, fixed size, easy to implement</p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Code size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">JavaScript Snippet</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Advanced option - responsive sizing, better integration, modal support</p>
              </div>
            </div>
          </div>
          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <p className="text-sm text-blue-800 dark:text-blue-200">
              <strong>Recommendation:</strong> Use the iframe for quick setup. Use JavaScript snippet for better responsive design
              and if you want the widget to appear as a modal/popup.
            </p>
          </div>
        </div>
      </section>

      {/* Customization Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Palette size={20} className="text-brand-500" />
          Customization Options
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="space-y-4">
            <div className="flex items-start gap-3">
              <Palette size={18} className="text-pink-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Brand Colors</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Customize primary color, button styles, and backgrounds to match your website</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Layout size={18} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Widget Size</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Set width and height (iframe) or let it adapt to your page layout (JavaScript)</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Monitor size={18} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Responsive Design</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Widget automatically adapts to mobile, tablet, and desktop screen sizes</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Settings size={18} className="text-orange-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Display Preferences</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">Choose default service, hide certain options, or pre-select staff members</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Installation Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Globe size={20} className="text-brand-500" />
          Installation by Platform
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <ol className="space-y-4">
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">WordPress</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Add a Custom HTML block to your page, paste the embed code, and publish. Works with any page builder.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Wix</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click "Add Elements" → "Embed" → "Embed a Widget" → "HTML iframe" or "Custom Code", then paste your code.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Squarespace</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Edit your page, add a "Code" block, paste the embed code, and save. Set to HTML mode if prompted.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">4</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Shopify</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Go to Online Store → Pages → Create/Edit page → Show HTML editor → Paste code in desired location.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">5</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Custom HTML Website</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Paste the embed code directly into your HTML file where you want the widget to appear. For JavaScript snippet, add before closing &lt;/body&gt; tag.
                </p>
              </div>
            </li>
          </ol>
        </div>
      </section>

      {/* Tips & Best Practices */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <CheckCircle size={20} className="text-brand-500" />
          Tips & Best Practices
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <ul className="space-y-3 text-sm text-gray-600 dark:text-gray-300">
            <li className="flex items-start gap-2">
              <Copy size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
              <span>
                <strong>Copy-to-clipboard:</strong> Use the built-in copy button in Settings → Embed Widget to easily copy your personalized code.
              </span>
            </li>
            <li className="flex items-start gap-2">
              <Monitor size={16} className="text-blue-500 mt-0.5 flex-shrink-0" />
              <span>
                <strong>Test responsiveness:</strong> Preview the widget on mobile, tablet, and desktop before publishing to ensure it looks good everywhere.
              </span>
            </li>
            <li className="flex items-start gap-2">
              <Palette size={16} className="text-purple-500 mt-0.5 flex-shrink-0" />
              <span>
                <strong>Match your brand:</strong> Customize colors to align with your website's design. The widget should feel like a natural part of your site.
              </span>
            </li>
            <li className="flex items-start gap-2">
              <Layout size={16} className="text-orange-500 mt-0.5 flex-shrink-0" />
              <span>
                <strong>Placement matters:</strong> Put the widget on high-traffic pages like your homepage or services page for maximum bookings.
              </span>
            </li>
            <li className="flex items-start gap-2">
              <Smartphone size={16} className="text-pink-500 mt-0.5 flex-shrink-0" />
              <span>
                <strong>Mobile optimization:</strong> Most bookings happen on mobile. Ensure the widget is easy to use on small screens.
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ExternalLink size={16} className="text-teal-500 mt-0.5 flex-shrink-0" />
              <span>
                <strong>Update anytime:</strong> Changes to your services, availability, or branding automatically appear in the widget - no need to re-embed.
              </span>
            </li>
          </ul>
        </div>
      </section>

      {/* Quick Setup Guide */}
      <section className="mb-10">
        <div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
          <div className="flex items-start gap-4">
            <Settings size={24} className="text-brand-600 dark:text-brand-400 mt-1" />
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                Ready to Get Started?
              </h3>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                Head to your Embed Widget settings to customize your widget, preview it, and copy the code snippet.
                You'll have it live on your website in just a few minutes.
              </p>
              <button
                onClick={() => navigate('/dashboard/settings/embed-widget')}
                className="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
              >
                Go to Embed Widget Settings
                <ChevronRight size={16} />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Need More Help */}
      <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
        <HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
          Need More Help?
        </h3>
        <p className="text-gray-600 dark:text-gray-300 mb-4">
          Having trouble embedding the widget? Our support team can help with installation and customization.
        </p>
        <button
          onClick={() => navigate('/dashboard/tickets')}
          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
        >
          Contact Support
        </button>
      </section>
    </div>
  );
};

export default HelpSettingsEmbedWidget;