"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { apiFetch } from "@/lib/api";

export default function Shell({ children }: { children: React.ReactNode }) {
  const [me, setMe] = useState<{email:string, role:string} | null>(null);

  useEffect(() => {
    apiFetch("/auth/me").then(setMe).catch(() => setMe(null));
  }, []);

  return (
    <div className="flex">
      <aside className="w-64 shrink-0 border-r border-zinc-800 min-h-screen p-4">
        <div className="text-lg font-semibold">mt-traffic</div>
        <div className="mt-4 space-y-2 text-sm">
          <Link className="block hover:text-white text-zinc-300" href="/dashboards">Dashboards</Link>
          <Link className="block hover:text-white text-zinc-300" href="/admin">Admin</Link>
        </div>
        <div className="mt-6 text-xs text-zinc-400">
          {me ? (
            <div>
              <div>{me.email}</div>
              <div className="uppercase">{me.role}</div>
            </div>
          ) : (
            <div>Not logged in</div>
          )}
        </div>
      </aside>
      <main className="flex-1 p-6">{children}</main>
    </div>
  );
}