'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { ChevronDown, ChevronRight, FileText, Home } from 'lucide-react';

const DocPage = () => {
  const [expandedSections, setExpandedSections] = useState<{ [key: string]: boolean }>({
    overview: true,
    operations: true,
    masterdata: false,
    financial: false,
    services: false,
    security: false,
    analytics: false,
    system: false,
    enhanced: false,
  });

  const toggleSection = (section: string) => {
    setExpandedSections(prev => (({
      ...prev,
      [section]: !prev[section]
    })));
  };

  const scrollToSection = (id: string) => {
    setTimeout(() => {
      const element = document.getElementById(id);
      if (element) {
        const headerOffset = 120;
        const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
        const offsetPosition = elementPosition - headerOffset;
        window.scrollTo({
          top: offsetPosition,
          behavior: 'smooth'
        });
      }
    }, 0);
  };

  const sections = [
    {
      id: 'overview',
      title: '📋 Overview & Getting Started',
      items: [
        { id: 'about', label: 'Application Overview' },
        { id: 'features', label: 'Key Features' },
      ]
    },
    {
      id: 'operations',
      title: '📊 Operations',
      items: [
        { id: 'bookings', label: 'Bookings' },
        { id: 'bookings-how', label: '→ How-To' },
        { id: 'passengers', label: 'Passengers' },
        { id: 'passengers-how', label: '→ How-To' },
        { id: 'tickets', label: 'Tickets' },
        { id: 'tickets-how', label: '→ How-To' },
      ]
    },
    {
      id: 'masterdata',
      title: '🏢 Master Data',
      items: [
        { id: 'stations', label: 'Stations' },
        { id: 'stations-how', label: '→ How-To' },
        { id: 'trains', label: 'Trains' },
        { id: 'trains-how', label: '→ How-To' },
        { id: 'coaches', label: 'Coaches' },
        { id: 'coaches-how', label: '→ How-To' },
        { id: 'seats', label: 'Seats' },
        { id: 'seats-how', label: '→ How-To' },
        { id: 'classes', label: 'Seat Classes' },
        { id: 'classes-how', label: '→ How-To' },
        { id: 'routes', label: 'Routes' },
        { id: 'routes-how', label: '→ How-To' },
        { id: 'schedules', label: 'Schedules' },
        { id: 'schedules-how', label: '→ How-To' },
      ]
    },
    {
      id: 'financial',
      title: '💰 Financial',
      items: [
        { id: 'pricing', label: 'Pricing & Fares' },
        { id: 'pricing-how', label: '→ How-To' },
        { id: 'currencies', label: 'Currencies' },
        { id: 'currencies-how', label: '→ How-To' },
        { id: 'payments', label: 'Payments' },
        { id: 'payments-how', label: '→ How-To' },
        { id: 'promos', label: 'Promo Codes' },
        { id: 'promos-how', label: '→ How-To' },
      ]
    },
    {
      id: 'services',
      title: '🎁 Customer Services',
      items: [
        { id: 'loyalty', label: 'Loyalty' },
        { id: 'loyalty-how', label: '→ How-To' },
        { id: 'support', label: 'Support' },
        { id: 'support-how', label: '→ How-To' },
        { id: 'notifications', label: 'Notifications' },
        { id: 'notifications-how', label: '→ How-To' },
      ]
    },
    {
      id: 'security',
      title: '🔒 Security',
      items: [
        { id: 'audit', label: 'Audit Logs' },
        { id: 'audit-how', label: '→ How-To' },
        { id: 'fraud', label: 'Fraud Detection' },
        { id: 'fraud-how', label: '→ How-To' },
        { id: 'verifayda', label: 'Verifayda' },
        { id: 'verifayda-how', label: '→ How-To' },
      ]
    },
    {
      id: 'analytics',
      title: '📈 Analytics',
      items: [
        { id: 'reports', label: 'Reports' },
        { id: 'reports-how', label: '→ How-To' },
      ]
    },
    {
      id: 'system',
      title: '⚙️ System',
      items: [
        { id: 'agents', label: 'Agents' },
        { id: 'agents-how', label: '→ How-To' },
        { id: 'users', label: 'Users' },
        { id: 'users-how', label: '→ How-To' },
        { id: 'system-config', label: 'System Config' },
        { id: 'system-config-how', label: '→ How-To' },
        { id: 'settings', label: 'Settings' },
        { id: 'settings-how', label: '→ How-To' },
      ]
    },
    {
      id: 'enhanced',
      title: '✨ Enhanced Features',
      items: [
        { id: 'excess-baggage', label: 'Excess Baggage' },
        { id: 'excess-baggage-how', label: '→ How-To' },
        { id: 'packages', label: 'Travel Packages' },
        { id: 'packages-how', label: '→ How-To' },
        { id: 'package-inquiries', label: 'Package Inquiries' },
        { id: 'package-inquiries-how', label: '→ How-To' },
        { id: 'health', label: 'Health Monitoring' },
        { id: 'health-how', label: '→ How-To' },
        { id: 'boarding', label: 'Boarding Management' },
        { id: 'boarding-how', label: '→ How-To' },
        { id: 'fare-config', label: 'Advanced Fare Config' },
        { id: 'fare-config-how', label: '→ How-To' },
        { id: 'payment-methods', label: 'Payment Methods' },
        { id: 'payment-methods-how', label: '→ How-To' },
      ]
    },
  ];

  const HowToStep = ({ number, title, children }: { number: number; title: string; children: React.ReactNode }) => (
    <div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800">
      <div className="flex items-start gap-4">
        <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold flex-shrink-0">{number}</div>
        <div className="flex-1">
          <h4 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">{title}</h4>
          {children}
        </div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <FileText className="h-8 w-8 text-emerald-600" />
            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">Documentation</h1>
          </div>
          <div className="flex items-center gap-2">
            <a href="http://localhost:4000/api-docs" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition" title="Opens API documentation in new tab">
              <FileText className="h-4 w-4" />
              View API Docs
            </a>
            <Link href="/dashboard" target="_blank" className="flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 transition">
              <Home className="h-4 w-4" />
              Dashboard
            </Link>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          <div className="lg:col-span-1">
            <div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 sticky top-24 h-fit">
              <nav>
                {sections.map(section => (
                  <div key={section.id}>
                    <button onClick={() => toggleSection(section.id)} className="w-full flex items-center justify-between px-4 py-3 text-sm font-medium text-slate-900 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-700 border-b border-slate-100 dark:border-slate-700">
                      <span>{section.title}</span>
                      {expandedSections[section.id] ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                    </button>
                    {expandedSections[section.id] && (
                      <div className="bg-slate-50 dark:bg-slate-700/50">
                        {section.items.map(item => (
                          <button key={item.id} onClick={() => scrollToSection(item.id)} className="w-full text-left px-6 py-2 text-sm text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-white dark:hover:bg-slate-700 transition">
                            {item.label}
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </nav>
            </div>
          </div>

          <div className="lg:col-span-3">
            <div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-8 space-y-12">
              
              <div id="about">
                <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Welcome to EDR Passenger Backoffice</h2>
                <p className="text-slate-600 dark:text-slate-300 mb-4">Comprehensive management system for the Ethio-Djibouti Railway passenger platform. This documentation provides complete guidance on all features, operations, and best practices.</p>
                <div className="bg-emerald-50 dark:bg-emerald-900/20 p-6 rounded-lg border border-emerald-200 dark:border-emerald-800">
                  <h3 className="text-lg font-semibold text-emerald-900 dark:text-emerald-100 mb-2">🎆 Version 1.0.0 - Complete Platform Release</h3>
                  <ul className="text-emerald-800 dark:text-emerald-200 space-y-1">
                    <li>• <strong>Excess Baggage:</strong> Complete baggage handling with agent tools and passenger self-pay</li>
                    <li>• <strong>Travel Packages:</strong> Bundled offerings with tiered pricing and inquiry management</li>
                    <li>• <strong>Health Monitoring:</strong> Comprehensive system status and performance tracking</li>
                    <li>• <strong>Boarding Management:</strong> Gate operations and passenger processing workflows</li>
                    <li>• <strong>Advanced Fare Config:</strong> Dynamic pricing with segment-based rules</li>
                    <li>• <strong>Payment Methods:</strong> Multi-provider payment configuration and management</li>
                  </ul>
                </div>
              </div>

              <div id="features" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🌟 Key Features</h2>
                <p className="text-slate-600 dark:text-slate-300">Complete booking, passenger, fleet, and financial management.</p>
              </div>

              {/* BOOKINGS */}
              <div id="bookings" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📋 Bookings</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage passenger bookings with search, view, modify, and refund capabilities.</p>
              </div>

              <div id="bookings-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📋 How-To: Manage Bookings</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Bookings">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Bookings" in Operations section</li>
                      <li>View all bookings in table format</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Search & Filter">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Use search box for reference, email, or phone</li>
                      <li>Use Status dropdown to filter</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Manage Bookings">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "View Details" for full information</li>
                      <li>Click "Cancel Booking" to process refunds</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              <div id="system-config" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">⚙️ System Config</h2>
                <p className="text-slate-600 dark:text-slate-300">Centralized system configuration management with feature flags and operational controls.</p>
              </div>

              <div id="system-config-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">⚙️ How-To: Manage System Configuration</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access System Config">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "System Config" in System section</li>
                      <li>View all configuration categories</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Rate Limiting">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Adjust auth endpoints limit (default: 5 req/min)</li>
                      <li>Set strict endpoints limit (default: 20 req/min)</li>
                      <li>Configure default endpoints limit (default: 100 req/min)</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Seat Booking Settings">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Set seat hold duration (default: 5 minutes)</li>
                      <li>Configure hold cutoff before departure (default: 2 hours)</li>
                      <li>Click "Save Changes" to apply</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* EXCESS BAGGAGE */}
              <div id="excess-baggage" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📦 Excess Baggage</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage excess baggage charges at boarding with agent tools and passenger self-pay options.</p>
              </div>

              <div id="excess-baggage-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📦 How-To: Handle Excess Baggage</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Excess Baggage">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Excess Baggage" in Enhanced Features</li>
                      <li>View all baggage charges and their status</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Search & Filter">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Search by booking reference</li>
                      <li>Filter by status: PENDING, PAID, CASH_COLLECTED, EXPIRED, WAIVED</li>
                      <li>Use date filters for specific periods</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Manage Charges">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>"Resend Link" for pending charges to passenger</li>
                      <li>"Waive" charges with reason (supervisor authority)</li>
                      <li>"Delete" expired or waived charges</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* TRAVEL PACKAGES */}
              <div id="packages" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🎒 Travel Packages</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage pilgrimage and group travel packages with tiered pricing and capacity management.</p>
              </div>

              <div id="packages-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎒 How-To: Manage Travel Packages</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Create Package">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "New Package" button</li>
                      <li>Fill package details: code, name, stations, schedules</li>
                      <li>Set capacity, validity period, and included services</li>
                      <li>Save package (starts in DRAFT status)</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Configure Price Tiers">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Tiers" on package to manage pricing</li>
                      <li>Add tiers: seat type, label, price, capacity</li>
                      <li>Edit existing tiers (limited if bookings exist)</li>
                      <li>Delete unused tiers</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Activate & Manage">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>"Activate" draft packages to make bookable</li>
                      <li>"Deactivate" active packages to stop new bookings</li>
                      <li>"Delete" packages with no bookings if needed</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* PACKAGE INQUIRIES */}
              <div id="package-inquiries" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📝 Package Inquiries</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage incoming package booking inquiries and track lead conversion.</p>
              </div>

              <div id="package-inquiries-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📝 How-To: Handle Package Inquiries</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Inquiries">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Package Inquiries" in Enhanced Features</li>
                      <li>Filter by package or inquiry status</li>
                      <li>View contact details, package interest, traveler count</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Update Status">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Use status dropdown: NEW → CONTACTED → CONVERTED/CLOSED</li>
                      <li>Mark as CONTACTED after first customer contact</li>
                      <li>Mark as CONVERTED when inquiry becomes booking</li>
                      <li>Mark as CLOSED if customer not interested</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Lead Management">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Respond to NEW inquiries within 24 hours</li>
                      <li>Follow up on CONTACTED inquiries regularly</li>
                      <li>Delete spam or duplicate inquiries as needed</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* HEALTH MONITORING */}
              <div id="health" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🏥 Health Monitoring</h2>
                <p className="text-slate-600 dark:text-slate-300">Monitor EDR Passenger API health with real-time system status and performance metrics.</p>
              </div>

              <div id="health-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏥 How-To: Monitor System Health</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Health Dashboard">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Health Monitoring" in Enhanced Features</li>
                      <li>View overall system status banner</li>
                      <li>Check individual probe cards (auto-refreshing)</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Interpret Health Checks">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Liveness: API process alive (30s refresh)</li>
                      <li>Readiness: Database connectivity + latency (30s refresh)</li>
                      <li>App Info: Version, uptime, environment (60s refresh)</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Troubleshoot Issues">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Red status: Check error details and system logs</li>
                      <li>High DB latency: Monitor database performance</li>
                      <li>Failed checks: Verify API server and connections</li>
                      <li>Use "Refresh" button for manual status update</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* BOARDING MANAGEMENT */}
              <div id="boarding" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🚆 Boarding Management</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage gate operations and passenger boarding processes with real-time tracking.</p>
              </div>

              <div id="boarding-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚆 How-To: Manage Boarding Operations</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Boarding Management">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Boarding" in Enhanced Features</li>
                      <li>Select active trip/schedule for boarding</li>
                      <li>View real-time boarding dashboard</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Monitor Boarding Process">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Track total passengers expected vs boarded</li>
                      <li>Monitor boarding progress percentage</li>
                      <li>View gate status and any alerts</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Handle Boarding Operations">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Validate passenger tickets and documents</li>
                      <li>Resolve seat conflicts or issues</li>
                      <li>Process last-minute passengers and no-shows</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* ADVANCED FARE CONFIG */}
              <div id="fare-config" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📊 Advanced Fare Config</h2>
                <p className="text-slate-600 dark:text-slate-300">Configure complex fare rules and dynamic pricing strategies with segment-based pricing.</p>
              </div>

              <div id="fare-config-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📊 How-To: Configure Advanced Fares</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Fare Configuration">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Advanced Fare Config" in Enhanced Features</li>
                      <li>Choose between Schedule Fares or Segment Fares</li>
                      <li>View existing fare rules and calculations</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Create Fare Rules">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Set fare amounts for specific schedules or segments</li>
                      <li>Define passenger categories (ADULT/CHILD) and nationalities</li>
                      <li>Configure validity periods and seasonal adjustments</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Manage Dynamic Pricing">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Apply route segment-specific pricing</li>
                      <li>Set nationality-based rate variations</li>
                      <li>Monitor fare engine integration and real-time calculations</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* PAYMENT METHODS */}
              <div id="payment-methods" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">💳 Payment Methods</h2>
                <p className="text-slate-600 dark:text-slate-300">Configure and manage payment provider integrations with multi-provider support.</p>
              </div>

              <div id="payment-methods-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💳 How-To: Configure Payment Methods</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Payment Configuration">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Payment Methods" in Enhanced Features</li>
                      <li>View all configured payment providers</li>
                      <li>Check provider status and connectivity</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Configure Providers">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Set up API credentials (URLs, keys, merchant IDs)</li>
                      <li>Configure transaction fees and limits</li>
                      <li>Enable/disable specific payment methods</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Test & Validate">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Run test transactions for each provider</li>
                      <li>Validate webhook endpoints and security</li>
                      <li>Monitor API connectivity and error logs</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div className="mt-12 bg-slate-900 text-white py-8">
        <div className="max-w-7xl mx-auto px-4 text-center text-slate-400">
          <p>© 2026 Ethio-Djibouti Railway | Passenger Backoffice Documentation v1.0.0</p>
        </div>
      </div>
    </div>
  );
};

export default DocPage;