'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,
  });

  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: 'settings', label: 'Settings' },
        { id: 'settings-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">Comprehensive management system for the Ethio-Djibouti Railway passenger platform. This documentation provides complete guidance on all features, operations, and best practices.</p>
              </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>

              {/* PASSENGERS */}
              <div id="passengers" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">👥 Passengers</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage passenger profiles, loyalty, and verification status.</p>
              </div>

              <div id="passengers-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">👥 How-To: Manage Passengers</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Passengers">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click {`"Passengers"`} in Operations</li>
                      <li>View all profiles with pagination</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 name, email, phone, ID</li>
                      <li>Filter by nationality, verification, loyalty tier</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="View Profile">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click passenger row to open modal</li>
                      <li>View account, loyalty, wallet, booking history</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* TICKETS */}
              <div id="tickets" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🎫 Tickets</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage ticket generation, tracking, and validation.</p>
              </div>

              <div id="tickets-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎫 How-To: Manage Tickets</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Tickets">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click {`"Tickets"`} in Operations</li>
                      <li>View all issued tickets with status</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Search Tickets">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Search by booking reference or ticket number</li>
                      <li>Filter by validation status</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Download PDF">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click ticket to view details</li>
                      <li>Click {`"Download PDF"`} for printable version</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* STATIONS */}
              <div id="stations" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🏢 Stations</h2>
                <p className="text-slate-600 dark:text-slate-300">Configure railway stations with locations and timezones.</p>
              </div>

              <div id="stations-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏢 How-To: Manage Stations</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Stations">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click {`"Stations"`} in Master Data</li>
                      <li>View all configured stations</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Create Station">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click {`"Add Station"`}</li>
                      <li>Enter code, name, city, timezone, coordinates</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Edit Station">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click station to open details</li>
                      <li>Update information and save</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* TRAINS */}
              <div id="trains" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🚂 Trains</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage train fleet with coach assignments.</p>
              </div>

              <div id="trains-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚂 How-To: Manage Trains</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Trains">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click {`"Trains"`} in Master Data</li>
                      <li>View all trains and coaches</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Create Train">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click {`"Add Train"`}</li>
                      <li>Enter code and select coaches</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Assign Coaches">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click train to edit</li>
                      <li>Add/remove coaches with position numbers</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* COACHES */}
              <div id="coaches" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🚃 Coaches</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage coach inventory with seat configurations.</p>
              </div>

              <div id="coaches-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚃 How-To: Manage Coaches</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Coaches">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Coaches" in Master Data</li>
                      <li>View all coaches and assignments</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Create Coach">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Add Coach"</li>
                      <li>Enter code, select train, define seat layout</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Configure Seats">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click coach to edit</li>
                      <li>Add seats and assign classes</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* SEATS */}
              <div id="seats" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">💺 Seats</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage seat inventory with visual maps.</p>
              </div>

              <div id="seats-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💺 How-To: Manage Seats</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Seat Map">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Go to "Seats" in Master Data</li>
                      <li>Select coach from dropdown</li>
                      <li>Visual map shows: Green=Available, Red=Blocked</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Block Seat">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click available seat</li>
                      <li>Click "Block" and select reason</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Unblock Seat">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click blocked seat</li>
                      <li>Click "Unblock" to restore</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* SEAT CLASSES */}
              <div id="classes" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🎯 Seat Classes</h2>
                <p className="text-slate-600 dark:text-slate-300">Define seat class types with pricing.</p>
              </div>

              <div id="classes-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎯 How-To: Manage Seat Classes</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Classes">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Seat Classes" in Master Data</li>
                      <li>View all class types</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Create Class">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Add Class"</li>
                      <li>Enter name, base fare, premium, insurance</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Update Pricing">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click class to edit</li>
                      <li>Update fares and save</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* ROUTES */}
              <div id="routes" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🛤️ Routes</h2>
                <p className="text-slate-600 dark:text-slate-300">Define railway routes with ordered stops.</p>
              </div>

              <div id="routes-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🛤️ How-To: Manage Routes</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Routes">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Routes" in Master Data</li>
                      <li>View all routes and stops</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Create Route">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Add Route"</li>
                      <li>Enter code and description</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Add Stops">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click route to edit</li>
                      <li>Click "Add Stop" and select station</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* SCHEDULES */}
              <div id="schedules" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📅 Schedules</h2>
                <p className="text-slate-600 dark:text-slate-300">Create and manage train schedules.</p>
              </div>

              <div id="schedules-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📅 How-To: Create Schedules</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Create Single">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Go to "Schedules" in Master Data</li>
                      <li>Click "Create Schedule"</li>
                      <li>Fill train, route, departure/arrival times</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Bulk Generate">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Bulk Generate"</li>
                      <li>Set recurring parameters and generate</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Manage Status">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click schedule to edit</li>
                      <li>Update times and view fares</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* PRICING */}
              <div id="pricing" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">💰 Pricing & Fares</h2>
                <p className="text-slate-600 dark:text-slate-300">Configure dynamic pricing with segments.</p>
              </div>

              <div id="pricing-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💰 How-To: Configure Pricing</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Pricing">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Pricing & Fares" in Financial</li>
                      <li>Two tabs: Schedule Fares, Segment Fares</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Schedule Fares">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Add Fare Rule"</li>
                      <li>Fill schedule, seat class, fare, nationality</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Segment Fares">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Switch to "Segment Fares" tab</li>
                      <li>Select route and add origin/destination fare</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* CURRENCIES */}
              <div id="currencies" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">💵 Currencies</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage exchange rates for multiple currencies.</p>
              </div>

              <div id="currencies-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💵 How-To: Manage Currencies</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Rates">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Currencies" in Financial</li>
                      <li>View all configured rates</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Add Rate">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Add Rate"</li>
                      <li>Select currency and enter exchange rate</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Sync Rates">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click rate to edit</li>
                      <li>Click "Sync" to update from provider</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* PAYMENTS */}
              <div id="payments" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">💳 Payments</h2>
                <p className="text-slate-600 dark:text-slate-300">Monitor and process transactions.</p>
              </div>

              <div id="payments-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💳 How-To: Manage Payments</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Transactions">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Payments" in Financial</li>
                      <li>View all transactions</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 or transaction ID</li>
                      <li>Filter by status and payment method</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Process Refunds">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click transaction</li>
                      <li>Click "Refund" if eligible</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* PROMOS */}
              <div id="promos" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🎁 Promo Codes</h2>
                <p className="text-slate-600 dark:text-slate-300">Create and manage promotional campaigns.</p>
              </div>

              <div id="promos-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎁 How-To: Manage Promo Codes</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Promos">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Promo Codes" in Financial</li>
                      <li>View all active codes</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Create Code">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Add Promo Code"</li>
                      <li>Enter code, discount type, validity dates</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Track Usage">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click code to view analytics</li>
                      <li>View usage count and savings</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* LOYALTY */}
              <div id="loyalty" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🏆 Loyalty</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage loyalty program and rewards.</p>
              </div>

              <div id="loyalty-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏆 How-To: Manage Loyalty</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Accounts">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Loyalty Program" in Services</li>
                      <li>View all loyalty accounts</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Adjust Points">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click account</li>
                      <li>Click "Adjust Points" and enter amount</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Award Rewards">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click account</li>
                      <li>Click "Grant Reward" and select reward</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* SUPPORT */}
              <div id="support" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">💬 Support</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage support tickets and conversations.</p>
              </div>

              <div id="support-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💬 How-To: Manage Support</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Tickets">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Support Center" in Services</li>
                      <li>View all support tickets</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Manage Ticket">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click ticket to open conversation</li>
                      <li>Add replies and update status</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Manage FAQ">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Go to FAQ management</li>
                      <li>Add or edit FAQ articles</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* NOTIFICATIONS */}
              <div id="notifications" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🔔 Notifications</h2>
                <p className="text-slate-600 dark:text-slate-300">Send notifications via multiple channels.</p>
              </div>

              <div id="notifications-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🔔 How-To: Manage Notifications</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Notifications">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Notifications" in Services</li>
                      <li>View notification history</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Send Notification">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Send Notification"</li>
                      <li>Select channel and message</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Manage Templates">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Go to Templates section</li>
                      <li>Create or edit templates with variables</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* AUDIT */}
              <div id="audit" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📋 Audit Logs</h2>
                <p className="text-slate-600 dark:text-slate-300">Monitor system activities and user actions.</p>
              </div>

              <div id="audit-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📋 How-To: View Audit Logs</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Logs">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Audit Logs" in Security</li>
                      <li>View all recorded activities</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Filter Logs">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Filter by user, action, or date</li>
                      <li>Search by entity ID</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Export Logs">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click log entry for details</li>
                      <li>Click "Export" to download CSV</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* FRAUD */}
              <div id="fraud" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🛡️ Fraud Detection</h2>
                <p className="text-slate-600 dark:text-slate-300">Monitor and manage fraud alerts.</p>
              </div>

              <div id="fraud-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🛡️ How-To: Manage Fraud Detection</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Alerts">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Fraud Detection" in Security</li>
                      <li>View all fraud alerts</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Investigate">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click alert to view details</li>
                      <li>Review triggered rules and patterns</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Take Action">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Allow" or "Block" with notes</li>
                      <li>Update user status</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* VERIFAYDA */}
              <div id="verifayda" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">✅ Verifayda</h2>
                <p className="text-slate-600 dark:text-slate-300">Verify passenger identities against government database.</p>
              </div>

              <div id="verifayda-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">✅ How-To: Manage Verifayda</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Verification">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Verifayda Integration" in Security</li>
                      <li>View verification history</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Verify Passenger">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Enter national ID or passport number</li>
                      <li>Click "Verify" to check database</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Review Results">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>View verified passenger data</li>
                      <li>Match with booking details</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* REPORTS */}
              <div id="reports" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📊 Reports</h2>
                <p className="text-slate-600 dark:text-slate-300">Generate business analytics and reports.</p>
              </div>

              <div id="reports-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📊 How-To: Generate Reports</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Reports">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Reports" in Analytics</li>
                      <li>View available report types</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Generate Report">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click report type</li>
                      <li>Select date range and parameters</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Export Report">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>View report with charts</li>
                      <li>Click "Export" for PDF or CSV</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* AGENTS */}
              <div id="agents" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">👤 Agents</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage booking agents and commissions.</p>
              </div>

              <div id="agents-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">👤 How-To: Manage Agents</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Agents">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Agents" in System</li>
                      <li>View all agents</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Create Agent">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Add Agent"</li>
                      <li>Enter name, email, commission rate</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Create Shift">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click agent to edit</li>
                      <li>Click "Create Shift" to assign schedule</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* USERS */}
              <div id="users" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">👥 Users</h2>
                <p className="text-slate-600 dark:text-slate-300">Manage backoffice user accounts and permissions.</p>
              </div>

              <div id="users-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">👥 How-To: Manage Users</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="View Users">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Users" in System</li>
                      <li>View all user accounts</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Create User">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Add User"</li>
                      <li>Enter email, name, select role</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Manage Permissions">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click user to edit</li>
                      <li>Adjust roles and permissions</li>
                    </ol>
                  </HowToStep>
                </div>
              </div>

              {/* SETTINGS */}
              <div id="settings" className="border-t pt-8">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">⚙️ Settings</h2>
                <p className="text-slate-600 dark:text-slate-300">Configure system-wide settings and integrations.</p>
              </div>

              <div id="settings-how" className="border-t pt-8">
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">⚙️ How-To: Configure Settings</h3>
                <div className="space-y-4">
                  <HowToStep number={1} title="Access Settings">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Click "Settings" in System</li>
                      <li>View configuration options</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={2} title="Configure Email">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Go to Email tab</li>
                      <li>Enter SendGrid API key and email</li>
                    </ol>
                  </HowToStep>
                  <HowToStep number={3} title="Configure API Keys">
                    <ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
                      <li>Go to API tab</li>
                      <li>Add payment and Verifayda keys</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</p>
        </div>
      </div>
    </div>
  );
};

export default DocPage;
