import CurrentUserActionGroup from '@/components/house/current-user-action-group';
import CurrentUserHouseList from '@/components/house/current-user-house-list';
import CurrentUserMemberList from '@/components/house/current-user-member-list';
import { m } from '@/paraglide/messages';
import { housesQueries } from '@/service/queries';
import { authClient } from '@lib/auth-client';
import { useQuery } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/(app)/(auth)/management/houses')({
  component: RouteComponent,
  staticData: { breadcrumb: () => m.nav_houses() },
});

function RouteComponent() {
  const { data: houses } = useQuery(housesQueries.currentUser());
  const { data: activeHouse } = authClient.useActiveOrganization();

  if (!activeHouse || !houses) return null;

  return (
    <div className="@container/main p-4">
      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
        <CurrentUserHouseList activeHouse={activeHouse} houses={houses} />
        <CurrentUserMemberList activeHouse={activeHouse} />
        <CurrentUserActionGroup
          activeHouse={activeHouse}
          oneHouse={houses.length === 1}
        />
      </div>
    </div>
  );
}