import type { ModuleId } from '@/shared/types/app';
import type { DirectorDashboardPage } from '@/business/director-dashboard/types';
import { DirectorDashboardHeader } from '@/components/director-dashboard/DirectorDashboardHeader';
import { DirectorOverviewCards } from '@/components/director-dashboard/DirectorOverviewCards';
import { DirectorQuickActions } from '@/components/director-dashboard/DirectorQuickActions';
import { DirectorQuizResultsPanel } from '@/components/director-dashboard/DirectorQuizResultsPanel';
import { DirectorRecentFramePanel } from '@/components/director-dashboard/DirectorRecentFramePanel';
import { DirectorRiskList } from '@/components/director-dashboard/DirectorRiskList';
import { StatePanel } from '@/components/ui/state-panel';
import { getOptionalErrorMessage } from '@/shared/errors/errorMessages';

interface DirectorDashboardViewProps {
  readonly page: DirectorDashboardPage;
  readonly onOpenModule: (module: ModuleId) => void;
}

export function DirectorDashboardView({
  page,
  onOpenModule,
}: DirectorDashboardViewProps) {
  const errorMessage = getOptionalErrorMessage(page.error);

  if (page.isLoading) {
    return (
      <StatePanel tone="violet" alignment="center" loading className="my-20">
        Loading director dashboard...
      </StatePanel>
    );
  }

  if (errorMessage) {
    return (
      <StatePanel tone="red" role="alert">
        {errorMessage}
      </StatePanel>
    );
  }

  return (
    <div className="space-y-6">
      <DirectorDashboardHeader
        timeRange={page.timeRange}
        onTimeRangeChange={page.setTimeRange}
      />
      <DirectorOverviewCards
        cards={page.overviewCards}
        onOpenModule={onOpenModule}
      />
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <DirectorRiskList
            risks={page.riskAreas}
            onOpenModule={onOpenModule}
          />
          <DirectorQuizResultsPanel results={page.quizResults} />
        </div>
        <div className="space-y-4">
          <DirectorRecentFramePanel
            framePreviews={page.framePreviews}
            onOpenModule={onOpenModule}
          />
          <DirectorQuickActions
            actions={page.quickActions}
            onOpenModule={onOpenModule}
          />
        </div>
      </div>
    </div>
  );
}
