'use client';

import { useSuspenseQuery } from '@tanstack/react-query';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { permissionCatalogQueryOptions } from '../api/queries';

export function PermissionMatrix() {
  const { data } = useSuspenseQuery(permissionCatalogQueryOptions());

  return (
    <div className='grid grid-cols-1 gap-4 xl:grid-cols-2'>
      {data.groups.map((group) => (
        <Card key={group.key} className='w-full'>
          <CardHeader>
            <CardTitle className='text-base'>{group.label}</CardTitle>
          </CardHeader>
          <CardContent className='space-y-3'>
            {group.permissions.map((permission) => (
              <div
                key={permission.value}
                className='flex flex-col gap-3 rounded-md border p-4 sm:flex-row sm:items-start sm:justify-between'
              >
                <div className='min-w-0 flex-1 space-y-1'>
                  <p className='text-base font-semibold'>{permission.name}</p>
                  <p className='text-muted-foreground text-sm leading-6'>
                    {permission.description}
                  </p>
                  <p className='text-muted-foreground font-mono text-xs'>{permission.code}</p>
                </div>
                <Badge variant='outline' className='shrink-0'>
                  Action
                </Badge>
              </div>
            ))}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
