import type { ReactNode } from 'react'
import { NavLink } from 'react-router-dom'

import { AppShell } from '@/components/layout/AppShell'
import { cn } from '@/lib/cn'

const TABS = [
  { to: '/settings', label: 'Profile', end: true },
  { to: '/settings/security', label: 'Security' },
  { to: '/settings/seller', label: 'Selling' },
]

export function SettingsLayout({
  title,
  description,
  children,
}: {
  title: string
  description?: string
  children: ReactNode
}) {
  return (
    <AppShell>
      <div className="container-page py-10 lg:py-14">
        <div className="mb-8">
          <h1 className="text-2xl font-semibold tracking-[-0.02em] text-text-primary">
            Account settings
          </h1>
          <p className="mt-1.5 text-sm text-text-secondary">
            Manage your profile, security and selling setup.
          </p>
        </div>

        <div className="flex flex-col gap-8 lg:flex-row lg:gap-12">
          {/*
            A horizontally scrolling tab strip on small screens rather than a
            cramped sidebar: the mobile layout is designed for the phone, not
            shrunk down from the desktop.
          */}
          <nav
            aria-label="Settings sections"
            className="-mx-4 overflow-x-auto px-4 lg:mx-0 lg:w-56 lg:shrink-0 lg:overflow-visible lg:px-0"
          >
            <ul className="flex gap-1 border-b border-border-subtle pb-px lg:flex-col lg:border-b-0 lg:pb-0">
              {TABS.map((tab) => (
                <li key={tab.to} className="shrink-0 lg:w-full">
                  <NavLink
                    to={tab.to}
                    end={tab.end ?? false}
                    className={({ isActive }) =>
                      cn(
                        'block rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors duration-150',
                        isActive
                          ? 'bg-surface-sunken text-text-primary'
                          : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary',
                      )
                    }
                  >
                    {tab.label}
                  </NavLink>
                </li>
              ))}
            </ul>
          </nav>

          <div className="min-w-0 flex-1">
            <div className="mb-6">
              <h2 className="text-lg font-semibold text-text-primary">{title}</h2>
              {description !== undefined && (
                <p className="mt-1 text-sm text-text-secondary">{description}</p>
              )}
            </div>

            <div className="flex flex-col gap-6">{children}</div>
          </div>
        </div>
      </div>
    </AppShell>
  )
}