/**
 * Help Settings Booking Page
 *
 * Comprehensive documentation for the Booking Settings page.
 * Documents: Booking URL display/sharing, Return URL configuration.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft, Calendar, Link2, ExternalLink, Copy, Share2,
  CheckCircle, ChevronRight, HelpCircle, AlertCircle, Globe,
} from 'lucide-react';

const HelpSettingsBooking: 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-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
            <Calendar size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Booking Settings Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Configure your booking URL and customer redirect</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">
          <Calendar 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 Booking Settings page is where you find your public booking URL to share with customers
            and configure where customers go after completing a booking. This is an owner-only section
            that controls how customers access your scheduling system.
          </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 view and modify booking settings.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Your Booking URL */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Link2 size={20} className="text-brand-500" /> Your Booking URL
        </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">
            Your booking URL is the public link where customers can view your services and book appointments.
            It's based on your business subdomain and is automatically generated when you create your business.
          </p>

          <div className="space-y-4">
            {/* URL Format */}
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">URL Format</h4>
              <code className="text-sm font-mono text-brand-600 dark:text-brand-400">
                https://[your-subdomain].smoothschedule.com
              </code>
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
                Your subdomain was set when you created your business and cannot be changed.
              </p>
            </div>

            {/* Actions Available */}
            <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">
                <Copy size={20} className="text-blue-500 mt-0.5" />
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white">Copy to Clipboard</h4>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Click the copy icon to copy the full URL to your clipboard for easy sharing
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <ExternalLink size={20} className="text-green-500 mt-0.5" />
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white">Open Booking Page</h4>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Click the external link icon to open your booking page in a new tab
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Sharing Your Booking URL */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Share2 size={20} className="text-brand-500" /> Sharing Your Booking URL
        </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">
            Once you've copied your booking URL, you can share it in many ways to help customers find you:
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white text-sm">Website</h4>
              <p className="text-xs text-gray-500 dark:text-gray-400">Add a "Book Now" button linking to your URL</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white text-sm">Email Signature</h4>
              <p className="text-xs text-gray-500 dark:text-gray-400">Include your booking link in every email</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white text-sm">Social Media</h4>
              <p className="text-xs text-gray-500 dark:text-gray-400">Add to your bio on Instagram, Facebook, etc.</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white text-sm">Business Cards</h4>
              <p className="text-xs text-gray-500 dark:text-gray-400">Print a QR code or short URL on cards</p>
            </div>
          </div>
        </div>
      </section>

      {/* Return URL */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <ExternalLink size={20} className="text-green-500" /> Return URL
        </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 Return URL controls where customers are redirected after successfully completing a booking.
            This is optional but useful for providing a seamless experience that connects back to your website.
          </p>

          <div className="space-y-4">
            {/* How It Works */}
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">How It Works</h4>
              <ol className="text-sm text-gray-600 dark:text-gray-300 space-y-2 list-decimal list-inside">
                <li>Customer completes their booking on your SmoothSchedule page</li>
                <li>If a Return URL is set, they're automatically redirected to that page</li>
                <li>If no Return URL is set, they stay on the booking confirmation page</li>
              </ol>
            </div>

            {/* Example Uses */}
            <div>
              <h4 className="font-medium text-gray-900 dark:text-white mb-3">Common Uses</h4>
              <div className="space-y-3">
                <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <CheckCircle size={18} className="text-green-500 mt-0.5 flex-shrink-0" />
                  <div>
                    <h5 className="font-medium text-gray-900 dark:text-white text-sm">Thank You Page</h5>
                    <p className="text-xs text-gray-500 dark:text-gray-400">
                      Redirect to a custom thank you page on your website with additional info
                    </p>
                    <code className="text-xs text-brand-600 dark:text-brand-400 mt-1 block">
                      https://yourbusiness.com/thank-you
                    </code>
                  </div>
                </div>
                <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <CheckCircle size={18} className="text-green-500 mt-0.5 flex-shrink-0" />
                  <div>
                    <h5 className="font-medium text-gray-900 dark:text-white text-sm">Preparation Instructions</h5>
                    <p className="text-xs text-gray-500 dark:text-gray-400">
                      Send customers to a page with info about what to bring or how to prepare
                    </p>
                    <code className="text-xs text-brand-600 dark:text-brand-400 mt-1 block">
                      https://yourbusiness.com/appointment-prep
                    </code>
                  </div>
                </div>
                <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <CheckCircle size={18} className="text-green-500 mt-0.5 flex-shrink-0" />
                  <div>
                    <h5 className="font-medium text-gray-900 dark:text-white text-sm">Homepage</h5>
                    <p className="text-xs text-gray-500 dark:text-gray-400">
                      Simply return customers to your main website
                    </p>
                    <code className="text-xs text-brand-600 dark:text-brand-400 mt-1 block">
                      https://yourbusiness.com
                    </code>
                  </div>
                </div>
              </div>
            </div>

            {/* Setting the Return URL */}
            <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 the Return URL</h4>
              <ol className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-decimal list-inside">
                <li>Enter the full URL including https://</li>
                <li>Click the Save button</li>
                <li>A confirmation toast will appear when saved successfully</li>
              </ol>
              <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
                To remove the Return URL and keep customers on the confirmation page, clear the field and save.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Custom Domains */}
      <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-purple-500" /> Want Your Own Domain?
        </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 you'd prefer customers to book at your own domain (like book.yourbusiness.com instead of
            yourbusiness.smoothschedule.com), you can set up a custom domain.
          </p>
          <Link
            to="/dashboard/settings/custom-domains"
            className="inline-flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 font-medium"
          >
            Set up a custom domain <ChevronRight size={16} />
          </Link>
        </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-blue-50 dark:from-brand-900/20 dark:to-blue-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">
                Test your booking URL by opening it in an incognito/private browser window to see what customers see
              </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">
                Make sure your Return URL is accessible and mobile-friendly before setting it
              </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">
                Use a URL shortener if you need a simpler link for print materials
              </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">
                The confirmation page shows booking details, so leaving customers there is often fine
              </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="/dashboard/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">
            <Calendar 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="/dashboard/help/settings/appearance" 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">
            <Share2 size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Appearance Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/dashboard/help/services" 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">
            <Calendar size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Services Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/dashboard/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">
            <Globe 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 questions about your booking setup.
        </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 HelpSettingsBooking;
