import React from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';
import {
  canParticipateInResourceMatching,
  getOrganizationSubtypeLabel,
} from '@/schemas/organizationSubtype.ts';
import { Organization } from '@/types.ts';
import { MapPin } from 'lucide-react';
import Badge from '@/components/ui/Badge.tsx';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { Flex, Grid, Stack } from '@/components/ui/layout';
import ContactDetails from '@/components/organization/ContactDetails.tsx';
import KeyMetrics from '@/components/organization/KeyMetrics.tsx';

interface OrganizationDetailsGridProps {
  organization: Organization;
}

const OrganizationDetailsGrid = ({ organization }: OrganizationDetailsGridProps) => {
  const { t } = useTranslation();

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('organizationPage.details')}</CardTitle>
      </CardHeader>
      <CardContent>
        <Grid cols={{ md: 2 }} gap="2xl">
          <Stack spacing="xl">
            <div>
              <h3 className="font-semibold mb-4 text-lg">{t('organizationPage.keyMetrics')}</h3>
              <KeyMetrics organization={organization} />
              {organization.Subtype && (
                <div className="mt-4 pt-4 border-t">
                  <Flex align="center" gap="xs">
                    <span className="text-sm text-muted-foreground">
                      {t('organizationPage.organizationType')}:
                    </span>
                    <Badge variant="secondary">
                      {getOrganizationSubtypeLabel(organization.Subtype)}
                    </Badge>
                    {canParticipateInResourceMatching(organization.Subtype) && (
                      <Badge variant="outline" className="text-xs">
                        {t('organizationPage.participatesInMatching')}
                      </Badge>
                    )}
                  </Flex>
                </div>
              )}
            </div>
          </Stack>
          <div>
            <h3 className="font-semibold mb-4 text-lg">
              {t('organizationPage.contactAndLocation')}
            </h3>
            <Stack spacing="md">
              <ContactDetails organization={organization} />
              {organization.Address && (
                <Flex align="start" gap="sm" className="p-2">
                  <MapPin className="h-4 mt-1 shrink-0 text-current text-muted-foreground w-4" />
                  <span className="min-w-0 text-base">{organization.Address}</span>
                </Flex>
              )}
            </Stack>
          </div>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default React.memo(OrganizationDetailsGrid);