'use client'

import { useSession } from 'next-auth/react'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { useTenantResources } from '@/hooks/usePhoenixRailing'

export default function ResourcesPage() {
  const { status } = useSession()
  const { data: tenantData, isLoading, error } = useTenantResources()

  if (status === 'loading') {
    return <div>Loading...</div>
  }

  if (status === 'unauthenticated') {
    return <div>Please sign in</div>
  }

  const resources = tenantData?.resources ?? []

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Resource Inventory</h1>
      <p className="text-muted-foreground mb-4">
        Tenant-scoped resources from Phoenix API (GET /api/v1/tenants/me/resources)
      </p>
      {isLoading && <p className="text-gray-400">Loading...</p>}
      {error && <p className="text-red-400">Error loading resources</p>}
      {tenantData && (
        <Card className="bg-gray-800 border-gray-700">
          <CardHeader>
            <CardTitle className="text-white">Tenant: {tenantData.tenantId}</CardTitle>
          </CardHeader>
          <CardContent>
            {resources.length === 0 ? (
              <p className="text-sm text-muted-foreground">No resources</p>
            ) : (
              <ul className="space-y-2">
                {resources.map((r: Record<string, unknown>) => (
                  <li key={String(r.id ?? r.name ?? '')} className="flex justify-between text-sm">
                    <span>{String(r.name ?? '—')}</span>
                    <span className="text-gray-400">{String(r.resource_type ?? r.provider ?? '—')}</span>
                  </li>
                ))}
              </ul>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  )
}

