import { useState } from 'react';
import { Head, Link } from '@inertiajs/react';
import { LogIn, Home } from 'lucide-react';
import InteractiveMap from '../components/landing/interactive-map';
import ProjectModal from '../components/project-modal';
import ThemeToggle from '../components/theme-toggle';
import SEOHead from '../components/SEOHead';

export default function Map() {
  const [selectedProjectId, setSelectedProjectId] = useState<number | null>(null);

  const handleProjectClick = (projectId: number) => {
    setSelectedProjectId(projectId);
  };

  const handleCloseModal = () => {
    setSelectedProjectId(null);
  };

  const mapJsonLd = {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "Mapa Interactivo de Proyectos de Innovación Educativa - MIRATE",
    "description": "Explora proyectos de investigación e innovación pedagógica georreferenciados en Colombia y Latinoamérica",
    "url": window.location.href,
    "mainEntity": {
      "@type": "Map",
      "name": "Mapa de Proyectos MIRATE",
      "description": "Mapa interactivo de proyectos de innovación educativa en Colombia",
      "geo": {
        "@type": "GeoCoordinates",
        "latitude": "8.7479",
        "longitude": "-75.8814"
      }
    },
    "isPartOf": {
      "@type": "WebSite",
      "name": "MIRATE",
      "url": window.location.origin
    }
  };

  return (
    <>
      <SEOHead
        title="Mapa de Proyectos de Innovación Educativa"
        description="Explora proyectos de investigación e innovación pedagógica georreferenciados en Colombia. Descubre metodologías, resultados y conecta con investigadores."
        keywords={[
          'mapa educativo',
          'proyectos georreferenciados',
          'innovación pedagógica Colombia',
          'investigación educativa',
          'metodologías educativas',
          'transferencia de conocimiento'
        ]}
        type="website"
        jsonLd={mapJsonLd}
      />

      <div className="min-h-screen bg-white dark:bg-slate-900">
        {/* Header Navigation */}
        <header className="bg-white dark:bg-slate-800 shadow-sm border-b border-slate-200 dark:border-slate-700">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              {/* Left side - Back to home */}
              <div className="flex items-center gap-4">
                <Link
                  href="/"
                  className="inline-flex items-center gap-2 px-3 py-2 text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
                >
                  <Home className="w-4 h-4" />
                  <span className="font-medium">Inicio</span>
                </Link>

                <div className="h-6 w-px bg-slate-200 dark:bg-slate-600"></div>

                <h1 className="text-xl font-bold text-emerald-700 dark:text-emerald-400">
                  Mapa de Proyectos MIRATE
                </h1>
              </div>

              {/* Right side - Login and theme toggle */}
              <div className="flex items-center gap-3">
                <ThemeToggle />

                <Link
                  href="/login"
                  className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors font-medium"
                >
                  <LogIn className="w-4 h-4" />
                  <span>Iniciar Sesión</span>
                </Link>
              </div>
            </div>
          </div>
        </header>

        {/* Main Content */}
        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pt-44 sm:pt-48 lg:pt-52">
          {/* Page Title and Description */}
          <div className="mb-8 text-center">
            <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">
              Explora Proyectos de Innovación Educativa
            </h2>
            <p className="text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
              Descubre proyectos de investigación e innovación pedagógica en Colombia.
              Haz clic en cualquier marcador para conocer más detalles del proyecto.
            </p>
          </div>

          {/* Map Container */}
          <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
            <InteractiveMap
              className="h-[600px]"
              onProjectClick={handleProjectClick}
            />
          </div>

          {/* Instructions */}
          <div className="mt-8 bg-emerald-50 dark:bg-emerald-900/20 rounded-xl p-6">
            <div className="flex items-start gap-4">
              <div>
                <h3 className="text-lg font-semibold text-emerald-800 dark:text-emerald-200 mb-2">
                  ¿Cómo usar el mapa?
                </h3>
                <ul className="text-emerald-700 dark:text-emerald-300 space-y-1">
                  <li>• Haz clic en cualquier punto verde para ver los detalles del proyecto</li>
                  <li>• Usa los controles del mapa para hacer zoom y explorar diferentes regiones</li>
                  <li>• Los proyectos están distribuidos por toda Colombia</li>
                </ul>
              </div>
            </div>
          </div>

          {/* Call to Action */}
          <div className="mt-8 text-center">
            <div className="bg-slate-50 dark:bg-slate-800 rounded-xl p-8">
              <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-4">
                ¿Tienes un proyecto de innovación educativa?
              </h3>
              <p className="text-slate-600 dark:text-slate-300 mb-6">
                Únete a nuestra comunidad y comparte tu investigación con otros educadores
              </p>
              <Link
                href="/register"
                className="inline-flex items-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors font-medium"
              >
                Registrar mi Proyecto
              </Link>
            </div>
          </div>
        </main>

        {/* Project Modal */}
        {selectedProjectId && (
          <ProjectModal
            projectId={selectedProjectId}
            isOpen={!!selectedProjectId}
            onClose={handleCloseModal}
          />
        )}
      </div>
    </>
  );
}