'use client';

import { useThemeStore } from '@/stores/theme-store';
import { themes, type ThemeName } from '@/themes';
import { Button } from '@horux/shared-ui';
import { TenantSelector } from '@/components/tenant-selector';
import { MembershipSwitcher } from '@/components/membership-switcher';
import { ContribuyenteSelector } from '@/components/contribuyente-selector';
import { Sun, Moon, Palette } from 'lucide-react';

const themeIcons: Record<ThemeName, React.ReactNode> = {
  light: <Sun className="h-4 w-4" />,
  vibrant: <Palette className="h-4 w-4" />,
  corporate: <Palette className="h-4 w-4" />,
  dark: <Moon className="h-4 w-4" />,
};

const themeOrder: ThemeName[] = ['light', 'dark'];

interface HeaderProps {
  title: string;
  children?: React.ReactNode;
}

export function Header({ title, children }: HeaderProps) {
  const { theme, setTheme } = useThemeStore();

  const cycleTheme = () => {
    const currentIndex = themeOrder.indexOf(theme);
    const nextIndex = (currentIndex + 1) % themeOrder.length;
    setTheme(themeOrder[nextIndex]);
  };

  return (
    <header className="sticky top-0 z-30 border-b bg-background/95 backdrop-blur">
      <div className="flex h-auto min-h-16 flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between md:px-6 md:py-0">
        {/* Title section */}
        <div className="flex items-center gap-4 min-w-0">
          <h1 className="text-lg font-semibold truncate md:text-xl">{title}</h1>
          {children}
        </div>

        {/* Actions section */}
        <div className="flex flex-wrap items-center gap-2 md:gap-3">
          <div className="flex flex-1 items-center gap-2 min-w-0 md:flex-initial md:gap-3">
            <ContribuyenteSelector />
            <MembershipSwitcher />
            <TenantSelector />
          </div>
          <Button
            variant="ghost"
            size="icon"
            onClick={cycleTheme}
            title={`Tema: ${themes[theme].name}`}
          >
            {themeIcons[theme]}
          </Button>
        </div>
      </div>
    </header>
  );
}
