"use client";

import React, { useState } from "react";
import Button from "@/app/ui/Button";
import AddEventModal from "@/app/add-event/AddEventModal";
import ReminderSettingsPanel from "@/app/ui/ReminderSettingsPanel";
import { useServerHealth } from "@/hooks/useServerHealth";
import { useEventsStore } from "@/hooks/useEventsStore";
import { useTheme } from "@/hooks/useTheme";
import Link from "next/link";
import LogoHorizontal from "@/app/ui/LogoHorizontal";

type HeaderProps = {
  className?: string;
};

const Header: React.FC<HeaderProps> = ({ className = "" }) => {
  const [showAddEventModal, setShowAddEventModal] = useState(false);
  const [showSettingsModal, setShowSettingsModal] = useState(false);
  const { status } = useServerHealth();
  const { events } = useEventsStore();
  const { dark, toggle } = useTheme();

  return (
    <header className={`bg-white dark:bg-gray-800 shadow-sm ${className}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <Link href="/">
              <LogoHorizontal height={32} />
            </Link>
          </div>
          <div className="flex items-center space-x-4">
            <div className="hidden md:flex items-center text-sm text-gray-600 dark:text-gray-300">
              <span>
                <strong>{events.length}</strong>
              </span>
              <span className="ml-1">events</span>
              {status === true ? (
                <span className="ml-2 text-green-600">Online</span>
              ) : status === false ? (
                <span className="ml-2 text-red-600">Offline</span>
              ) : null}
            </div>
            <Button variant="secondary" size="sm" onClick={() => setShowAddEventModal(true)}>
              Add Event
            </Button>
            <button
              onClick={toggle}
              aria-label="Toggle dark mode"
              className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              {dark ? "☀️" : "🌙"}
            </button>
            <button
              onClick={() => setShowSettingsModal(true)}
              aria-label="Settings"
              className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              ⚙️
            </button>
          </div>
        </div>
      </div>
      <AddEventModal isOpen={showAddEventModal} onClose={() => setShowAddEventModal(false)} />
      {showSettingsModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-sm relative">
            <button
              onClick={() => setShowSettingsModal(false)}
              className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-lg"
              aria-label="Close settings"
            >
              ✕
            </button>
            <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Settings</h2>
            <ReminderSettingsPanel />
          </div>
        </div>
      )}
    </header>
  );
};

export default Header;