'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { ChevronDown, ChevronRight, FileText, Home } from 'lucide-react';
import { navSections } from './sections/_shared';
import OverviewSection from './sections/OverviewSection';
import OperationsSection from './sections/OperationsSection';
import TourismSection from './sections/TourismSection';
import MasterDataSection from './sections/MasterDataSection';
import FinancialSection from './sections/FinancialSection';
import CustomerServicesSection from './sections/CustomerServicesSection';
import SecuritySection from './sections/SecuritySection';
import AnalyticsSection from './sections/AnalyticsSection';
import SystemSection from './sections/SystemSection';

export default function DocPage() {
  const [expanded, setExpanded] = useState<Record<string, boolean>>({
    overview: true, operations: true, tourism: false, masterdata: false,
    financial: false, services: false, security: false, analytics: false, system: false,
  });

  const toggle = (id: string) => setExpanded(prev => ({ ...prev, [id]: !prev[id] }));

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

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      {/* Top bar */}
      <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-7 w-7 text-emerald-600" />
            <h1 className="text-xl 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-3 py-2 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700 transition">
              <FileText className="h-4 w-4" /> API Docs
            </a>
            <Link href="/dashboard" className="flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-600 text-white text-sm 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">

          {/* Sidebar nav */}
          <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 max-h-[calc(100vh-7rem)] overflow-y-auto">
              <nav>
                {navSections.map(section => (
                  <div key={section.id}>
                    <button
                      onClick={() => toggle(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>
                      {expanded[section.id] ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                    </button>
                    {expanded[section.id] && (
                      <div className="bg-slate-50 dark:bg-slate-700/50">
                        {section.items.map(item => (
                          <button key={item.id} onClick={() => scrollTo(item.id)}
                            className="w-full text-left px-6 py-1.5 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>

          {/* Content */}
          <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-2">
              <OverviewSection />
              <OperationsSection />
              <TourismSection />
              <MasterDataSection />
              <FinancialSection />
              <CustomerServicesSection />
              <SecuritySection />
              <AnalyticsSection />
              <SystemSection />
            </div>
          </div>

        </div>
      </div>

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