import { LayoutDashboardIcon, SparklesIcon } from 'lucide-react';
import type { ReactNode } from 'react';
import { Link, useLocation } from 'react-router';

import { cn } from '@/shared/lib/cn';
import { paths } from '@/shared/routing';

const NAV = [{ label: '대시보드', icon: LayoutDashboardIcon, to: paths.home }];

type DashboardShellProps = {
  title: string;
  description: string;
  actions?: ReactNode;
  children: ReactNode;
};

export const DashboardShell = ({
  title,
  description,
  actions,
  children,
}: DashboardShellProps) => {
  const { pathname } = useLocation();

  return (
    <div className="flex min-h-dvh bg-background">
      <aside className="hidden w-60 shrink-0 flex-col border-r bg-sidebar px-3 py-5 md:flex">
        <div className="flex items-center gap-2 px-2 pb-6">
          <span className="grid size-8 place-items-center rounded-lg bg-primary text-primary-foreground">
            <SparklesIcon aria-hidden className="size-4" />
          </span>
          <span className="text-base font-semibold tracking-tight">
            Insight
          </span>
        </div>
        <nav className="flex flex-col gap-1">
          {NAV.map(({ label, icon: Icon, to }) => {
            const active = pathname === to;
            return (
              <Link
                key={label}
                to={to}
                aria-current={active ? 'page' : undefined}
                className={cn(
                  'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
                  active
                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'
                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                )}
              >
                <Icon aria-hidden className="size-4" />
                {label}
              </Link>
            );
          })}
        </nav>
        <p className="mt-auto rounded-lg bg-muted p-3 text-sm leading-relaxed text-muted-foreground">
          디자인은 언제든 바꿀 수 있어요. "더 밝게", "더 둥글게"처럼 말하면
          돼요.
        </p>
      </aside>

      <div className="flex min-w-0 flex-1 flex-col">
        <header className="flex items-center justify-between gap-4 px-6 pt-7 pb-2 md:px-8">
          <div className="flex flex-col gap-1">
            <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
          {actions}
        </header>
        <main className="flex-1 p-6 md:px-8">{children}</main>
      </div>
    </div>
  );
};