import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { useUserOrganizations } from '@/hooks/api/useOrganizationsAPI.ts';
import { getOrganizationSubtypeLabel } from '@/schemas/organizationSubtype.ts';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import Button from '@/components/ui/Button.tsx';
import Badge from '@/components/ui/Badge.tsx';
import VerifiedBadge from '@/components/ui/VerifiedBadge.tsx';
import Spinner from '@/components/ui/Spinner.tsx';
import { getTranslatedSectorName } from '@/lib/sector-mapper.ts';
import type { BackendOrganization } from '@/schemas/backend/organization';

interface MyOrganizationsProps {
  onSelectOrganization: (org: BackendOrganization) => void;
}

const MyOrganizations = ({ onSelectOrganization }: MyOrganizationsProps) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { data: organizations, isLoading, error } = useUserOrganizations();

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <Spinner className="h-8 w-8 text-primary" />
      </div>
    );
  }

  if (error) {
    return (
      <Card>
        <CardContent className="py-8 text-center">
          <p className="text-destructive">
            {error instanceof Error ? error.message : t('errorBoundary.unknown')}
          </p>
        </CardContent>
      </Card>
    );
  }

  if (!organizations || organizations.length === 0) {
    return (
      <Card>
        <CardContent className="py-12 text-center">
          <p className="text-muted-foreground mb-4">{t('userDashboard.noOrganizations')}</p>
          <Button onClick={() => navigate('/map')} variant="primary">
            {t('userDashboard.addFirstOrganization')}
          </Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      {organizations.map((org) => {
        return (
          <Card key={org.ID} className="hover:shadow-md transition-shadow">
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <CardTitle className="text-lg">{org.Name}</CardTitle>
                    {org.Verified && <VerifiedBadge />}
                  </div>
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge variant="secondary" className="text-xs">
                      {getTranslatedSectorName(org.Sector, t)}
                    </Badge>
                    {org.Subtype && (
                      <Badge variant="outline" className="text-xs">
                        {getOrganizationSubtypeLabel(org.Subtype)}
                      </Badge>
                    )}
                  </div>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              {org.Description && (
                <p className="text-sm text-muted-foreground mb-4 line-clamp-2">{org.Description}</p>
              )}
              <div className="flex gap-2">
                <Button
                  variant="primary"
                  size="sm"
                  onClick={() => navigate(`/organization/${org.ID}`)}
                >
                  {t('userDashboard.viewOrganization')}
                </Button>
                <Button variant="outline" size="sm" onClick={() => onSelectOrganization(org)}>
                  {t('userDashboard.editOrganization')}
                </Button>
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
};

export default React.memo(MyOrganizations);