/**
 * Organization layout component.
 *
 * ⚠️ AUTO-GENERATED BY PRISM (GENERATE_ONCE) — safe to edit
 *
 * Provides navigation sidebar and outlet for organization sub-pages.
 */

import { useEffect, useState } from 'react';
import { NavLink, Outlet, useParams } from 'react-router-dom';
import { getOrganization, type Organization } from '../../lib/orgApi';

export default function OrgLayout() {
  const { slug } = useParams<{ slug: string }>();
  const [org, setOrg] = useState<Organization | null>(null);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!slug) return;
    getOrganization(slug)
      .then(setOrg)
      .catch((e) => setError(e.message));
  }, [slug]);

  if (error) return <div className="p-6 text-red-600">Error: {error}</div>;
  if (!org) return <div className="p-6">Loading organization...</div>;

  const basePath = `/organizations/${slug}`;
  const canManage =
    org.current_user_role === 'owner' || org.current_user_role === 'admin';

  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
    `block px-4 py-2 rounded-lg text-sm ${
      isActive ? 'bg-blue-50 text-blue-700 font-medium' : 'hover:bg-gray-50'
    }`;

  return (
    <div className="flex min-h-screen">
      {/* Sidebar */}
      <aside className="w-60 border-r p-4 space-y-1">
        <div className="mb-4">
          <h2 className="font-bold text-lg truncate">{org.name}</h2>
          <p className="text-xs text-gray-400">{org.{{ slug_field }}}</p>
        </div>

        <nav className="space-y-1">
          <NavLink to={basePath} end className={navLinkClass}>
            Overview
          </NavLink>
          <NavLink to={`${basePath}/members`} className={navLinkClass}>
            Members
          </NavLink>
          {canManage && (
            <NavLink to={`${basePath}/settings`} className={navLinkClass}>
              Settings
            </NavLink>
          )}
        </nav>
      </aside>

      {/* Main content */}
      <main className="flex-1">
        <Outlet context={{ "{{" }} org {{ "}}" }} />
      </main>
    </div>
  );
}
