import { Outlet, Link, useNavigate } from 'react-router-dom';
import { useAuthStore } from '@/features/auth';
import { Button } from './ui';
import LogoIcon from '../../../Logos/Logo_ohne_Text.svg';
import ZeasyLogo from '../../../Logos/Zeasy/logo_text_horizontal.svg';

export function Layout() {
  const navigate = useNavigate();
  const { user, logout } = useAuthStore();

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <div className="min-h-screen bg-bg-primary w-full max-w-full overflow-x-hidden">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-border bg-bg-secondary/80 backdrop-blur-sm">
        <div className="container mx-auto px-4">
          <div className="flex h-16 items-center justify-between">
            {/* Logo */}
            <Link to="/" className="flex items-center gap-3">
              <img
                src={LogoIcon}
                alt="Dimension 47"
                className="h-10 w-10"
              />
              <span
                className="text-xl font-semibold text-text-primary tracking-wide hidden sm:block"
                style={{ fontFamily: 'Cinzel, serif' }}
              >
                Dimension 47
              </span>
            </Link>

            {/* Navigation */}
            <nav className="hidden md:flex items-center gap-6">
              <Link
                to="/"
                className="text-sm text-text-secondary hover:text-text-primary transition-colors"
              >
                Kampagnen
              </Link>
              <Link
                to="/library"
                className="text-sm text-text-secondary hover:text-text-primary transition-colors"
              >
                Bibliothek
              </Link>
            </nav>

            {/* User Menu */}
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <div className="h-8 w-8 rounded-full bg-primary-500/20 flex items-center justify-center">
                  <span className="text-sm font-medium text-primary-500">
                    {user?.username?.charAt(0).toUpperCase()}
                  </span>
                </div>
                <span className="text-sm text-text-secondary hidden sm:block">
                  {user?.username}
                </span>
              </div>
              <Button variant="ghost" size="sm" onClick={handleLogout}>
                Abmelden
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="w-full max-w-7xl mx-auto px-4 py-6 sm:py-8 overflow-x-hidden">
        <Outlet />
      </main>

      {/* Footer */}
      <footer className="border-t border-border py-6 mt-auto">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-center gap-2 text-text-muted text-sm">
            <span>Powered by</span>
            <a
              href="https://zeasy.software/"
              target="_blank"
              rel="noopener noreferrer"
            >
              <img
                src={ZeasyLogo}
                alt="Zeasy Software"
                className="h-5 opacity-70 hover:opacity-100 transition-opacity"
              />
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
}
