/**
 * Help Settings API Page
 *
 * Documentation for managing API tokens for third-party integrations.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  Key,
  Shield,
  Plus,
  Copy,
  Trash2,
  Clock,
  Eye,
  EyeOff,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  AlertTriangle,
  Lock,
  Settings,
} from 'lucide-react';

const HelpSettingsApi: 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-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
            <Key size={24} className="text-amber-600 dark:text-amber-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              API Settings Guide
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              Manage API tokens for integrations
            </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">
          <Key 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">
            API Settings allows you to create and manage API tokens for integrating your scheduling
            system with external applications. These tokens provide secure, controlled access to your
            business data through our REST API.
          </p>
          <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">
            <Lock 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">
              API access requires a plan with the <strong>api_access</strong> feature. Only the business
              owner can manage API tokens.
            </p>
          </div>
        </div>
      </section>

      {/* Creating API Tokens */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Plus size={20} className="text-brand-500" />
          Creating API Tokens
        </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">
            Click the <strong>New Token</strong> button to create a new API token. You'll need to configure:
          </p>

          <div className="space-y-4">
            {/* Token Name */}
            <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">Token Name</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Give your token a descriptive name to identify its purpose, like "Website Integration"
                or "Mobile App".
              </p>
            </div>

            {/* Permission Presets */}
            <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">Permission Presets</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                Choose from predefined permission sets:
              </p>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                <li className="flex items-start gap-2">
                  <Eye size={14} className="text-blue-500 mt-1 flex-shrink-0" />
                  <span><strong>Read Only</strong> - Can only view data, no modifications</span>
                </li>
                <li className="flex items-start gap-2">
                  <Shield size={14} className="text-green-500 mt-1 flex-shrink-0" />
                  <span><strong>Full Access</strong> - Complete read and write access</span>
                </li>
                <li className="flex items-start gap-2">
                  <Settings size={14} className="text-purple-500 mt-1 flex-shrink-0" />
                  <span><strong>Custom</strong> - Select individual permissions</span>
                </li>
              </ul>
            </div>

            {/* Individual Permissions */}
            <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">Individual Permissions</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Expand "Show individual permissions" for granular control over what the token can access:
                appointments, customers, services, resources, and more.
              </p>
            </div>

            {/* Expiration */}
            <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 flex items-center gap-2">
                <Clock size={16} className="text-orange-500" />
                Expiration
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
                Set when the token should expire:
              </p>
              <ul className="text-sm text-gray-600 dark:text-gray-300 grid grid-cols-2 gap-2">
                <li>Never expires</li>
                <li>7 days</li>
                <li>30 days</li>
                <li>90 days</li>
                <li>1 year</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Token Security */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <AlertTriangle size={20} className="text-brand-500" />
          Token Security
        </h2>
        <div className="bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-yellow-900/20 dark:to-orange-900/20 rounded-xl border border-yellow-200 dark:border-yellow-800 p-6">
          <div className="flex items-start gap-3 mb-4">
            <AlertTriangle size={24} className="text-yellow-600 dark:text-yellow-400 flex-shrink-0" />
            <div>
              <h4 className="font-medium text-yellow-800 dark:text-yellow-200 mb-1">
                Important: Copy Your Token Immediately
              </h4>
              <p className="text-sm text-yellow-700 dark:text-yellow-300">
                When a token is created, you'll see the full token <strong>only once</strong>. Copy it
                immediately and store it securely. You will not be able to view it again.
              </p>
            </div>
          </div>
          <div className="space-y-2 text-sm text-yellow-800 dark:text-yellow-200">
            <p className="flex items-center gap-2">
              <Copy size={14} className="flex-shrink-0" />
              Use the Copy button to copy the token to your clipboard
            </p>
            <p className="flex items-center gap-2">
              <EyeOff size={14} className="flex-shrink-0" />
              Toggle visibility with the eye icon to verify the token
            </p>
          </div>
        </div>
      </section>

      {/* Managing Tokens */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Shield size={20} className="text-brand-500" />
          Managing Existing Tokens
        </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 tokens are organized into <strong>Active Tokens</strong> and <strong>Revoked Tokens</strong>.
            Click on any token to expand and view its details.
          </p>

          <div className="space-y-4">
            {/* Token Information */}
            <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">Token Information</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
                Each token displays:
              </p>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1 ml-4 list-disc">
                <li>Token name and status (Active, Expired, or Revoked)</li>
                <li>Key prefix (first few characters of the token)</li>
                <li>Created date and who created it</li>
                <li>Last used date</li>
                <li>Expiration date</li>
                <li>Assigned permissions</li>
              </ul>
            </div>

            {/* Revoking Tokens */}
            <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
              <h4 className="font-medium text-red-800 dark:text-red-200 mb-2 flex items-center gap-2">
                <Trash2 size={16} />
                Revoking Tokens
              </h4>
              <p className="text-sm text-red-700 dark:text-red-300 mb-2">
                Click the trash icon to revoke a token. This action:
              </p>
              <ul className="text-sm text-red-700 dark:text-red-300 space-y-1 ml-4 list-disc">
                <li><strong>Cannot be undone</strong></li>
                <li>Immediately disables API access for that token</li>
                <li>Any applications using the token will lose access instantly</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* 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" />
          Best Practices
        </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">
                <strong>One token per integration</strong> - Create separate tokens for each application
                or service that needs API access
              </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">
                <strong>Minimum permissions</strong> - Grant only the permissions each integration needs
              </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">
                <strong>Set expiration dates</strong> - Use expiring tokens for temporary integrations
              </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">
                <strong>Never share tokens publicly</strong> - Don't commit tokens to version control
                or share them in public channels
              </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">
                <strong>Rotate tokens regularly</strong> - Create new tokens and revoke old ones periodically
              </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">
                <strong>Monitor last used dates</strong> - Revoke tokens that haven't been used recently
              </span>
            </li>
          </ul>
        </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: Create an API Token
        </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; API Settings</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">
                Click the <strong>New Token</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">
                3
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Enter a descriptive <strong>Token Name</strong> (e.g., "Website Booking Integration")
              </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">
                Select a <strong>Permission Preset</strong> or customize individual permissions
              </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">
                Choose an <strong>Expiration</strong> period if desired
              </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">
                Click <strong>Create Token</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">
                7
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Immediately copy the token</strong> and store it securely - you won't see it again!
              </span>
            </li>
          </ol>
        </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/auth"
            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"
          >
            <Shield size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Authentication Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/plugins"
            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">Plugins Guide</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 API integration questions.
        </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 HelpSettingsApi;
