import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { Label } from '../../ui/label';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '../../ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
import { Badge } from '../../ui/badge';
import { Alert, AlertDescription, AlertTitle } from '../../ui/alert';
import { Checkbox } from '../../ui/checkbox';
import { RadioGroup, RadioGroupItem } from '../../ui/radio-group';
import { Switch } from '../../ui/switch';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
import { Textarea } from '../../ui/textarea';
import { Progress } from '../../ui/progress';
import { Separator } from '../../ui/separator';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../ui/table';
import {
  Settings,
  User,
  Mail,
  Phone,
  Calendar,
  Search,
  Menu,
  ChevronRight,
  Home,
  Users,
  Plus,
  Trash2,
  Archive,
  ArrowRightLeft,
  History,
  PanelRight,
  FileEdit,
  Filter,
  Clock,
  Map,
  Bell,
} from 'lucide-react';
import { Slider } from '../../ui/slider';
import { toast } from 'sonner';
import { ThemeToggle } from '../../brand/theme-toggle';
import { LanguageSelector } from '../../brand/language-selector';
import { MapShowcase } from '../../examples/MapShowcase';
import { Header } from '../../layout/header';
import { Sidebar } from '../../layout/sidebar';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '../../ui/dialog';
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from '../../ui/alert-dialog';
import { PageHeader } from '../../ui/page-header';

import { useOptionalLayout } from '../../../contexts/LayoutContext';
import { useTheme } from '../../../contexts/ThemeContext';
import { useTeamMembers, useDashboardStore } from '../../../features/home';
import { useTranslation } from 'react-i18next';
import { SectionErrorBoundary } from '../../shared/error-boundary';
import { Skeleton } from '../../ui/skeleton';

/**
 * Comprehensive Showcase and Template Content component.
 *
 * @description
 * This component serves as a living kitchen-sink demonstration of the Xertica UI
 * Design System. It showcases almost every UI primitive (Cards, Tabs, Forms,
 * Tables, Dialogs, etc.) and layout variation (Header flexibility, Sidebar
 * toggling). It's primarily used for development, testing, and as a starting
 * point for new pages.
 *
 * @ai-rules
 * 1. Reference: Use this component as the primary source of truth for "how to compose" complex layouts in this library.
 * 2. Layout: Adjusts its own padding based on the `useLayout` context's sidebar state.
 * 3. Interaction: All showcase interactive elements (buttons, forms) use simple `toast` feedback or local state toggles.
 */
