/**
 * Help Settings Authentication Page
 *
 * Documentation for configuring OAuth providers and social login for customers.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  Lock,
  Users,
  Key,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  Save,
  Eye,
  EyeOff,
  AlertCircle,
  Check,
} from 'lucide-react';

const HelpSettingsAuth: 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-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
            <Lock size={24} className="text-purple-600 dark:text-purple-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Authentication Settings Guide
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              Configure social login for customers
            </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">
          <Lock 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">
            Authentication Settings allows you to configure how customers can sign in to your booking
            system. Enable social login providers like Google, Apple, and Facebook to make it easier
            for customers to create accounts and book appointments.
          </p>
          <div className="flex items-start gap-2 p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
            <Lock size={18} className="text-purple-600 dark:text-purple-400 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-purple-800 dark:text-purple-200">
              OAuth settings require a plan with the <strong>custom_oauth</strong> feature. Only the
              business owner can configure authentication settings.
            </p>
          </div>
        </div>
      </section>

      {/* Social Login */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Users size={20} className="text-brand-500" />
          Social Login Providers
        </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">
            Enable or disable social login providers that customers can use to sign in. Click on a
            provider to toggle it on or off.
          </p>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
              <span className="text-2xl">&#128269;</span>
              <p className="text-sm font-medium text-gray-900 dark:text-white mt-1">Google</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
              <span className="text-2xl">&#127822;</span>
              <p className="text-sm font-medium text-gray-900 dark:text-white mt-1">Apple</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
              <span className="text-2xl">&#128216;</span>
              <p className="text-sm font-medium text-gray-900 dark:text-white mt-1">Facebook</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
              <span className="text-2xl">&#128188;</span>
              <p className="text-sm font-medium text-gray-900 dark:text-white mt-1">LinkedIn</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
              <span className="text-2xl">&#129703;</span>
              <p className="text-sm font-medium text-gray-900 dark:text-white mt-1">Microsoft</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
              <span className="text-2xl">&#128038;</span>
              <p className="text-sm font-medium text-gray-900 dark:text-white mt-1">X (Twitter)</p>
            </div>
            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
              <span className="text-2xl">&#127918;</span>
              <p className="text-sm font-medium text-gray-900 dark:text-white mt-1">Twitch</p>
            </div>
          </div>

          <div className="flex items-start gap-2 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
            <Check size={18} className="text-brand-500 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-gray-600 dark:text-gray-300">
              Enabled providers show a checkmark badge. Click <strong>Save</strong> after making changes.
            </p>
          </div>
        </div>
      </section>

      {/* OAuth Settings */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Key size={20} className="text-brand-500" />
          OAuth Settings
        </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">
            Configure additional options for OAuth authentication:
          </p>

          <div className="space-y-4">
            {/* Allow Registration */}
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white">Allow OAuth Registration</h4>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    When enabled, new customers can create accounts using OAuth providers. When disabled,
                    only existing customers can sign in via OAuth.
                  </p>
                </div>
              </div>
            </div>

            {/* Auto-link by Email */}
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white">Auto-link by Email</h4>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    When enabled, if a customer signs in with OAuth and their email matches an existing
                    account, the accounts are automatically linked. This lets customers sign in with
                    multiple methods.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-4 flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
            <Save size={18} className="text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-blue-800 dark:text-blue-200">
              Click the <strong>Save</strong> button to apply your changes.
            </p>
          </div>
        </div>
      </section>

      {/* Custom OAuth Credentials */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Key size={20} className="text-brand-500" />
          Custom OAuth Credentials
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="flex items-start gap-2 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg mb-4">
            <AlertCircle size={18} className="text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-amber-800 dark:text-amber-200">
              This section only appears if your platform administrator has granted permission to
              manage OAuth credentials.
            </p>
          </div>

          <p className="text-gray-600 dark:text-gray-300 mb-4">
            By default, your business uses the platform's shared OAuth credentials. If you want
            complete branding control, you can use your own OAuth app credentials.
          </p>

          <div className="space-y-4">
            {/* Toggle Custom Credentials */}
            <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">Use Custom Credentials</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Toggle this on to use your own OAuth credentials instead of the platform's shared
                credentials. When using custom credentials, the OAuth consent screen will show your
                app name and branding.
              </p>
            </div>

            {/* Provider Credentials */}
            <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">Provider Credentials</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                Expand each provider to enter your credentials:
              </p>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-2 ml-4 list-disc">
                <li><strong>Client ID</strong> - Your OAuth app's client identifier</li>
                <li><strong>Client Secret</strong> - Your OAuth app's secret key</li>
              </ul>
            </div>

            {/* Provider-specific Fields */}
            <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">Provider-Specific Fields</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                Some providers require additional information:
              </p>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-2 ml-4 list-disc">
                <li><strong>Apple</strong> - Team ID and Key ID</li>
                <li><strong>Microsoft</strong> - Tenant ID (or "common" for multi-tenant)</li>
              </ul>
            </div>
          </div>

          <div className="mt-4 flex items-start gap-2 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
            <Eye size={18} className="text-gray-500 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-gray-600 dark:text-gray-300">
              Client secrets are hidden by default. Click the <EyeOff size={14} className="inline" /> icon
              to reveal them.
            </p>
          </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: Enable Social Login
        </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; Authentication</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>Social Login</strong> section, click on the providers you want to enable
              </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">
                Configure <strong>Allow OAuth Registration</strong> if you want new customers to sign up
              </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">
                Enable <strong>Auto-link by Email</strong> to let customers use multiple sign-in methods
              </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">
                Click <strong>Save</strong> to apply your changes
              </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">
                Enable Google and Apple at minimum - these are the most popular sign-in methods
              </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">
                Keep <strong>Auto-link by Email</strong> enabled to prevent duplicate accounts
              </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">
                Only enable <strong>Allow OAuth Registration</strong> if you want new customers to create
                accounts via OAuth
              </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">
                Custom OAuth credentials are recommended for businesses that want their own branding
                on the sign-in consent screen
              </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/customers"
            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"
          >
            <Users size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Customers Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/settings/api"
            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"
          >
            <Key size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">API 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 authentication 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 HelpSettingsAuth;
