import React, { useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { Tag, Settings as SettingsIcon, Palette, ChevronRight, Minimize2, LogOut, Sun, Moon, Monitor, ExternalLink, Mail, Megaphone, HelpCircle } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { usePageHeader } from '@/contexts/PageHeaderContext';
import { useApp } from '@/contexts/AppContext';
import { Button } from '@/components/ui/button';
import { useTheme } from '@/components/ThemeProvider';

interface MenuItem {
  icon: React.ReactNode;
  label: string;
  description: string;
  to: string;
}

const menuItems: MenuItem[] = [
  {
    icon: <Megaphone className="w-5 h-5" />,
    label: __('Marketing'),
    description: __('Newsletter, coupons, and promotions'),
    to: '/marketing'
  },
  {
    icon: <Palette className="w-5 h-5" />,
    label: __('Appearance'),
    description: __('Customize your store appearance'),
    to: '/appearance'
  },
  {
    icon: <SettingsIcon className="w-5 h-5" />,
    label: __('Settings'),
    description: __('Configure your store settings'),
    to: '/settings'
  },
  {
    icon: <HelpCircle className="w-5 h-5" />,
    label: __('Help & Docs'),
    description: __('Documentation and guides'),
    to: '/help'
  }
];

export default function MorePage() {
  const navigate = useNavigate();
  const { setPageHeader, clearPageHeader } = usePageHeader();
  const { isStandalone, exitFullscreen } = useApp();
  const { theme, setTheme } = useTheme();

  useEffect(() => {
    setPageHeader(__('More'));
    return () => clearPageHeader();
  }, [setPageHeader, clearPageHeader]);

  const handleExitFullscreen = () => {
    exitFullscreen?.();
    // Redirect to dashboard after exiting fullscreen
    navigate('/');
  };

  const handleLogout = () => {
    // Clear auth and redirect to login
    window.location.href = window.WNW_CONFIG?.wpAdminUrl || '/wp-admin';
  };

  const themeOptions = [
    { value: 'light', icon: <Sun className="w-5 h-5" />, label: __('Light') },
    { value: 'dark', icon: <Moon className="w-5 h-5" />, label: __('Dark') },
    { value: 'system', icon: <Monitor className="w-5 h-5" />, label: __('System') },
  ];

  return (
    <div className="bg-background pb-20">
      {/* Remove inline header - use PageHeader component instead */}
      <div className=" py-4">
        <p className="text-sm text-muted-foreground">
          {__('Additional features and settings')}
        </p>
      </div>

      {/* Menu Items */}
      <div className="divide-y">
        {menuItems.map((item) => (
          <button
            key={item.to}
            onClick={() => navigate(item.to)}
            className="w-full flex items-center gap-4 py-4 hover:bg-accent transition-colors"
          >
            <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
              {item.icon}
            </div>
            <div className="flex-1 text-left min-w-0">
              <div className="font-medium">{item.label}</div>
              <div className="text-sm text-muted-foreground truncate">
                {item.description}
              </div>
            </div>
            <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
          </button>
        ))}
      </div>

      {/* Theme Selector */}
      <div className=" py-6">
        <h3 className="text-sm font-medium mb-3">{__('Appearance')}</h3>
        <div className="grid grid-cols-3 gap-2">
          {themeOptions.map((option) => (
            <button
              key={option.value}
              onClick={() => setTheme(option.value as 'light' | 'dark' | 'system')}
              className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-colors ${theme === option.value
                ? 'border-primary bg-primary/10'
                : 'border-border hover:border-primary/50'
                }`}
            >
              {option.icon}
              <span className="text-xs font-medium">{option.label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Exit Fullscreen / Logout */}
      <div className=" py-6 space-y-3">
        <Button
          onClick={() => window.open(window.WNW_CONFIG?.storeUrl || '/store/', '_blank')}
          variant="outline"
          className="w-full justify-start gap-3"
        >
          <ExternalLink className="w-5 h-5" />
          {__('Visit Store')}
        </Button>

        {isStandalone && (
          <Button
            onClick={() => window.location.href = window.WNW_CONFIG?.wpAdminUrl || '/wp-admin'}
            variant="outline"
            className="w-full justify-start gap-3"
          >
            <ExternalLink className="w-5 h-5" />
            {__('Go to WP Admin')}
          </Button>
        )}

        {isStandalone ? (
          <Button
            onClick={handleLogout}
            variant="outline"
            className="w-full justify-start gap-3"
          >
            <LogOut className="w-5 h-5" />
            {__('Logout')}
          </Button>
        ) : (
          <Button
            onClick={handleExitFullscreen}
            variant="outline"
            className="w-full justify-start gap-3"
          >
            <Minimize2 className="w-5 h-5" />
            {__('Exit Fullscreen')}
          </Button>
        )}
      </div>
    </div>
  );
}
