import React from 'react';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Separator,
  Button,
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from 'xertica-ui/ui';
import { Header } from 'xertica-ui/layout';
import { ThemeToggle, LanguageSelector } from 'xertica-ui/brand';
import { useLayout } from 'xertica-ui/hooks';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useAuth } from '../../../app/context/AuthContext';

export function SettingsContent() {
  const { t } = useTranslation();
  const { sidebarExpanded, sidebarWidth } = useLayout();
  const { user, logout } = useAuth();

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

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

              <Card>
                <CardHeader>
                  <CardTitle>{t('settings.account')}</CardTitle>
                  <CardDescription>{t('settings.accountDescription')}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">{t('settings.email')}</span>
                    <span className="text-sm font-medium">{user?.email}</span>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>{t('settings.preferences')}</CardTitle>
                  <CardDescription>{t('settings.preferencesDescription')}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium">{t('settings.theme')}</p>
                      <p className="text-sm text-muted-foreground">
                        {t('settings.themeDescription')}
                      </p>
                    </div>
                    <ThemeToggle />
                  </div>
                  <Separator />
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium">{t('settings.language')}</p>
                      <p className="text-sm text-muted-foreground">
                        {t('settings.languageDescription')}
                      </p>
                    </div>
                    <LanguageSelector showWhenMonolingual />
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>{t('settings.logout')}</CardTitle>
                  <CardDescription>{t('settings.logoutDescription')}</CardDescription>
                </CardHeader>
                <CardContent>
                  <AlertDialog>
                    <AlertDialogTrigger asChild>
                      <Button variant="destructive">{t('settings.logout')}</Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent>
                      <AlertDialogHeader>
                        <AlertDialogTitle>{t('settings.logout')}</AlertDialogTitle>
                        <AlertDialogDescription>
                          {t('settings.logoutDescription')}
                        </AlertDialogDescription>
                      </AlertDialogHeader>
                      <AlertDialogFooter>
                        <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
                        <AlertDialogAction onClick={logout}>
                          {t('settings.logout')}
                        </AlertDialogAction>
                      </AlertDialogFooter>
                    </AlertDialogContent>
                  </AlertDialog>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}