import { useState, useEffect } from "react";
import SidebarNav from "./SidebarNav";
import GeneralSection from "./GeneralSection";
import DisplaySettingsSection from "./DisplaySettingsSection";
import ImageSourcesSection from "./ImageSourcesSection";
import ImageSizesSection from "./ImageSizesSection";
import ExportImportSection from "./ExportImportSection";
import SupportSection from "./SupportSection";

const SECTIONS = {
  general: GeneralSection,
  "display-settings": DisplaySettingsSection,
  "image-sources": ImageSourcesSection,
  "image-sizes": ImageSizesSection,
  "export-import": ExportImportSection,
  support: SupportSection,
};

// Get initial section from URL or default to "general"
const getInitialSection = () => {
  const params = new URLSearchParams(window.location.search);
  const section = params.get("section");
  return section && SECTIONS[section] ? section : "general";
};

export default function AdminDashboard() {
  const [activeSection, setActiveSection] = useState(getInitialSection);
  const SectionComponent = SECTIONS[activeSection] || GeneralSection;

  // Update URL when section changes
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    params.set("section", activeSection);
    const newUrl = `${window.location.pathname}?${params.toString()}`;
    window.history.pushState({ section: activeSection }, "", newUrl);
  }, [activeSection]);

  const config = typeof AI_IMAGE_AdminConfig !== "undefined" ? AI_IMAGE_AdminConfig : {};
  const version = config.version || "1.0.0";
  const supportUrl = config.support_url || "#";

  return (
    <div className="ai-image-admin-dashboard mt-5">
      <div className="max-w-[1200px] mx-auto bg-gray-50 rounded-xl overflow-hidden">
        <header className="bg-white border-b border-gray-100 p-6 flex items-center justify-between flex-wrap gap-4">
          <div className="flex items-center gap-4">
              <svg className="w-14 h-14" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
              <path d="M0 50C0 13.64 13.64 0 50 0C86.36 0 100 13.64 100 50C100 86.36 86.36 100 50 100C13.64 100 0 86.36 0 50Z" fill="#131D29"/>
              <path d="M36.5401 48.6601C39.9801 48.6601 42.7701 45.8501 42.7601 42.4101C42.7601 38.9701 39.9501 36.1801 36.5101 36.1901L36.4301 36.1401C33.0101 36.1901 30.2701 38.9901 30.2901 42.4101V42.4401C30.2901 45.8801 33.1001 48.6701 36.5401 48.6601Z" fill="white"/>
              <path d="M33.9801 60.9101C33.9101 60.7801 33.8401 60.6601 33.7601 60.5301C31.9301 57.5801 28.0501 56.6701 25.1001 58.5001C22.1501 60.3301 21.2401 64.2101 23.0701 67.1601L25.0901 70.7201C25.0901 70.7201 25.0901 70.7201 25.0901 70.7301C26.8101 73.7301 30.6501 74.7701 33.6501 73.0501C33.6701 73.0401 33.6901 73.0301 33.7101 73.0101C36.7101 71.2601 37.7201 67.4101 35.9801 64.4101L33.9601 60.9001L33.9801 60.9101Z" fill="white"/>
              <path d="M50.2001 52.7201C48.3801 50.1801 44.9601 49.3601 42.1901 50.8101C39.1101 52.4101 37.9101 56.2101 39.5201 59.2901L46.5801 70.6601C48.4101 73.6101 52.2801 74.5201 55.2301 72.7001C58.1401 70.8801 59.0501 67.0501 57.2701 64.1201L50.2101 52.7301L50.2001 52.7201Z" fill="white"/>
              <path d="M68.0903 46.2301L55.1203 24.6801C55.1203 24.6801 55.0903 24.6301 55.0803 24.6101C53.2703 21.6601 49.4103 20.7401 46.4603 22.5501C43.5003 24.3401 42.5403 28.2001 44.3303 31.1701L57.3403 52.7301V52.8001C59.1503 55.7701 63.0303 56.7101 66.0003 54.8901C68.9703 53.0801 69.9103 49.2001 68.0903 46.2301Z" fill="white"/>
              <path d="M72.9099 73.7301C76.3562 73.7301 79.1499 70.9364 79.1499 67.4901C79.1499 64.0439 76.3562 61.2501 72.9099 61.2501C69.4637 61.2501 66.6699 64.0439 66.6699 67.4901C66.6699 70.9364 69.4637 73.7301 72.9099 73.7301Z" fill="white"/>
              </svg>
            <div>
              <h1 className="text-xl font-bold text-gray-900 mb-1">Image Generator</h1>
              <p className="text-sm text-gray-500 leading-tight">Instant Image Generator v{version}</p>
            </div>
          </div>
          <a
            href={supportUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 text-sm text-gray-800 hover:text-gray-900 font-medium transition-colors"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
            Help &amp; Support
          </a>
        </header>

        <div className="flex m-6 gap-6">
          <aside className="w-[280px] min-h-[calc(100vh-5rem)] bg-white border border-gray-100 flex-shrink-0 rounded-xl">
            <SidebarNav activeSection={activeSection} onSelect={setActiveSection} />
          </aside>
          <main className="flex-1 overflow-auto">
            <SectionComponent />
          </main>
        </div>

        <footer className="bg-white border-t border-gray-100 p-6 text-center text-sm text-gray-500">
          <p className="text-[13px]  text-gray-600">
            <span >Instant Image Generator v{version}</span> 
            <span class="text-red-500"> ♥</span> by <a href="https://bdthemes.com" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-gray-900 font-medium">BdThemes</a> © 2026
          </p>
        </footer>
      </div>
    </div>
  );
}