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

/**
 * Help Settings Appearance (Branding) Page
 *
 * Comprehensive documentation for the Branding Settings page.
 * Documents: Logo uploads (website/email), display modes, color palettes, custom colors with live preview.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft, Palette, Image, Upload, Eye, Save,
  CheckCircle, ChevronRight, HelpCircle, AlertCircle, Sparkles,
} from 'lucide-react';

const HelpSettingsAppearance: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      <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} /> 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-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
            <Palette size={24} className="text-purple-600 dark:text-purple-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Branding Settings Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Customize your logos and brand colors</p>
          </div>
        </div>
      </div>

      {/* Overview */}
      <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" /> 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 Branding Settings page lets you customize how your business appears throughout SmoothSchedule.
            Upload your logos, choose from preset color palettes, or define custom brand colors. Changes
            preview instantly so you can see exactly how they'll look before saving.
          </p>
          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
            <div className="flex items-start gap-3">
              <AlertCircle size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
              <p className="text-sm text-blue-700 dark:text-blue-300">
                <strong>Owner Access Required:</strong> Only business owners can modify branding settings.
                This feature may be limited based on your subscription plan.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Brand Logos */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Image size={20} className="text-brand-500" /> Brand Logos
        </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">
            You can upload two different logos for different contexts. PNG images with transparent
            backgrounds are recommended for the best appearance across light and dark themes.
          </p>

          <div className="space-y-6">
            {/* Website Logo */}
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                <Image size={18} className="text-blue-500" /> Website Logo
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
                This logo appears in the sidebar navigation and on customer-facing booking pages.
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">Recommended Size:</span>
                  <span className="text-gray-500 dark:text-gray-400 ml-2">500×500 pixels</span>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">Supported Formats:</span>
                  <span className="text-gray-500 dark:text-gray-400 ml-2">PNG, JPEG, SVG</span>
                </div>
              </div>
            </div>

            {/* Email Logo */}
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                <Image size={18} className="text-green-500" /> Email Logo
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
                This logo appears at the top of all email notifications sent to customers (booking
                confirmations, reminders, etc.). A wider format works best for email headers.
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">Recommended Size:</span>
                  <span className="text-gray-500 dark:text-gray-400 ml-2">600×200 pixels (wide)</span>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">Supported Formats:</span>
                  <span className="text-gray-500 dark:text-gray-400 ml-2">PNG, JPEG, SVG</span>
                </div>
              </div>
            </div>

            {/* Upload Instructions */}
            <div className="p-4 bg-brand-50 dark:bg-brand-900/20 rounded-lg border border-brand-200 dark:border-brand-800">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">Uploading a Logo</h4>
              <ol className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-decimal list-inside">
                <li>Click the <strong>Upload</strong> button next to the logo type</li>
                <li>Select an image file from your computer</li>
                <li>The logo preview will update immediately</li>
                <li>Click <strong>Save Changes</strong> to apply the logo</li>
              </ol>
              <p className="text-xs text-gray-500 dark:text-gray-400 mt-3">
                To remove a logo, click the × button on the preview image, then save.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Logo Display Mode */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Eye size={20} className="text-brand-500" /> Logo Display Mode
        </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">
            Control how your website logo is displayed in the sidebar and on booking pages.
            This setting only affects the website logo, not the email logo.
          </p>

          <div className="space-y-3">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="w-8 h-8 rounded bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs font-bold text-gray-500 dark:text-gray-400">
                Aa
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Text Only</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Display only your business name in text. Good if you don't have a logo or prefer a clean look.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="w-8 h-8 rounded bg-brand-100 dark:bg-brand-900/50 flex items-center justify-center">
                <Image size={16} className="text-brand-500" />
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Logo Only</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Display only your uploaded logo image without text. Best for recognizable brand marks.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="w-8 h-8 rounded bg-brand-100 dark:bg-brand-900/50 flex items-center justify-center">
                <div className="flex items-center gap-1">
                  <Image size={12} className="text-brand-500" />
                  <span className="text-[8px] font-bold text-brand-600">+</span>
                </div>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Logo and Text</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Display both your logo and business name together. Ideal for full brand recognition.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Color Palettes */}
      <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-purple-500" /> Color Palettes
        </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">
            Choose from 10 professionally designed color palettes. Each palette includes a primary
            and secondary color that work well together. Click any palette to instantly preview how
            it looks throughout the interface.
          </p>

          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 mb-6">
            {[
              { name: 'Ocean Blue', colors: ['#2563eb', '#0ea5e9'] },
              { name: 'Sky Blue', colors: ['#0ea5e9', '#38bdf8'] },
              { name: 'Mint Green', colors: ['#10b981', '#34d399'] },
              { name: 'Coral Reef', colors: ['#f97316', '#fb923c'] },
              { name: 'Lavender', colors: ['#a78bfa', '#c4b5fd'] },
              { name: 'Rose Pink', colors: ['#ec4899', '#f472b6'] },
              { name: 'Forest Green', colors: ['#059669', '#10b981'] },
              { name: 'Royal Purple', colors: ['#7c3aed', '#a78bfa'] },
              { name: 'Slate Gray', colors: ['#475569', '#64748b'] },
              { name: 'Crimson Red', colors: ['#dc2626', '#ef4444'] },
            ].map((palette) => (
              <div key={palette.name} className="text-center">
                <div
                  className="h-6 rounded-md mb-1"
                  style={{ background: `linear-gradient(to right, ${palette.colors[0]}, ${palette.colors[1]})` }}
                />
                <span className="text-xs text-gray-600 dark:text-gray-400">{palette.name}</span>
              </div>
            ))}
          </div>

          <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
            <div className="flex items-start gap-3">
              <Sparkles size={18} className="text-yellow-500 mt-0.5 flex-shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white text-sm">Live Preview</h4>
                <p className="text-xs text-gray-600 dark:text-gray-400">
                  When you click a palette, the interface instantly updates to show those colors.
                  If you navigate away without saving, colors revert to your saved settings.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Custom Colors */}
      <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" /> Custom Colors
        </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">
            If the preset palettes don't match your brand, you can define your own colors using
            the color picker or by entering hex color codes directly.
          </p>

          <div className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <h4 className="font-medium text-gray-900 dark:text-white mb-2">Primary Color</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Used for buttons, links, and interactive elements. This is your main brand color.
                </p>
              </div>
              <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <h4 className="font-medium text-gray-900 dark:text-white mb-2">Secondary Color</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Used for accents, hover states, and gradients. Should complement the primary color.
                </p>
              </div>
            </div>

            <div className="p-4 bg-brand-50 dark:bg-brand-900/20 rounded-lg border border-brand-200 dark:border-brand-800">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">Setting Custom Colors</h4>
              <ol className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-decimal list-inside">
                <li>Click the color swatch to open the color picker</li>
                <li>Select a color visually or enter a hex code (e.g., #3b82f6)</li>
                <li>The preview bar shows the gradient of your primary and secondary colors</li>
                <li>Click <strong>Save Changes</strong> to apply your custom colors</li>
              </ol>
            </div>
          </div>
        </div>
      </section>

      {/* Saving Changes */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Save size={20} className="text-brand-500" /> Saving Changes
        </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">
            All branding changes (logos, display mode, and colors) are saved together when you
            click the Save Changes button at the bottom of the page.
          </p>

          <div className="space-y-3">
            <div className="flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
              <CheckCircle size={18} className="text-green-500 mt-0.5 flex-shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white text-sm">Changes Save Together</h4>
                <p className="text-xs text-gray-600 dark:text-gray-400">
                  Logos, display mode, and colors are all saved in one action
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
              <AlertCircle size={18} className="text-yellow-500 mt-0.5 flex-shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white text-sm">Unsaved Changes Revert</h4>
                <p className="text-xs text-gray-600 dark:text-gray-400">
                  If you leave the page without saving, colors revert to your last saved settings
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tips */}
      <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
        </h2>
        <div className="bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
          <ul className="space-y-3">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                Use PNG images with transparent backgrounds for logos to look best on both light and dark themes
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                Test color readability by previewing your booking page in both light and dark modes
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                Choose colors that provide good contrast for text readability and accessibility
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                Consider using your existing brand colors from your website or marketing materials
              </span>
            </li>
          </ul>
        </div>
      </section>

      {/* Related Features */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Features</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Link to="/help/settings/general" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
            <Eye size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">General Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/help/settings/booking" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
            <Upload size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Booking Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/help/settings/email" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
            <Image size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Email Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/help/settings/domains" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
            <Palette size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Custom Domains</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
        </div>
      </section>

      {/* Help Footer */}
      <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">
          Our support team is ready to help with any branding questions.
        </p>
        <button
          onClick={() => navigate('/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 HelpSettingsAppearance;