import React, { useState } from 'react';
import {
  Button,
  Input,
  Label,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  Badge,
  Alert,
  AlertDescription,
  AlertTitle,
  Checkbox,
  RadioGroup,
  RadioGroupItem,
  Switch,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Textarea,
  Progress,
  Separator,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  Slider,
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationEllipsis,
  Stepper,
  Step,
  TreeView,
  RichTextEditor,
  usePagination,
  useStepper,
} from 'xertica-ui/ui';
import { Header, Sidebar } from 'xertica-ui/layout';
import { useLayout, useTheme } from 'xertica-ui/hooks';
import { toast } from 'sonner';
import { Link } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import {
  Settings,
  User,
  Mail,
  Phone,
  Calendar,
  Search,
  PanelLeft,
  Home,
  Users,
  Plus,
  Trash2,
  Archive,
  ArrowRightLeft,
  FileEdit,
  Clock,
  Map,
} from 'lucide-react';

export function TemplateContent() {
  const { t } = useTranslation();

  // ── TreeView demo data (built inside the component so labels react to language switches) ──
  const treeData = [
    {
      id: 'components',
      label: t('templates.enhanced.treeView.nodes.components'),
      children: [
        {
          id: 'ui',
          label: t('templates.enhanced.treeView.nodes.ui'),
          children: [
            { id: 'button', label: t('templates.enhanced.treeView.nodes.button') },
            { id: 'input', label: t('templates.enhanced.treeView.nodes.input') },
            { id: 'pagination', label: t('templates.enhanced.treeView.nodes.pagination') },
          ],
        },
        {
          id: 'layout',
          label: t('templates.enhanced.treeView.nodes.layout'),
          children: [
            { id: 'sidebar', label: t('templates.enhanced.treeView.nodes.sidebar') },
            { id: 'header', label: t('templates.enhanced.treeView.nodes.header') },
          ],
        },
      ],
    },
    {
      id: 'hooks',
      label: t('templates.enhanced.treeView.nodes.hooks'),
      // Hook identifiers stay as code — not translated.
      children: [
        { id: 'use-pagination', label: 'usePagination' },
        { id: 'use-stepper', label: 'useStepper' },
        { id: 'use-tree-view', label: 'useTreeView' },
      ],
    },
  ];
  const { sidebarExpanded, sidebarWidth } = useLayout();
  const { disableDarkMode } = useTheme();
  const [progress, setProgress] = useState(45);
  const [sliderValue, setSliderValue] = useState([50]);
  const [switchEnabled, setSwitchEnabled] = useState(false);
  const [richText, setRichText] = useState('');

  // Dialog demo inputs (controlled so they re-localise on language switch).
  // Seeded lazily from `t(...)` so the initial value reflects the current
  // language at first render; subsequent language switches don't overwrite
  // user edits.
  const [dialogName, setDialogName] = useState(() => t('templates.dialogs.nameDefaultValue'));
  const [dialogUsername, setDialogUsername] = useState(() =>
    t('templates.dialogs.usernameDefaultValue')
  );

  // ── Pagination demo ─────────────────────────────────────────────────────────
  const { currentPage, totalPages, items, next, prev, goTo, canGoPrev, canGoNext } = usePagination({
    totalItems: 120,
    pageSize: 10,
  });

  // ── Stepper demo ────────────────────────────────────────────────────────────
  const {
    currentStep,
    next: stepNext,
    prev: stepPrev,
    isFirstStep,
    isLastStep,
  } = useStepper({ totalSteps: 3 });

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

  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('templates.breadcrumb') },
        ]}
        renderLink={(href: string, props: any) => <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>{t('templates.title')}</h2>
                <p className="text-muted-foreground">{t('templates.subtitle')}</p>
              </div>

              {/* 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)]">
                              {t('templates.overview.totalUsersDemoValue')}
                            </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)]">
                              {t('templates.overview.revenueDemoValue')}
                            </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)]">
                              {t('templates.overview.conversionRateDemoValue')}
                            </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"
                          />
                        </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">
                                <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">
                    <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')}
                              className="pl-10"
                            />
                          </div>
                        </div>

                        <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead>{t('templates.data.headers.name')}</TableHead>
                                <TableHead>{t('templates.data.headers.email')}</TableHead>
                                <TableHead>{t('templates.data.headers.role')}</TableHead>
                                <TableHead>{t('templates.data.headers.status')}</TableHead>
                                <TableHead className="text-right">
                                  {t('templates.data.headers.actions')}
                                </TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              <TableRow>
                                <TableCell>Ana Silva</TableCell>
                                <TableCell>{`ana.silva@${t('templates.data.demoEmailDomain')}`}</TableCell>
                                <TableCell>{t('templates.data.roles.developerFemale')}</TableCell>
                                <TableCell>
                                  <Badge variant="default">
                                    {t('templates.data.status.active')}
                                  </Badge>
                                </TableCell>
                                <TableCell className="text-right">
                                  <Button variant="ghost" size="sm">
                                    {t('templates.data.edit')}
                                  </Button>
                                </TableCell>
                              </TableRow>
                              <TableRow>
                                <TableCell>Bruno Costa</TableCell>
                                <TableCell>{`bruno.costa@${t('templates.data.demoEmailDomain')}`}</TableCell>
                                <TableCell>{t('templates.data.roles.designer')}</TableCell>
                                <TableCell>
                                  <Badge variant="default">
                                    {t('templates.data.status.active')}
                                  </Badge>
                                </TableCell>
                                <TableCell className="text-right">
                                  <Button variant="ghost" size="sm">
                                    {t('templates.data.edit')}
                                  </Button>
                                </TableCell>
                              </TableRow>
                              <TableRow>
                                <TableCell>Carla Oliveira</TableCell>
                                <TableCell>{`carla.oliveira@${t('templates.data.demoEmailDomain')}`}</TableCell>
                                <TableCell>{t('templates.data.roles.manager')}</TableCell>
                                <TableCell>
                                  <Badge variant="secondary">
                                    {t('templates.data.status.away')}
                                  </Badge>
                                </TableCell>
                                <TableCell className="text-right">
                                  <Button variant="ghost" size="sm">
                                    {t('templates.data.edit')}
                                  </Button>
                                </TableCell>
                              </TableRow>
                              <TableRow>
                                <TableCell>Diego Santos</TableCell>
                                <TableCell>{`diego.santos@${t('templates.data.demoEmailDomain')}`}</TableCell>
                                <TableCell>{t('templates.data.roles.analyst')}</TableCell>
                                <TableCell>
                                  <Badge variant="outline">
                                    {t('templates.data.status.inactive')}
                                  </Badge>
                                </TableCell>
                                <TableCell className="text-right">
                                  <Button variant="ghost" size="sm">
                                    {t('templates.data.edit')}
                                  </Button>
                                </TableCell>
                              </TableRow>
                            </TableBody>
                          </Table>
                        </div>
                      </CardContent>
                      <CardFooter className="flex justify-between items-center">
                        <p className="text-muted-foreground">
                          {t('templates.data.showing', { count: 4, total: 127 })}
                        </p>
                        <div className="flex gap-2">
                          <Button variant="outline" size="sm">
                            {t('templates.data.previous')}
                          </Button>
                          <Button variant="outline" size="sm">
                            {t('templates.data.next')}
                          </Button>
                        </div>
                      </CardFooter>
                    </Card>
                  </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>{t('templates.settings.darkMode')}</Label>
                                <p className="text-muted-foreground">
                                  {t('templates.settings.darkModeDescription')}
                                </p>
                              </div>
                              <Switch checked={switchEnabled} onCheckedChange={setSwitchEnabled} />
                            </div>

                            <Separator />
                          </>
                        )}

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

                        <Separator />

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

                        <Separator />

                        <div className="space-y-3">
                          <Label>{t('templates.settings.language')}</Label>
                          <Select defaultValue="pt-br">
                            <SelectTrigger>
                              <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>
                              <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">
                          {t('templates.buttons.variantLabels.default')}
                        </Button>
                        <Button variant="secondary">
                          {t('templates.buttons.variantLabels.secondary')}
                        </Button>
                        <Button variant="outline">
                          {t('templates.buttons.variantLabels.outline')}
                        </Button>
                        <Button variant="ghost">
                          {t('templates.buttons.variantLabels.ghost')}
                        </Button>
                        <Button variant="link">{t('templates.buttons.variantLabels.link')}</Button>
                        <Button variant="destructive">
                          {t('templates.buttons.variantLabels.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">{t('templates.buttons.sizeLabels.small')}</Button>
                        <Button size="default">{t('templates.buttons.sizeLabels.default')}</Button>
                        <Button size="lg">{t('templates.buttons.sizeLabels.large')}</Button>
                        <Button size="icon">
                          <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">{t('templates.badges.labels.default')}</Badge>
                      <Badge variant="secondary">{t('templates.badges.labels.secondary')}</Badge>
                      <Badge variant="outline">{t('templates.badges.labels.outline')}</Badge>
                      <Badge variant="destructive">
                        {t('templates.badges.labels.destructive')}
                      </Badge>
                      <Badge className="bg-success text-success-foreground">
                        {t('templates.badges.labels.success')}
                      </Badge>
                      <Badge className="bg-warning text-warning-foreground">
                        {t('templates.badges.labels.warning')}
                      </Badge>
                      <Badge className="bg-info text-info-foreground">
                        {t('templates.badges.labels.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"
                                value={dialogName}
                                onChange={e => setDialogName(e.target.value)}
                                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"
                                value={dialogUsername}
                                onChange={e => setDialogUsername(e.target.value)}
                                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" />

              {/* 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>

                      <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'),
                            }}
                            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'),
                                    icon: PanelLeft,
                                    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>
                                    ),
                                  },
                                ],
                              },
                            ]}
                          />
                          <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,
                              },
                            ]}
                          />
                          <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" />

              {/* ── v2.2.1 Components ──────────────────────────────────── */}
              <Separator className="my-8" />

              <section>
                <h3 className="mb-4">{t('templates.sections.enhancedComponents')}</h3>
                <div className="space-y-6">
                  {/* Pagination com disabled */}
                  <Card>
                    <CardHeader>
                      <CardTitle>{t('templates.enhanced.pagination.title')}</CardTitle>
                      <CardDescription>
                        <Trans
                          i18nKey="templates.enhanced.pagination.description"
                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
                        />
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <p className="text-sm text-muted-foreground">
                        {t('templates.enhanced.pagination.pageOfTotal', {
                          current: currentPage,
                          total: totalPages,
                        })}
                      </p>
                      <Pagination>
                        <PaginationContent>
                          <PaginationItem>
                            <PaginationPrevious
                              href="#"
                              onClick={e => {
                                e.preventDefault();
                                prev();
                              }}
                              disabled={!canGoPrev}
                            />
                          </PaginationItem>
                          {items.map(item =>
                            item.type === 'ellipsis' ? (
                              <PaginationItem key={item.key}>
                                <PaginationEllipsis />
                              </PaginationItem>
                            ) : (
                              <PaginationItem key={item.page}>
                                <PaginationLink
                                  href="#"
                                  isActive={item.page === currentPage}
                                  onClick={e => {
                                    e.preventDefault();
                                    goTo(item.page);
                                  }}
                                >
                                  {item.page}
                                </PaginationLink>
                              </PaginationItem>
                            )
                          )}
                          <PaginationItem>
                            <PaginationNext
                              href="#"
                              onClick={e => {
                                e.preventDefault();
                                next();
                              }}
                              disabled={!canGoNext}
                            />
                          </PaginationItem>
                        </PaginationContent>
                      </Pagination>
                    </CardContent>
                  </Card>

                  {/* Stepper com ARIA */}
                  <Card>
                    <CardHeader>
                      <CardTitle>{t('templates.enhanced.stepper.title')}</CardTitle>
                      <CardDescription>
                        <Trans
                          i18nKey="templates.enhanced.stepper.description"
                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
                        />
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <Stepper currentStep={currentStep}>
                        <Step
                          step={1}
                          label={t('templates.enhanced.stepper.step1Label')}
                          description={t('templates.enhanced.stepper.step1Description')}
                        />
                        <Step
                          step={2}
                          label={t('templates.enhanced.stepper.step2Label')}
                          description={t('templates.enhanced.stepper.step2Description')}
                        />
                        <Step
                          step={3}
                          label={t('templates.enhanced.stepper.step3Label')}
                          description={t('templates.enhanced.stepper.step3Description')}
                        />
                      </Stepper>
                      <div className="flex gap-2 pt-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={stepPrev}
                          disabled={isFirstStep}
                        >
                          {t('templates.enhanced.stepper.previous')}
                        </Button>
                        <Button size="sm" onClick={stepNext} disabled={isLastStep}>
                          {isLastStep
                            ? t('templates.enhanced.stepper.finish')
                            : t('templates.enhanced.stepper.next')}
                        </Button>
                      </div>
                    </CardContent>
                  </Card>

                  {/* TreeView com ariaLabel */}
                  <Card>
                    <CardHeader>
                      <CardTitle>{t('templates.enhanced.treeView.title')}</CardTitle>
                      <CardDescription>
                        <Trans
                          i18nKey="templates.enhanced.treeView.description"
                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
                        />
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <TreeView
                        data={treeData}
                        aria-label={t('templates.enhanced.treeView.ariaLabel')}
                        defaultExpanded={['components', 'ui']}
                        onNodeSelect={node =>
                          console.log(
                            t('templates.enhanced.treeView.selectedConsoleLog'),
                            node.label
                          )
                        }
                        className="max-w-xs border border-border rounded-[var(--radius-lg)] p-2"
                      />
                    </CardContent>
                  </Card>

                  {/* RichTextEditor sem Auto-save */}
                  <Card>
                    <CardHeader>
                      <CardTitle>{t('templates.enhanced.richText.title')}</CardTitle>
                      <CardDescription>
                        <Trans
                          i18nKey="templates.enhanced.richText.description"
                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
                        />
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="h-64">
                      <RichTextEditor
                        value={richText}
                        onChange={setRichText}
                        placeholder={t('templates.enhanced.richText.placeholder')}
                        showWordCount
                        showCharacterCount
                        allowSearch={false}
                      />
                    </CardContent>
                  </Card>
                </div>
              </section>

              {/* 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>
  );
}