import React, { useState } from 'react';
import type { ComponentConfig } from '@measured/puck';
import { Menu, X } from 'lucide-react';

export interface HeaderLink {
  label: string;
  href: string;
}

export interface HeaderCta {
  text: string;
  href: string;
}

export interface HeaderProps {
  brandText: string;
  brandLogo?: string;
  links: HeaderLink[];
  ctaButton?: HeaderCta;
  variant: 'transparent-on-dark' | 'light' | 'dark';
  showMobileMenu: boolean;
  sticky?: boolean;
}

const HeaderRender: React.FC<HeaderProps> = ({
  brandText,
  brandLogo,
  links,
  ctaButton,
  variant,
  showMobileMenu,
  sticky,
}) => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const isTransparent = variant === 'transparent-on-dark';
  const isDark = variant === 'dark';

  const navClasses = isTransparent
    ? 'bg-transparent text-white'
    : isDark
      ? 'bg-neutral-900 text-white shadow-sm'
      : 'bg-white text-neutral-900 shadow-sm';

  const linkClasses = isTransparent
    ? 'text-white/80 hover:text-white'
    : isDark
      ? 'text-neutral-300 hover:text-white'
      : 'text-neutral-600 hover:text-neutral-900';

  const ctaClasses = isTransparent
    ? 'bg-white text-neutral-900 hover:bg-neutral-100'
    : isDark
      ? 'bg-primary-600 text-white hover:bg-primary-700'
      : 'bg-primary-600 text-white hover:bg-primary-700';

  return (
    <nav className={`relative z-50 ${navClasses} ${sticky ? 'sticky top-0' : ''}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Brand */}
          <div className="flex-shrink-0">
            {brandLogo ? (
              <img src={brandLogo} alt={brandText} className="h-8 w-auto" />
            ) : (
              <span className="text-xl font-bold">{brandText}</span>
            )}
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {links.map((link, index) => (
              <a
                key={index}
                href={link.href}
                className={`text-sm font-medium transition-colors ${linkClasses}`}
              >
                {link.label}
              </a>
            ))}
            {ctaButton && (
              <a
                href={ctaButton.href}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${ctaClasses}`}
              >
                {ctaButton.text}
              </a>
            )}
          </div>

          {/* Mobile Menu Button */}
          {showMobileMenu && (
            <div className="md:hidden">
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className={`p-2 rounded-md ${linkClasses}`}
                aria-label="Toggle menu"
              >
                {mobileMenuOpen ? (
                  <X className="h-6 w-6" />
                ) : (
                  <Menu className="h-6 w-6" />
                )}
              </button>
            </div>
          )}
        </div>
      </div>

      {/* Mobile Menu */}
      {showMobileMenu && mobileMenuOpen && (
        <div className="md:hidden absolute top-16 left-0 right-0 bg-white shadow-lg">
          <div className="px-4 py-4 space-y-3">
            {links.map((link, index) => (
              <a
                key={index}
                href={link.href}
                className="block text-neutral-600 hover:text-neutral-900 text-sm font-medium py-2"
                onClick={() => setMobileMenuOpen(false)}
              >
                {link.label}
              </a>
            ))}
            {ctaButton && (
              <a
                href={ctaButton.href}
                className="block bg-primary-600 text-white text-center px-4 py-2 rounded-lg text-sm font-medium"
                onClick={() => setMobileMenuOpen(false)}
              >
                {ctaButton.text}
              </a>
            )}
          </div>
        </div>
      )}
    </nav>
  );
};

export const Header: ComponentConfig<HeaderProps> = {
  label: 'Header',
  fields: {
    brandText: {
      type: 'text',
      label: 'Business Name',
    },
    brandLogo: {
      type: 'text',
      label: 'Logo URL',
    },
    links: {
      type: 'array',
      label: 'Navigation Links',
      arrayFields: {
        label: { type: 'text', label: 'Label' },
        href: { type: 'text', label: 'URL' },
      },
      defaultItemProps: {
        label: 'Link',
        href: '#',
      },
    },
    ctaButton: {
      type: 'object',
      label: 'Action Button (optional)',
      objectFields: {
        text: { type: 'text', label: 'Button Text' },
        href: { type: 'text', label: 'Button URL' },
      },
    },
    variant: {
      type: 'select',
      label: 'Style',
      options: [
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
        { label: 'Transparent on Dark', value: 'transparent-on-dark' },
      ],
    },
    showMobileMenu: {
      type: 'radio',
      label: 'Mobile Menu',
      options: [
        { label: 'Show', value: true },
        { label: 'Hide', value: false },
      ],
    },
    sticky: {
      type: 'radio',
      label: 'Sticky Header',
      options: [
        { label: 'No', value: false },
        { label: 'Yes', value: true },
      ],
    },
  },
  defaultProps: {
    brandText: 'Your Business',
    links: [
      { label: 'Services', href: '#services' },
      { label: 'About', href: '#about' },
      { label: 'Contact', href: '#contact' },
    ],
    ctaButton: {
      text: 'Book Now',
      href: '#book',
    },
    variant: 'light',
    showMobileMenu: true,
    sticky: false,
  },
  render: HeaderRender,
};

export default Header;
