import Link from 'next/link';
import { getMemberToken } from '../_lib/api';
import { redirect } from 'next/navigation';

const NAV = [
  { href: '/my', label: 'Dashboard' },
  { href: '/my/digest', label: 'Digest' },
  { href: '/my/groups', label: 'My Groups' },
  { href: '/my/settings', label: 'Settings' },
];

export default async function MemberLayout({ children }: { children: React.ReactNode }) {
  const token = await getMemberToken();
  if (!token) redirect('/onboard');

  return (
    <div className="flex h-full -m-6 min-h-screen">
      {/* Left sidebar */}
      <nav className="w-[220px] shrink-0 bg-white border-r border-gray-200 flex flex-col p-4">
        <span className="font-bold text-base mb-6 px-2">TOWER</span>
        <div className="flex flex-col gap-1 flex-1">
          {NAV.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
            >
              {item.label}
            </Link>
          ))}
        </div>
        <div className="border-t border-gray-200 pt-3 mt-3">
          <p className="px-3 text-xs text-gray-400 uppercase tracking-wide">Member portal</p>
        </div>
      </nav>

      {/* Main content */}
      <main className="flex-1 overflow-auto p-6 bg-gray-50">
        {children}
      </main>

      {/* Right activity rail */}
      <aside className="w-[280px] shrink-0 bg-white border-l border-gray-200 p-4 hidden lg:block">
        <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-4">Quick actions</p>
        <div className="flex flex-col gap-2">
          <Link
            href="/my/settings"
            className="text-sm text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md hover:bg-gray-50"
          >
            Privacy settings
          </Link>
          <form method="POST" action="/api/my/logout">
            <button
              type="submit"
              className="w-full text-left text-sm text-red-500 hover:text-red-700 px-3 py-2 rounded-md hover:bg-red-50"
            >
              Sign out
            </button>
          </form>
        </div>
      </aside>
    </div>
  );
}