/**
 * Help Settings Custom Domains Page
 *
 * Documentation for managing custom domains and domain purchases.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  Globe,
  Copy,
  Star,
  Trash2,
  RefreshCw,
  CheckCircle,
  AlertCircle,
  ShoppingCart,
  ChevronRight,
  HelpCircle,
  Lock,
  Settings,
} from 'lucide-react';

const HelpSettingsDomains: React.FC = () => {
  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} />
        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-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
            <Globe size={24} className="text-indigo-600 dark:text-indigo-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Custom Domains Guide
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              Use your own domain for booking pages
            </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">
          <Globe 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">
            Custom Domains lets you use your own domain (like <code className="px-1 bg-gray-100 dark:bg-gray-700 rounded">booking.yourcompany.com</code>)
            for your booking pages. You can connect a domain you already own, or purchase a new one directly through the platform.
          </p>
          <div className="flex items-start gap-2 p-3 bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg">
            <Lock size={18} className="text-indigo-600 dark:text-indigo-400 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-indigo-800 dark:text-indigo-200">
              Custom domains require a plan with the <strong>custom_domain</strong> feature. Only the
              business owner can manage custom domains.
            </p>
          </div>
        </div>
      </section>

      {/* Bring Your Own Domain */}
      <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" />
          Bring 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">
            Connect a domain you already own by following these steps:
          </p>

          <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">Add Your Domain</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Enter your domain in the input field (e.g., <code className="px-1 bg-gray-100 dark:bg-gray-700 rounded">booking.yourdomain.com</code>)
                  and click <strong>Add</strong>.
                </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">Add DNS TXT Record</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                  Your domain will show as <strong>Pending</strong> with DNS instructions. Add the TXT record
                  to your DNS provider:
                </p>
                <div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg text-sm">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-amber-700 dark:text-amber-300 font-medium">Name:</span>
                    <code className="px-1 bg-white dark:bg-gray-800 rounded text-gray-900 dark:text-white">
                      _smoothschedule-verify
                    </code>
                    <Copy size={12} className="text-amber-600 cursor-pointer" />
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-amber-700 dark:text-amber-300 font-medium">Value:</span>
                    <code className="px-1 bg-white dark:bg-gray-800 rounded text-gray-900 dark:text-white">
                      verify=abc123...
                    </code>
                    <Copy size={12} className="text-amber-600 cursor-pointer" />
                  </div>
                </div>
              </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">Verify Domain</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click the <RefreshCw size={14} className="inline text-brand-500" /> verify button.
                  Once verified, the status changes to <strong>Verified</strong>.
                </p>
              </div>
            </li>
          </ol>

          <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
            <p className="text-sm text-gray-600 dark:text-gray-300">
              <AlertCircle size={14} className="inline text-amber-500 mr-1" />
              DNS changes can take up to 48 hours to propagate worldwide.
            </p>
          </div>
        </div>
      </section>

      {/* Managing Domains */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Settings size={20} className="text-brand-500" />
          Managing Your Domains
        </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 domain list shows all connected domains with their status and actions:
          </p>

          <div className="space-y-4">
            {/* Domain Status */}
            <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">Domain Status</h4>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-2">
                <li className="flex items-center gap-2">
                  <span className="px-2 py-0.5 text-xs bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 rounded">
                    Verified
                  </span>
                  <span>Domain ownership confirmed, ready to use</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="px-2 py-0.5 text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 rounded">
                    Pending
                  </span>
                  <span>Waiting for DNS verification</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="px-2 py-0.5 text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300 rounded flex items-center gap-1">
                    <Star size={10} className="fill-current" /> Primary
                  </span>
                  <span>The main domain used for your booking pages</span>
                </li>
              </ul>
            </div>

            {/* Actions */}
            <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">Available Actions</h4>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-2">
                <li className="flex items-center gap-2">
                  <RefreshCw size={16} className="text-brand-500" />
                  <span><strong>Verify</strong> - Check DNS configuration and verify ownership</span>
                </li>
                <li className="flex items-center gap-2">
                  <Star size={16} className="text-indigo-500" />
                  <span><strong>Set Primary</strong> - Make this your main booking domain</span>
                </li>
                <li className="flex items-center gap-2">
                  <Trash2 size={16} className="text-red-500" />
                  <span><strong>Delete</strong> - Remove domain from your account</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Domain Purchase */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <ShoppingCart size={20} className="text-brand-500" />
          Purchase a 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">
            Don't have a domain? You can search for and register a new domain directly from this page.
          </p>

          <div className="space-y-4">
            <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
              <h4 className="font-medium text-green-800 dark:text-green-200 mb-2">
                How Domain Purchase Works
              </h4>
              <ol className="text-sm text-green-700 dark:text-green-300 space-y-1 list-decimal list-inside">
                <li>Enter the domain name you want to register</li>
                <li>See availability and pricing</li>
                <li>Complete payment to register the domain</li>
                <li>Domain is automatically connected to your account</li>
              </ol>
            </div>

            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Purchased domains are registered in your name and include automatic SSL certificates.
                Domain pricing varies by extension (.com, .net, etc.).
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Step by Step */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
          Step-by-Step: Connect Your Domain
        </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>
              <span className="text-gray-700 dark:text-gray-300">
                Go to <strong>Settings &gt; Custom Domains</strong>
              </span>
            </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>
              <span className="text-gray-700 dark:text-gray-300">
                In the <strong>Bring Your Own Domain</strong> section, enter your domain
              </span>
            </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>
              <span className="text-gray-700 dark:text-gray-300">
                Click <strong>Add</strong> to add the domain
              </span>
            </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>
              <span className="text-gray-700 dark:text-gray-300">
                Copy the <strong>DNS TXT record</strong> details shown
              </span>
            </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>
              <span className="text-gray-700 dark:text-gray-300">
                Log into your domain registrar and add the <strong>TXT record</strong>
              </span>
            </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">
                6
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Wait for DNS propagation (usually a few minutes, up to 48 hours)
              </span>
            </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">
                7
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Click the <RefreshCw size={14} className="inline" /> <strong>Verify</strong> button
              </span>
            </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">
                8
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Once verified, click <Star size={14} className="inline" /> to <strong>Set as Primary</strong> if desired
              </span>
            </li>
          </ol>
        </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">
                Use a subdomain like <code className="px-1 bg-white/50 dark:bg-gray-800/50 rounded">booking.yourcompany.com</code>
                rather than your main domain
              </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">
                If verification fails, double-check the TXT record name and value match exactly
              </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 an online DNS lookup tool to check if your TXT record is published
              </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">
                Set your most important domain as <strong>Primary</strong> - it will be used in booking links
              </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">
                You can connect multiple domains and switch between them as needed
              </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/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"
          >
            <Settings 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/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"
          >
            <Globe 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>
        </div>
      </section>

      {/* Need 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">
          Our support team is ready to help with domain configuration.
        </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 HelpSettingsDomains;
