import React from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card.tsx';
import DashboardStats from '@/components/admin/DashboardStats.tsx';
import EconomicGraph from '@/components/admin/EconomicGraph.tsx';
import SupplyChainAnalysis from '@/components/admin/SupplyChainAnalysis.tsx';
import OrganizationTable from '@/components/admin/OrganizationTable.tsx';
import { useNavigation } from '@/hooks/useNavigation.tsx';
import { useAdminDashboard } from '@/hooks/features/useAdminDashboard.ts';
import { MainLayout } from '@/components/layout/MainLayout.tsx';
import { useOrganizations } from '@/hooks/useOrganizations.ts';
import PageHeader from '@/components/layout/PageHeader.tsx';
import { Container, Grid, Stack } from '@/components/ui/layout';

const AdminPage = () => {
  const { handleBackNavigation, handleFooterNavigate } = useNavigation();
  const { updateOrganization } = useOrganizations();
  const { t } = useTranslation();
  const { stats } = useAdminDashboard();

  return (
    <MainLayout onNavigate={handleFooterNavigate} className="bg-muted/30">
      <Container size="2xl" className="py-8 sm:py-12">
        <PageHeader
          title={t('adminPage.title')}
          subtitle={t('adminPage.subtitle')}
          onBack={handleBackNavigation}
        />

        <Stack spacing="2xl">
          <DashboardStats stats={stats} />

          <Grid cols={{ lg: 5 }} gap="2xl">
            <Card className="lg:col-span-3">
              <CardHeader>
                <CardTitle>{t('adminPage.economicConnections')}</CardTitle>
                <p className="text-sm text-muted-foreground">
                  {t('adminPage.economicConnectionsDesc')}
                </p>
              </CardHeader>
              <CardContent>
                <EconomicGraph />
              </CardContent>
            </Card>

            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle>{t('adminPage.supplyDemand')}</CardTitle>
              </CardHeader>
              <CardContent>
                <SupplyChainAnalysis />
              </CardContent>
            </Card>
          </Grid>

          <Card>
            <CardHeader>
              <CardTitle>{t('adminPage.manageOrgs')}</CardTitle>
            </CardHeader>
            <CardContent>
              <OrganizationTable onUpdateOrganization={updateOrganization} />
            </CardContent>
          </Card>
        </Stack>
      </Container>
    </MainLayout>
  );
};

export default AdminPage;