import { ReactNode } from 'react';
import { Head } from '@inertiajs/react';
import AdminLayout from '@/layouts/AdminLayout';
import { useAuth } from '@/hooks/useAuth';
import AIRiskAssessor from '@/components/company-portal/AIRiskAssessor';

const RiskAssessorPage = () => {
  const { companyId } = useAuth();

  if (!companyId) {
    return (
      <>
        <Head title="AI Risk Assessor" />
        <div className="text-center py-12 text-muted-foreground">
          No company associated with your account.
        </div>
      </>
    );
  }

  return (
    <>
      <Head title="AI Risk Assessor" />
      <div>
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-foreground">AI Risk Assessor</h1>
          <p className="text-sm text-muted-foreground mt-1">
            Identify hazards from live video using AI-powered analysis
          </p>
        </div>
        <AIRiskAssessor companyId={companyId} />
      </div>
    </>
  );
};

RiskAssessorPage.layout = (page: ReactNode) => <AdminLayout>{page}</AdminLayout>;

export default RiskAssessorPage;
