'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { Sparkles, LogOut, CalendarDays, Coins, FileText, Settings2 } from 'lucide-react';
import ThemeToggle from './ThemeToggle';

export default function Header({ user }) {
  const router = useRouter();
  const [credits, setCredits] = useState(null);

  useEffect(() => {
    if (!user) return;
    const refresh = () => fetch('/api/billing/balance').then(r => r.json())
      .then(d => setCredits(d.isUnlimited ? '∞' : d.credits)).catch(() => {});
    refresh();
    window.addEventListener('credits-updated', refresh);
    return () => window.removeEventListener('credits-updated', refresh);
  }, [user?.id]);

  async function logout() {
    await fetch('/api/auth/logout', { method: 'POST' });
    router.push('/login');
  }
  return (
    <header className="border-b border-border bg-bg/80 backdrop-blur sticky top-0 z-10">
      <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
        <Link href="/" className="flex items-center gap-2 hover:opacity-80">
          <Sparkles className="w-5 h-5 text-accent" />
          <span className="font-bold">ZeroPost</span>
        </Link>
        <nav className="hidden sm:flex items-center gap-1">
          <Link href="/calendar" className="btn-ghost px-3 py-1.5 text-sm flex items-center gap-1.5">
            <CalendarDays className="w-4 h-4" />
            <span>Календарь</span>
          </Link>
          <Link href="/drafts" className="btn-ghost px-3 py-1.5 text-sm flex items-center gap-1.5">
            <FileText className="w-4 h-4" />
            <span>Черновики</span>
          </Link>
          {user?.isAdmin && (
            <Link href="/system" className="btn-ghost px-3 py-1.5 text-sm flex items-center gap-1.5">
              <Settings2 className="w-4 h-4" />
              <span>Админ</span>
            </Link>
          )}
        </nav>
        <div className="flex items-center gap-2">
          {/* Баланс кредитов */}
          {credits !== null && (
            <Link href="/billing" className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-accent/10 hover:bg-accent/20 transition-colors text-sm font-medium text-accent">
              <Coins className="w-3.5 h-3.5" />
              <span>{credits} кр</span>
            </Link>
          )}
          <span className="text-sm text-gray-500 hidden sm:inline mr-2">{user?.email}</span>
          <ThemeToggle />
          <button onClick={logout} className="btn-ghost p-2" title="Выйти">
            <LogOut className="w-4 h-4" />
          </button>
        </div>
      </div>
    </header>
  );
}

// Публичный хедер для лендинга — отдельный экспорт
export function PublicHeader() {
  return (
    <header className="border-b border-border bg-surface sticky top-0 z-50">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between">
        <Link href="/landing" className="flex items-center gap-2 font-bold">
          <Sparkles className="w-5 h-5 text-accent" />
          <span>ZeroPost</span>
        </Link>
        <div className="flex items-center gap-2">
          <Link href="/login"    className="btn-ghost text-sm px-3 py-1.5">Войти</Link>
          <Link href="/register" className="btn-primary text-sm px-3 py-1.5">Начать бесплатно</Link>
        </div>
      </div>
    </header>
  );
}