export function TemplateContent() {
  const { t } = useTranslation();
  const layout = useOptionalLayout();
  const { disableDarkMode } = useTheme();
  const [localSidebarExpanded, setLocalSidebarExpanded] = useState(false);
  const [localSidebarWidth, setLocalSidebarWidth] = useState(280);
  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
  const sidebarWidth = layout?.sidebarWidth ?? localSidebarWidth;
  const setSidebarWidth = layout?.setSidebarWidth ?? setLocalSidebarWidth;
  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
  const navigate = useNavigate();

  // Server state
  const { data: teamMembers = [], isLoading: teamLoading } = useTeamMembers();

  // Client-side UI state (Zustand)
  const progress = useDashboardStore(s => s.progress);
  const setProgress = useDashboardStore(s => s.setProgress);
  const sliderValue = useDashboardStore(s => s.sliderValue);
  const setSliderValue = useDashboardStore(s => s.setSliderValue);
  const switchEnabled = useDashboardStore(s => s.switchEnabled);
  const toggleSwitch = useDashboardStore(s => s.toggleSwitch);

  // Local UI-only toggles (no global relevance)
  const [showSidebarUser, setShowSidebarUser] = useState(true);
  const [showSidebarSettings, setShowSidebarSettings] = useState(true);
  const [showSidebarLogout, setShowSidebarLogout] = useState(true);

  // Header State
  const [showHeaderActions, setShowHeaderActions] = useState(true);
  const [showHeaderBreadcrumbs, setShowHeaderBreadcrumbs] = useState(true);

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    toast.success(t('templates.formSubmitSuccess'));
  };

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

      {/* Content area */}
      <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">
              {/* Page header */}
              <PageHeader title={t('templates.title')} subtitle={t('templates.subtitle')} />

              {/* Page Header Example */}
              <section>
                <h3 className="mb-4">{t('templates.headerWithBreadcrumbs.sectionTitle')}</h3>
                <Card>
                  <CardHeader>
                    <CardTitle>{t('templates.headerWithBreadcrumbs.cardTitle')}</CardTitle>
                    <CardDescription>
                      {t('templates.headerWithBreadcrumbs.cardDescription')}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="p-0 border-t bg-background overflow-hidden rounded-b-[var(--radius-lg)]">
                    <Header
                      className="border-b"
                      breadcrumbs={[
                        {
                          label: t('templates.headerWithBreadcrumbs.breadcrumbs.dashboard'),
                          href: '#',
                          icon: <Home className="w-4 h-4" />,
                        },
                        {
                          label: t('templates.headerWithBreadcrumbs.breadcrumbs.settings'),
                          href: '#',
                          icon: <Settings className="w-4 h-4" />,
                        },
                        {
                          label: t('templates.headerWithBreadcrumbs.breadcrumbs.users'),
                          href: '#',
                          icon: <Users className="w-4 h-4" />,
                        },
                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.accessProfile') },
                      ]}
                      showLanguageSelector={true}
                      showThemeToggle={true}
                    />
                    <div className="p-6 min-h-[200px]">
                      <h4 className="text-lg font-semibold mb-2">
                        {t('templates.headerWithBreadcrumbs.exampleContentTitle')}
                      </h4>
                      <p className="text-muted-foreground">
                        {t('templates.headerWithBreadcrumbs.exampleContentDescriptionPart1')}
                        <strong>Header</strong>
                        {t('templates.headerWithBreadcrumbs.exampleContentDescriptionPart2')}
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </section>

              <Separator className="my-8" />

              {/* Alert Examples */}
              <section>
                <h3 className="mb-4">{t('templates.sections.alerts')}</h3>
                <div className="grid gap-4 md:grid-cols-2">
                  <Alert variant="info">
                    <AlertTitle>{t('templates.alerts.infoTitle')}</AlertTitle>
                    <AlertDescription>{t('templates.alerts.infoDescription')}</AlertDescription>
                  </Alert>

                  <Alert variant="destructive">
                    <AlertTitle>{t('templates.alerts.errorTitle')}</AlertTitle>
                    <AlertDescription>{t('templates.alerts.errorDescription')}</AlertDescription>
                  </Alert>

                  <Alert variant="success">
                    <AlertTitle>{t('templates.alerts.successTitle')}</AlertTitle>
                    <AlertDescription>{t('templates.alerts.successDescription')}</AlertDescription>
                  </Alert>

                  <Alert variant="warning">
                    <AlertTitle>{t('templates.alerts.warningTitle')}</AlertTitle>
                    <AlertDescription>{t('templates.alerts.warningDescription')}</AlertDescription>
                  </Alert>
                </div>
              </section>

              <Separator className="my-8" />

              {/* Cards & Tabs */}
              <section>
                <h3 className="mb-4">{t('templates.sections.cardsAndTabs')}</h3>

                <Tabs defaultValue="overview" className="w-full">
                  <TabsList className="grid w-full grid-cols-4">
                    <TabsTrigger value="overview">{t('templates.tabs.overview')}</TabsTrigger>
                    <TabsTrigger value="forms">{t('templates.tabs.forms')}</TabsTrigger>
                    <TabsTrigger value="data">{t('templates.tabs.data')}</TabsTrigger>
                    <TabsTrigger value="settings">{t('templates.tabs.settings')}</TabsTrigger>
                  </TabsList>

                  {/* Overview Tab */}
                  <TabsContent value="overview" className="space-y-4">
                    <div className="grid gap-4 md:grid-cols-3">
                      <Card>
                        <CardHeader>
                          <CardTitle>{t('stats.totalUsers')}</CardTitle>
                          <CardDescription>{t('stats.last30Days')}</CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="text-foreground">
                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
                              1,234
                            </span>
                            <Badge variant="default" className="ml-2">
                              +12%
                            </Badge>
                          </div>
                        </CardContent>
                      </Card>

                      <Card>
                        <CardHeader>
                          <CardTitle>{t('stats.totalRevenue')}</CardTitle>
                          <CardDescription>{t('stats.currentMonth')}</CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="text-foreground">
                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
                              $ 45.2k
                            </span>
                            <Badge variant="secondary" className="ml-2">
                              +8%
                            </Badge>
                          </div>
                        </CardContent>
                      </Card>

                      <Card>
                        <CardHeader>
                          <CardTitle>{t('stats.conversionRate')}</CardTitle>
                          <CardDescription>{t('stats.currentWeek')}</CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="text-foreground">
                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
                              3.2%
                            </span>
                            <Badge variant="outline" className="ml-2">
                              -2%
                            </Badge>
                          </div>
                        </CardContent>
                      </Card>
                    </div>

                    <Card>
                      <CardHeader>
                        <CardTitle>{t('templates.overview.progressTitle')}</CardTitle>
                        <CardDescription>
                          {t('templates.overview.progressDescription')}
                        </CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-6">
                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <Label>{t('templates.overview.projectProgress')}</Label>
                            <span className="[font-size:var(--text-small)] text-muted-foreground">
                              {progress}%
                            </span>
                          </div>
                          <Progress value={progress} className="w-full" />
                          <div className="flex gap-2">
                            <Button
                              size="sm"
                              onClick={() => setProgress(Math.max(0, progress - 10))}
                            >
                              -10%
                            </Button>
                            <Button
                              size="sm"
                              onClick={() => setProgress(Math.min(100, progress + 10))}
                            >
                              +10%
                            </Button>
                          </div>
                        </div>

                        <Separator />

                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <Label>{t('templates.overview.volume')}</Label>
                            <span className="[font-size:var(--text-small)] text-muted-foreground">
                              {sliderValue[0]}%
                            </span>
                          </div>
                          <Slider
                            value={sliderValue}
                            onValueChange={setSliderValue}
                            min={0}
                            max={100}
                            step={1}
                            className="w-full"
                            aria-label={t('templates.overview.volume')}
                          />
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>

                  {/* Forms Tab */}
                  <TabsContent value="forms" className="space-y-4">
                    <Card>
                      <CardHeader>
                        <CardTitle>{t('templates.forms.registrationTitle')}</CardTitle>
                        <CardDescription>
                          {t('templates.forms.registrationDescription')}
                        </CardDescription>
                      </CardHeader>
                      <CardContent>
                        <form onSubmit={handleFormSubmit} className="space-y-4">
                          <div className="grid gap-4 md:grid-cols-2">
                            <div className="space-y-2">
                              <Label htmlFor="firstName">{t('templates.forms.firstName')}</Label>
                              <Input
                                id="firstName"
                                placeholder={t('templates.forms.firstNamePlaceholder')}
                              />
                            </div>
                            <div className="space-y-2">
                              <Label htmlFor="lastName">{t('templates.forms.lastName')}</Label>
                              <Input
                                id="lastName"
                                placeholder={t('templates.forms.lastNamePlaceholder')}
                              />
                            </div>
                          </div>

                          <div className="space-y-2">
                            <Label htmlFor="email">{t('templates.forms.email')}</Label>
                            <div className="relative">
                              <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                              <Input
                                id="email"
                                type="email"
                                placeholder={t('templates.forms.emailPlaceholder')}
                                className="pl-10"
                              />
                            </div>
                          </div>

                          <div className="space-y-2">
                            <Label htmlFor="phone">{t('templates.forms.phone')}</Label>
                            <div className="relative">
                              <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                              <Input
                                id="phone"
                                type="tel"
                                placeholder={t('templates.forms.phonePlaceholder')}
                                className="pl-10"
                              />
                            </div>
                          </div>

                          <div className="space-y-2">
                            <Label htmlFor="role">{t('templates.forms.role')}</Label>
                            <Select>
                              <SelectTrigger id="role">
                                <SelectValue placeholder={t('templates.forms.rolePlaceholder')} />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="developer">
                                  {t('templates.forms.roles.developer')}
                                </SelectItem>
                                <SelectItem value="designer">
                                  {t('templates.forms.roles.designer')}
                                </SelectItem>
                                <SelectItem value="manager">
                                  {t('templates.forms.roles.manager')}
                                </SelectItem>
                                <SelectItem value="analyst">
                                  {t('templates.forms.roles.analyst')}
                                </SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

                          <div className="space-y-2">
                            <Label htmlFor="bio">{t('templates.forms.bio')}</Label>
                            <Textarea
                              id="bio"
                              placeholder={t('templates.forms.bioPlaceholder')}
                              rows={4}
                            />
                          </div>

                          <Separator />

                          <div className="space-y-4">
                            <h4>{t('templates.forms.preferences')}</h4>

                            <div className="space-y-3">
                              <div className="flex items-center space-x-2">
                                <Checkbox id="newsletter" />
                                <Label htmlFor="newsletter" className="font-normal">
                                  {t('templates.forms.newsletter')}
                                </Label>
                              </div>

                              <div className="flex items-center space-x-2">
                                <Checkbox id="notifications" />
                                <Label htmlFor="notifications" className="font-normal">
                                  {t('templates.forms.pushNotifications')}
                                </Label>
                              </div>

                              <div className="flex items-center space-x-2">
                                <Checkbox id="updates" />
                                <Label htmlFor="updates" className="font-normal">
                                  {t('templates.forms.featureUpdates')}
                                </Label>
                              </div>
                            </div>

                            <Separator />

                            <div className="space-y-3">
                              <Label>{t('templates.forms.accountType')}</Label>
                              <RadioGroup
                                defaultValue="personal"
                                aria-label={t('templates.forms.accountType')}
                              >
                                <div className="flex items-center space-x-2">
                                  <RadioGroupItem value="personal" id="personal" />
                                  <Label htmlFor="personal" className="font-normal">
                                    {t('templates.forms.accountPersonal')}
                                  </Label>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <RadioGroupItem value="business" id="business" />
                                  <Label htmlFor="business" className="font-normal">
                                    {t('templates.forms.accountBusiness')}
                                  </Label>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <RadioGroupItem value="enterprise" id="enterprise" />
                                  <Label htmlFor="enterprise" className="font-normal">
                                    {t('templates.forms.accountEnterprise')}
                                  </Label>
                                </div>
                              </RadioGroup>
                            </div>
                          </div>
                        </form>
                      </CardContent>
                      <CardFooter className="flex justify-between">
                        <Button variant="outline">{t('templates.forms.cancel')}</Button>
                        <Button onClick={handleFormSubmit}>
                          {t('templates.forms.createAccount')}
                        </Button>
                      </CardFooter>
                    </Card>
                  </TabsContent>

                  {/* Data Tab */}
                  <TabsContent value="data" className="space-y-4">
                    <SectionErrorBoundary>
                      <Card>
                        <CardHeader>
                          <CardTitle>{t('templates.data.title')}</CardTitle>
                          <CardDescription>{t('templates.data.description')}</CardDescription>
                        </CardHeader>
                        <CardContent>
                          <div className="mb-4">
                            <div className="relative">
                              <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                              <Input
                                placeholder={t('templates.data.searchPlaceholder')}
                                aria-label={t('templates.data.searchPlaceholder')}
                                className="pl-10"
                              />
                            </div>
                          </div>

                          <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
                            <Table>
                              <TableHeader>
                                <TableRow>
                                  <TableHead>{t('team.name')}</TableHead>
                                  <TableHead>{t('team.email')}</TableHead>
                                  <TableHead>{t('team.role')}</TableHead>
                                  <TableHead>{t('team.status')}</TableHead>
                                  <TableHead className="text-right">{t('team.actions')}</TableHead>
                                </TableRow>
                              </TableHeader>
                              <TableBody>
                                {teamLoading ? (
                                  <>
                                    {Array.from({ length: 5 }).map((_, i) => (
                                      <TableRow key={i}>
                                        <TableCell>
                                          <div className="flex items-center gap-2">
                                            <Skeleton className="size-8 rounded-full shrink-0" />
                                            <Skeleton className="h-3.5 w-28" />
                                          </div>
                                        </TableCell>
                                        <TableCell>
                                          <Skeleton className="h-3.5 w-36" />
                                        </TableCell>
                                        <TableCell>
                                          <Skeleton className="h-3.5 w-20" />
                                        </TableCell>
                                        <TableCell>
                                          <Skeleton className="h-5 w-16 rounded-full" />
                                        </TableCell>
                                        <TableCell className="text-right">
                                          <Skeleton className="h-7 w-14 ml-auto" />
                                        </TableCell>
                                      </TableRow>
                                    ))}
                                  </>
                                ) : (
                                  teamMembers.map(member => (
                                    <TableRow key={member.id}>
                                      <TableCell>{member.name}</TableCell>
                                      <TableCell>{member.email}</TableCell>
                                      <TableCell>{t(`team.roles.${member.role}`)}</TableCell>
                                      <TableCell>
                                        <Badge
                                          variant={
                                            member.status === 'active'
                                              ? 'default'
                                              : member.status === 'away'
                                                ? 'secondary'
                                                : 'outline'
                                          }
                                        >
                                          {t(`common.${member.status}`)}
                                        </Badge>
                                      </TableCell>
                                      <TableCell className="text-right">
                                        <Button variant="ghost" size="sm">
                                          {t('common.edit')}
                                        </Button>
                                      </TableCell>
                                    </TableRow>
                                  ))
                                )}
                              </TableBody>
                            </Table>
                          </div>
                        </CardContent>
                        <CardFooter className="flex justify-between items-center">
                          <p className="text-muted-foreground">
                            {t('team.showing', {
                              count: teamMembers.length,
                              total: teamMembers.length,
                            })}
                          </p>
                          <div className="flex gap-2">
                            <Button variant="outline" size="sm">
                              {t('common.previous')}
                            </Button>
                            <Button variant="outline" size="sm">
                              {t('common.next')}
                            </Button>
                          </div>
                        </CardFooter>
                      </Card>
                    </SectionErrorBoundary>
                  </TabsContent>

                  {/* Settings Tab */}
                  <TabsContent value="settings" className="space-y-4">
                    <Card>
                      <CardHeader>
                        <CardTitle>{t('templates.settings.title')}</CardTitle>
                        <CardDescription>{t('templates.settings.description')}</CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-6">
                        {!disableDarkMode && (
                          <>
                            <div className="flex items-center justify-between">
                              <div className="space-y-1">
                                <Label htmlFor="dark-mode">
                                  {t('templates.settings.darkMode')}
                                </Label>
                                <p className="text-muted-foreground">
                                  {t('templates.settings.darkModeDescription')}
                                </p>
                              </div>
                              <Switch
                                id="dark-mode"
                                checked={switchEnabled}
                                onCheckedChange={toggleSwitch}
                              />
                            </div>

                            <Separator />
                          </>
                        )}

                        <div className="flex items-center justify-between">
                          <div className="space-y-1">
                            <Label htmlFor="email-notifications">
                              {t('templates.settings.emailNotifications')}
                            </Label>
                            <p className="text-muted-foreground">
                              {t('templates.settings.emailNotificationsDescription')}
                            </p>
                          </div>
                          <Switch id="email-notifications" defaultChecked />
                        </div>

                        <Separator />

                        <div className="flex items-center justify-between">
                          <div className="space-y-1">
                            <Label htmlFor="push-notifications">
                              {t('templates.settings.pushNotifications')}
                            </Label>
                            <p className="text-muted-foreground">
                              {t('templates.settings.pushNotificationsDescription')}
                            </p>
                          </div>
                          <Switch id="push-notifications" />
                        </div>

                        <Separator />

                        <div className="space-y-3">
                          <Label>{t('templates.settings.language')}</Label>
                          <Select defaultValue="pt-br">
                            <SelectTrigger aria-label={t('templates.settings.language')}>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="pt-br">
                                {t('templates.settings.languages.ptBR')}
                              </SelectItem>
                              <SelectItem value="en">
                                {t('templates.settings.languages.en')}
                              </SelectItem>
                              <SelectItem value="es">
                                {t('templates.settings.languages.es')}
                              </SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <Separator />

                        <div className="space-y-3">
                          <Label>{t('templates.settings.timezone')}</Label>
                          <Select defaultValue="america-sao-paulo">
                            <SelectTrigger aria-label={t('templates.settings.timezone')}>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="america-sao-paulo">
                                {t('templates.settings.timezones.saoPaulo')}
                              </SelectItem>
                              <SelectItem value="america-new-york">
                                {t('templates.settings.timezones.newYork')}
                              </SelectItem>
                              <SelectItem value="europe-london">
                                {t('templates.settings.timezones.london')}
                              </SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </CardContent>
                      <CardFooter className="flex justify-between">
                        <Button variant="outline">{t('templates.settings.restoreDefaults')}</Button>
                        <Button>{t('templates.settings.saveChanges')}</Button>
                      </CardFooter>
                    </Card>
                  </TabsContent>
                </Tabs>
              </section>

              <Separator className="my-8" />

              {/* Button Variants */}
              <section>
                <h3 className="mb-4">{t('templates.sections.buttons')}</h3>
                <Card>
                  <CardHeader>
                    <CardTitle>{t('templates.buttons.title')}</CardTitle>
                    <CardDescription>{t('templates.buttons.description')}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="space-y-3">
                      <Label>{t('templates.buttons.variants')}</Label>
                      <div className="flex flex-wrap gap-3">
                        <Button variant="default">Default</Button>
                        <Button variant="secondary">Secondary</Button>
                        <Button variant="outline">Outline</Button>
                        <Button variant="ghost">Ghost</Button>
                        <Button variant="link">Link</Button>
                        <Button variant="destructive">Destructive</Button>
                      </div>
                    </div>

                    <Separator />

                    <div className="space-y-3">
                      <Label>{t('templates.buttons.sizes')}</Label>
                      <div className="flex flex-wrap items-center gap-3">
                        <Button size="sm">Small</Button>
                        <Button size="default">Default</Button>
                        <Button size="lg">Large</Button>
                        <Button size="icon" aria-label={t('nav.settings')}>
                          <Settings className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>

                    <Separator />

                    <div className="space-y-3">
                      <Label>{t('templates.buttons.withIcons')}</Label>
                      <div className="flex flex-wrap gap-3">
                        <Button>
                          <User className="mr-2 h-4 w-4" />
                          {t('templates.buttons.profile')}
                        </Button>
                        <Button variant="secondary">
                          <Mail className="mr-2 h-4 w-4" />
                          {t('templates.buttons.messages')}
                        </Button>
                        <Button variant="outline">
                          <Calendar className="mr-2 h-4 w-4" />
                          {t('templates.buttons.schedule')}
                        </Button>
                      </div>
                    </div>

                    <Separator />

                    <div className="space-y-3">
                      <Label>{t('templates.buttons.states')}</Label>
                      <div className="flex flex-wrap gap-3">
                        <Button disabled>{t('templates.buttons.disabled')}</Button>
                        <Button variant="outline" disabled>
                          {t('templates.buttons.outlineDisabled')}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </section>

              <Separator className="my-8" />

              {/* Badges */}
              <section>
                <h3 className="mb-4">{t('templates.sections.badges')}</h3>
                <Card>
                  <CardHeader>
                    <CardTitle>{t('templates.badges.title')}</CardTitle>
                    <CardDescription>{t('templates.badges.description')}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-wrap gap-3">
                      <Badge variant="default">Default</Badge>
                      <Badge variant="secondary">Secondary</Badge>
                      <Badge variant="outline">Outline</Badge>
                      <Badge variant="destructive">Destructive</Badge>
                      <Badge className="bg-success text-success-foreground">Success</Badge>
                      <Badge className="bg-warning text-warning-foreground">Warning</Badge>
                      <Badge className="bg-info text-info-foreground">Info</Badge>
                    </div>
                  </CardContent>
                </Card>
              </section>

              <Separator className="my-8" />

              {/* Dialogs */}
              <section>
                <h3 className="mb-4">{t('templates.sections.dialogs')}</h3>
                <div className="grid gap-4 md:grid-cols-2">
                  <Card>
                    <CardHeader>
                      <CardTitle>{t('templates.dialogs.dialogTitle')}</CardTitle>
                      <CardDescription>{t('templates.dialogs.dialogDescription')}</CardDescription>
                    </CardHeader>
                    <CardContent className="flex justify-center py-6">
                      <Dialog>
                        <DialogTrigger asChild>
                          <Button variant="outline">{t('templates.dialogs.editProfile')}</Button>
                        </DialogTrigger>
                        <DialogContent className="sm:max-w-[425px]">
                          <DialogHeader>
                            <DialogTitle>{t('templates.dialogs.editProfile')}</DialogTitle>
                            <DialogDescription>
                              {t('templates.dialogs.editProfileDescription')}
                            </DialogDescription>
                          </DialogHeader>
                          <div className="grid gap-4 py-4">
                            <div className="grid grid-cols-4 items-center gap-4">
                              <Label htmlFor="name" className="text-right">
                                {t('templates.dialogs.name')}
                              </Label>
                              <Input id="name" defaultValue="John Doe" className="col-span-3" />
                            </div>
                            <div className="grid grid-cols-4 items-center gap-4">
                              <Label htmlFor="username" className="text-right">
                                {t('templates.dialogs.username')}
                              </Label>
                              <Input id="username" defaultValue="@johndoe" className="col-span-3" />
                            </div>
                          </div>
                          <DialogFooter>
                            <Button type="submit">{t('templates.dialogs.update')}</Button>
                          </DialogFooter>
                        </DialogContent>
                      </Dialog>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle>{t('templates.dialogs.alertDialogTitle')}</CardTitle>
                      <CardDescription>
                        {t('templates.dialogs.alertDialogDescription')}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="flex justify-center py-6">
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="destructive">
                            {t('templates.dialogs.deleteAccount')}
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent className="sm:max-w-[425px]">
                          <AlertDialogHeader>
                            <AlertDialogTitle>{t('templates.dialogs.areYouSure')}</AlertDialogTitle>
                            <AlertDialogDescription>
                              {t('templates.dialogs.deleteWarning')}
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>{t('templates.dialogs.cancel')}</AlertDialogCancel>
                            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
                              {t('templates.dialogs.continue')}
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </CardContent>
                  </Card>
                </div>
              </section>

              <Separator className="my-8" />

              {/* Maps */}
              <section>
                <MapShowcase />
              </section>

              <Separator className="my-8" />

              {/* Header Variations */}
              <section>
                <h3 className="mb-4">{t('templates.headerVariations.sectionTitle')}</h3>
                <Card>
                  <CardHeader>
                    <CardTitle>{t('templates.headerVariations.cardTitle')}</CardTitle>
                    <CardDescription>
                      {t('templates.headerVariations.cardDescription')}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="p-4 border rounded-[var(--radius-lg)] bg-muted/30">
                      <h4 className="text-sm font-semibold mb-4">
                        {t('templates.headerVariations.visibleElements')}
                      </h4>
                      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                        <div className="flex items-center space-x-2">
                          <Switch
                            id="header-actions"
                            checked={showHeaderActions}
                            onCheckedChange={setShowHeaderActions}
                          />
                          <Label htmlFor="header-actions" className="cursor-pointer">
                            {t('templates.headerVariations.actionButtons')}
                          </Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Switch
                            id="header-bread"
                            checked={showHeaderBreadcrumbs}
                            onCheckedChange={setShowHeaderBreadcrumbs}
                          />
                          <Label htmlFor="header-bread" className="cursor-pointer">
                            {t('templates.headerVariations.breadcrumbsLabel')}
                          </Label>
                        </div>
                      </div>
                    </div>

                    <div className="relative border rounded-[var(--radius-lg)] bg-muted/10 overflow-hidden shadow-inner">
                      <div className="p-4 bg-background/50 border-b text-xs font-mono text-muted-foreground">
                        {t('templates.headerVariations.preview')}
                      </div>
                      <Header
                        title={
                          !showHeaderBreadcrumbs
                            ? t('templates.headerVariations.currentPage')
                            : undefined
                        }
                        breadcrumbs={
                          showHeaderBreadcrumbs
                            ? [
                                {
                                  label: t('templates.headerVariations.breadcrumbBrand'),
                                  href: '#',
                                  icon: <Home className="w-4 h-4" />,
                                },
                                {
                                  label: t('templates.headerVariations.breadcrumbSettings'),
                                  href: '#',
                                },
                                { label: t('templates.headerVariations.breadcrumbProfile') },
                              ]
                            : undefined
                        }
                        actions={
                          showHeaderActions
                            ? [
                                {
                                  id: 'notify',
                                  icon: <Bell className="w-5 h-5" />,
                                  onClick: () =>
                                    toast(t('templates.headerVariations.notificationsOpenedToast')),
                                },
                                {
                                  id: 'mail',
                                  label: t('templates.headerVariations.messagesLabel'),
                                  icon: <Mail className="w-5 h-5" />,
                                  onClick: () =>
                                    toast(t('templates.headerVariations.messagesOpenedToast')),
                                },
                              ]
                            : undefined
                        }
                      />
                      <div className="h-32 flex items-center justify-center text-muted-foreground text-sm italic">
                        {t('templates.headerVariations.contentArea')}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </section>

              <Separator className="my-8" />

              {/* Sidebar Variations */}
              <section>
                <h3 className="mb-4">{t('templates.sections.sidebarVariations')}</h3>
                <Card>
                  <CardHeader>
                    <CardTitle>{t('templates.sidebar.title')}</CardTitle>
                    <CardDescription>{t('templates.sidebar.description')}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Tabs defaultValue="assistant" className="w-full">
                      <TabsList className="mb-4">
                        <TabsTrigger value="assistant">
                          {t('templates.sidebar.assistantMode')}
                        </TabsTrigger>
                        <TabsTrigger value="default">
                          {t('templates.sidebar.defaultMode')}
                        </TabsTrigger>
                      </TabsList>

                      <div className="mb-6 p-4 border rounded-[var(--radius-lg)] bg-muted/30">
                        <h4 className="text-sm font-semibold mb-4">
                          {t('templates.sidebarControls.footerSettings')}
                        </h4>
                        <div className="flex flex-wrap gap-6 mt-2">
                          <div className="flex items-center space-x-2">
                            <Switch
                              id="show-user"
                              checked={showSidebarUser}
                              onCheckedChange={setShowSidebarUser}
                            />
                            <Label htmlFor="show-user" className="cursor-pointer">
                              {t('templates.sidebarControls.userProfile')}
                            </Label>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Switch
                              id="show-settings"
                              checked={showSidebarSettings}
                              onCheckedChange={setShowSidebarSettings}
                            />
                            <Label htmlFor="show-settings" className="cursor-pointer">
                              {t('templates.sidebarControls.settings')}
                            </Label>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Switch
                              id="show-logout"
                              checked={showSidebarLogout}
                              onCheckedChange={setShowSidebarLogout}
                            />
                            <Label htmlFor="show-logout" className="cursor-pointer">
                              {t('templates.sidebarControls.logoutButton')}
                            </Label>
                          </div>
                        </div>

                        <div className="mt-6 pt-6 border-t">
                          <div className="flex items-center justify-between mb-4">
                            <h4 className="text-sm font-semibold">
                              {t('templates.sidebarControls.sidebarWidthDesktop')}
                            </h4>
                            <span className="text-xs font-mono bg-muted px-2 py-1 rounded">
                              {sidebarWidth}px
                            </span>
                          </div>
                          <div className="flex items-center gap-4">
                            <span className="text-xs text-muted-foreground w-12 text-right">
                              240px
                            </span>
                            <Slider
                              value={[sidebarWidth]}
                              onValueChange={val => setSidebarWidth(val[0])}
                              min={240}
                              max={450}
                              step={10}
                              className="flex-1"
                              aria-label={t('templates.sidebarControls.sidebarWidthAriaLabel')}
                            />
                            <span className="text-xs text-muted-foreground w-12">450px</span>
                          </div>
                        </div>
                      </div>

                      <TabsContent value="assistant">
                        <div
                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
                          style={{ transform: 'translateZ(0)' }}
                        >
                          <Sidebar
                            expanded={true}
                            width={sidebarWidth}
                            onToggle={() => {}}
                            user={{ email: 'admin@xertica.com' }}
                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
                            location={{ pathname: '/assistant/current' }}
                            navigate={() => {}}
                            variant="assistant"
                            search={{
                              show: true,
                              placeholder: t('templates.sidebar.searchTopicsPlaceholder'),
                              filter: {
                                show: true,
                                content: (
                                  <div className="p-2 space-y-2">
                                    <div className="text-xs font-semibold uppercase text-muted-foreground px-2">
                                      {t('templates.sidebarControls.filterByStatus')}
                                    </div>
                                    <div className="flex flex-wrap gap-2 p-1">
                                      <Badge className="bg-sidebar-foreground/20 text-sidebar-foreground border-none cursor-pointer hover:bg-sidebar-foreground/30">
                                        {t('templates.sidebarControls.filterActive')}
                                      </Badge>
                                      <Badge
                                        variant="outline"
                                        className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
                                      >
                                        {t('templates.sidebarControls.filterArchived')}
                                      </Badge>
                                      <Badge
                                        variant="outline"
                                        className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
                                      >
                                        {t('templates.sidebarControls.filterPending')}
                                      </Badge>
                                    </div>
                                  </div>
                                ),
                              },
                            }}
                            fixedArea={{
                              show: true,
                              content: (
                                <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
                                  <Plus className="w-4 h-4 mr-2" />
                                  {t('templates.sidebar.newConversation')}
                                </Button>
                              ),
                            }}
                            navigationGroups={[
                              {
                                id: 'recent',
                                label: t('templates.sidebar.recent'),
                                icon: Clock,
                                items: [
                                  {
                                    path: '/assistant/refatoracao',
                                    label: t('templates.sidebar.items.sidebarRefactor'),
                                    description: t(
                                      'templates.sidebar.items.sidebarRefactorDescription'
                                    ),
                                    actions: [
                                      {
                                        label: t('templates.sidebar.actions.rename'),
                                        icon: FileEdit,
                                        onClick: () =>
                                          toast(t('templates.sidebar.actions.renameToast')),
                                      },
                                      {
                                        label: t('templates.sidebar.actions.move'),
                                        icon: ArrowRightLeft,
                                        children: [
                                          {
                                            label: t('templates.sidebar.actions.moveActive'),
                                            onClick: () =>
                                              toast(t('templates.sidebar.actions.moveActiveToast')),
                                          },
                                          {
                                            label: t('templates.sidebar.actions.moveMonitoring'),
                                            onClick: () =>
                                              toast(
                                                t('templates.sidebar.actions.moveMonitoringToast')
                                              ),
                                          },
                                          {
                                            label: t('templates.sidebar.actions.moveArchive'),
                                            onClick: () =>
                                              toast(
                                                t('templates.sidebar.actions.moveArchiveToast')
                                              ),
                                          },
                                        ],
                                      },
                                      {
                                        label: t('templates.sidebar.actions.clear'),
                                        icon: Trash2,
                                        onClick: () =>
                                          toast(t('templates.sidebar.actions.clearToast')),
                                        variant: 'destructive',
                                      },
                                    ],
                                  },
                                ],
                              },
                              {
                                id: 'projects',
                                label: t('templates.sidebar.constructionMonitoring'),
                                icon: Map,
                                actions: [
                                  {
                                    label: t('templates.sidebar.actions.newCategory'),
                                    icon: Plus,
                                    onClick: () =>
                                      toast(t('templates.sidebar.actions.newCategoryToast')),
                                  },
                                  {
                                    label: t('templates.sidebar.actions.archiveGroup'),
                                    icon: Archive,
                                    onClick: () =>
                                      toast(t('templates.sidebar.actions.archiveGroupToast')),
                                  },
                                ],
                                items: [
                                  {
                                    path: '/assistant/br163',
                                    label: t('templates.sidebar.items.br163Restoration'),
                                    icon: () => (
                                      <div className="w-2 h-2 rounded-full bg-yellow-500" />
                                    ),
                                    description: (
                                      <div className="space-y-1.5 min-w-[160px]">
                                        <Progress
                                          value={67}
                                          className="h-1.5 bg-sidebar-foreground/10"
                                        />
                                        <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
                                          <span>{t('templates.sidebar.items.br163Location')}</span>
                                          <span>67%</span>
                                        </div>
                                      </div>
                                    ),
                                  },
                                ],
                              },
                            ]}
                            footer={{
                              showUser: showSidebarUser,
                              showSettings: showSidebarSettings,
                              showLogout: showSidebarLogout,
                            }}
                          />
                          <div
                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
                            style={{ left: `${sidebarWidth}px` }}
                          >
                            <p className="text-muted-foreground text-center">
                              {t('templates.sidebar.assistantContent')}
                            </p>
                          </div>
                        </div>
                      </TabsContent>

                      <TabsContent value="default">
                        <div
                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
                          style={{ transform: 'translateZ(0)' }}
                        >
                          <Sidebar
                            expanded={true}
                            width={sidebarWidth}
                            onToggle={() => {}}
                            user={{
                              name: 'Ariel Santos',
                              email: 'admin@xertica.com',
                              avatar: 'https://github.com/shadcn.png',
                            }}
                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
                            onSettingsClick={() =>
                              toast(t('templates.sidebar.settingsClickedToast'))
                            }
                            location={{ pathname: '/home' }}
                            navigate={() => {}}
                            variant="default"
                            routes={[
                              {
                                path: '/home',
                                label: t('templates.sidebar.routes.home'),
                                icon: Home,
                              },
                              {
                                path: '/dashboard',
                                label: t('templates.sidebar.routes.dashboard'),
                                icon: Users,
                              },
                              {
                                path: '/settings',
                                label: t('templates.sidebar.routes.settings'),
                                icon: Settings,
                              },
                            ]}
                            footer={{
                              showUser: showSidebarUser,
                              showSettings: showSidebarSettings,
                              showLogout: showSidebarLogout,
                            }}
                          />
                          <div
                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
                            style={{ left: `${sidebarWidth}px` }}
                          >
                            <p className="text-muted-foreground text-center">
                              {t('templates.sidebar.defaultContent')}
                            </p>
                          </div>
                        </div>
                      </TabsContent>
                    </Tabs>
                  </CardContent>
                </Card>
              </section>

              <Separator className="my-8" />

              {/* Footer Note */}
              <Card className="mt-8">
                <CardHeader>
                  <CardTitle>{t('templates.footer.title')}</CardTitle>
                  <CardDescription>{t('templates.footer.subtitle')}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-muted-foreground">
                    {t('templates.footer.descriptionPart1')}
                    <code className="bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]">
                      xertica-ui
                    </code>
                    {t('templates.footer.descriptionPart2')}
                  </p>
                  <Alert variant="info">
                    <AlertTitle>{t('templates.footer.tipTitle')}</AlertTitle>
                    <AlertDescription>
                      {t('templates.footer.tipDescriptionPart1')}
                      <code className="bg-muted px-1 rounded">styles/xertica/tokens.css</code>
                      {t('templates.footer.tipDescriptionPart2')}
                    </AlertDescription>
                  </Alert>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}