import React from 'react';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../../ui/card';
import { Header } from '../../layout/header';
import { Button } from '../../ui/button';
import { FileText } from 'lucide-react';
import { useLocation, useNavigate, Link } from 'react-router-dom';
import { Badge } from '../../ui/badge';
import { PageHeader } from '../../ui/page-header';
import { useOptionalLayout } from '../../../contexts/LayoutContext';
import { SIDEBAR_EXPANDED_WIDTH, SIDEBAR_COLLAPSED_WIDTH } from '../../shared/layout-constants';
import { useFeatureCards } from '../../../features/home';
import { useTranslation } from 'react-i18next';
import { SectionErrorBoundary } from '../../shared/error-boundary';
import { FeatureCardSkeleton } from '../../blocks/card-patterns/FeatureCardSkeleton';

/**
 * Main dashboard content area for the landing page.
 *
 * @description
 * Fetches feature cards via `useFeatureCards` (React Query). All UI strings are
 * translated via `useTranslation()` — change language via `LanguageSelector`.
 *
 * @ai-rules
 * 1. Data: Feature cards come from `useFeatureCards()` — never hardcode them here.
 * 2. i18n: Use `t('home.*')` for all UI strings — never hardcode text in JSX.
 * 3. Loading: Renders a skeleton card while the query is in-flight.
 */
export function HomeContent() {
  const { t } = useTranslation();
  const layout = useOptionalLayout();
  const sidebarExpanded = layout?.sidebarExpanded ?? false;
  const sidebarWidth = layout?.sidebarWidth ?? 256;
  const navigate = useNavigate();

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

  return (
    <div
      style={{
        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : SIDEBAR_COLLAPSED_WIDTH,
      }}
      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, props) => <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">
              <PageHeader title={t('home.welcome')} subtitle={t('home.subtitle')} />

              <SectionErrorBoundary>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {isLoading ? (
                    <>
                      <FeatureCardSkeleton showAction />
                      <FeatureCardSkeleton showAction />
                      <FeatureCardSkeleton showAction />
                    </>
                  ) : (
                    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 bg-[var(--chart-2)]/20 rounded-[var(--radius)]">
                              <FileText className="w-6 h-6 text-[var(--chart-2)]" />
                            </div>
                            <div className="flex items-center gap-2">
                              <CardTitle className="text-sm">
                                {t(`home.${card.id.replace(/-/g, '')}Title`, {
                                  defaultValue: card.title,
                                })}
                              </CardTitle>
                              {card.badge && (
                                <Badge variant="default" className="text-xs">
                                  {t(`home.${card.id.replace(/-/g, '')}badge`, {
                                    defaultValue: card.badge,
                                  })}
                                </Badge>
                              )}
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent className="flex-1">
                          <p className="text-muted-foreground">
                            {t(`home.${card.id.replace(/-/g, '')}Description`, {
                              defaultValue: 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>
  );
}