import React from 'react';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Button,
  Badge,
} from 'xertica-ui/ui';
import { Header } from 'xertica-ui/layout';
import { useLayout } from 'xertica-ui/hooks';
import { useNavigate, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useFeatureCards } from '../hooks/useFeatureCards';
import { SectionErrorBoundary } from '../../../shared/error-boundary';

export function HomeContent() {
  const { t } = useTranslation();
  const { sidebarExpanded, sidebarWidth } = useLayout();
  const navigate = useNavigate();

  const { data: featureCards = [], isLoading } = useFeatureCards();

  return (
    <div
      style={{
        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
      }}
      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
    >
      <Header
        showThemeToggle={true}
        showLanguageSelector={true}
        breadcrumbs={[{ label: t('nav.designSystem'), href: '/home' }, { label: t('nav.home') }]}
        renderLink={(href: string, props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
          <Link to={href} {...props} />
        )}
      />

      <main className="flex-1 overflow-hidden bg-muted">
        <div className="h-full" style={{ overflowY: 'auto', overflowX: 'hidden' }}>
          <div className="p-5 sm:p-4 md:p-6">
            <div className="max-w-6xl mx-auto space-y-8">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tight">{t('home.welcome')}</h2>
                <p className="text-muted-foreground">{t('home.subtitle')}</p>
              </div>

              <SectionErrorBoundary>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {isLoading
                    ? Array.from({ length: 3 }).map((_, i) => (
                        <Card key={i} className="flex flex-col h-full animate-pulse">
                          <CardHeader>
                            <div className="h-4 bg-muted-foreground/20 rounded w-2/3" />
                          </CardHeader>
                          <CardContent className="flex-1">
                            <div className="h-3 bg-muted-foreground/10 rounded w-full" />
                          </CardContent>
                          <CardFooter>
                            <div className="h-9 bg-muted-foreground/10 rounded w-full" />
                          </CardFooter>
                        </Card>
                      ))
                    : featureCards.map(card => (
                        <Card
                          key={card.id}
                          className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full"
                        >
                          <CardHeader>
                            <div className="flex items-center gap-3">
                              <div
                                className="p-2 rounded-[var(--radius)]"
                                style={{
                                  background: `color-mix(in srgb, var(${card.chartColor}) 20%, transparent)`,
                                }}
                              >
                                <card.Icon
                                  className="w-6 h-6"
                                  style={{ color: `var(${card.chartColor})` }}
                                />
                              </div>
                              <div className="flex items-center gap-2">
                                <CardTitle className="text-sm">{card.title}</CardTitle>
                                {card.badge && (
                                  <Badge variant="default" className="text-xs">
                                    {card.badge}
                                  </Badge>
                                )}
                              </div>
                            </div>
                          </CardHeader>
                          <CardContent className="flex-1">
                            <p className="text-muted-foreground">{card.description}</p>
                          </CardContent>
                          <CardFooter>
                            <Button
                              variant="outline"
                              className="w-full"
                              onClick={() => navigate(card.href)}
                            >
                              {t('common.view')}
                            </Button>
                          </CardFooter>
                        </Card>
                      ))}
                </div>
              </SectionErrorBoundary>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}