import { createFileRoute } from '@tanstack/react-router';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { z } from 'zod';
import { cn } from '@/lib/utils';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { AccountSection } from '@/components/settings/AccountSection';
import { AgentsSection } from '@/components/settings/AgentsSection';
import { AppearanceSection } from '@/components/settings/AppearanceSection';
import { BillingSection } from '@/components/settings/BillingSection';
import { MemorySection } from '@/components/settings/MemorySection';
import { ProfileSection } from '@/components/settings/ProfileSection';
import { SECTIONS } from '@/components/settings/types';
import type { SectionId } from '@/components/settings/types';

export const Route = createFileRoute('/settings')({
  validateSearch: z.object({ section: z.string().optional() }),
  component: SettingsPage,
});

function SettingsPage() {
  const { t } = useTranslation();
  const { section: sectionParam } = Route.useSearch();
  const [section, setSection] = useState<SectionId>(
    (sectionParam as SectionId | undefined) ?? 'profile',
  );

  return (
    <div className="flex h-full min-h-0">
      {/* Left nav */}
      <aside className="w-56 shrink-0 border-r flex flex-col pb-4 gap-1">
        <div className="flex h-14 items-center gap-2 px-3 shrink-0">
          <SidebarTrigger />
          <Separator orientation="vertical" className="data-[orientation=vertical]:h-4" />
          <h4 className="text-sm font-medium text-foreground flex-1">{t('nav.settings')}</h4>
        </div>
        <nav className="px-3 flex flex-col gap-0.5">
          {SECTIONS.map(({ id, labelKey, icon: Icon }) => (
            <button
              key={id}
              onClick={() => setSection(id)}
              className={cn(
                'flex items-center gap-2 text-left text-sm px-2.5 py-2 rounded-md transition-colors',
                section === id
                  ? 'font-medium text-foreground bg-accent'
                  : 'text-muted-foreground hover:text-foreground hover:bg-accent/50 cursor-pointer',
              )}
            >
              <Icon className="size-4 shrink-0" />
              {t(labelKey)}
            </button>
          ))}
        </nav>
      </aside>

      {/* Content */}
      <ScrollArea className="flex-1">
        <div className="mx-auto py-10 px-8 flex flex-col gap-6 w-full max-w-6xl">
          <div className="pb-1">
            <h1 className="text-3xl font-semibold tracking-tight leading-tight">
              {section === 'memory'
                ? t('settings.memory.title')
                : t(`settings.${section}`)}<br />
              <span className="text-muted-foreground/50">
                {section === 'memory'
                  ? t('settings.memory.subtitle')
                  : t(`settings.${section}Subtitle`)}
              </span>
            </h1>
            {section === 'agents' && (
              <p className="text-sm text-muted-foreground mt-3 leading-relaxed">{t('settings.agentsDescription')}</p>
            )}
          </div>
          {section === 'profile' && <ProfileSection />}
          {section === 'memory' && <MemorySection />}
          {section === 'account' && <AccountSection />}
          {section === 'billing' && <BillingSection />}
          {section === 'appearance' && <AppearanceSection />}
          {section === 'agents' && <AgentsSection />}
        </div>
      </ScrollArea>
    </div>
  );
}
