import { Navigate, Outlet } from 'react-router-dom';
import { useMe } from '@/hooks/useAuth';
import { Sidebar } from './Sidebar';
import { Topbar } from './Topbar';
import { VerifyEmailBanner } from './VerifyEmailBanner';

export function AppLayout() {
  const me = useMe();

  if (me.isLoading) {
    return <div className="min-h-screen grid place-items-center text-sm text-ink-500">Loading…</div>;
  }

  if (!me.data) {
    return <Navigate to="/login" replace />;
  }

  return (
    <div className="min-h-screen flex bg-ink-50">
      <Sidebar />
      <div className="flex-1 flex flex-col min-w-0">
        <Topbar />
        <VerifyEmailBanner />
        <main className="flex-1 overflow-y-auto">
          <Outlet />
        </main>
      </div>
    </div>
  );
}

export function PageHeader({
  title,
  description,
  action,
}: {
  title: string;
  description?: React.ReactNode;
  action?: React.ReactNode;
}) {
  return (
    <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between mb-6">
      <div>
        <h1 className="text-2xl font-bold text-ink-950 font-display">{title}</h1>
        {description && <p className="mt-1 text-sm text-ink-600">{description}</p>}
      </div>
      {action && <div className="flex items-center gap-2">{action}</div>}
    </div>
  );
}