import {
  BarChart3,
  BrainCircuit,
  ClipboardCheck,
  LayoutDashboard,
  Search,
} from "lucide-react"

import { Avatar, AvatarFallback } from "@/shared/ui/avatar"
import { Button } from "@/shared/ui/button"
import { Input } from "@/shared/ui/input"
import { Separator } from "@/shared/ui/separator"

interface HomeShellProps {
  children: React.ReactNode
  activeSection?: "home" | "selection"
}

const navigation = [
  {
    label: "首页",
    icon: LayoutDashboard,
    section: "home" as const,
    path: "/" as const,
  },
  { label: "行情数据", icon: BarChart3, section: null, path: null },
  { label: "同步任务", icon: ClipboardCheck, section: null, path: null },
  {
    label: "选股策略",
    icon: BrainCircuit,
    section: "selection" as const,
    path: "/selection" as const,
  },
]

export function HomeShell({
  activeSection = "home",
  children,
}: HomeShellProps) {
  return (
    <div className="flex min-h-screen bg-muted/30 text-foreground">
      <aside className="flex w-20 shrink-0 flex-col border-r bg-card px-3 py-5 md:w-64 md:px-5">
        <div className="flex items-center gap-3 px-1 md:px-2">
          <div className="flex size-9 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm">
            <BarChart3 className="size-5" aria-hidden="true" />
          </div>
          <div className="hidden min-w-0 md:block">
            <p className="truncate text-sm font-semibold tracking-wide">
              知行量化
            </p>
            <p className="text-xs text-muted-foreground">研究工作台</p>
          </div>
        </div>

        <Separator className="my-6" />

        <nav aria-label="主导航" className="space-y-1">
          {navigation.map((item) => {
            const Icon = item.icon
            const active = item.section === activeSection
            const content = (
              <>
                <Icon className="size-4 shrink-0" aria-hidden="true" />
                <span className="hidden md:inline">{item.label}</span>
              </>
            )
            if (item.path) {
              return (
                <Button
                  key={item.label}
                  className="w-full justify-start gap-3 px-2 md:px-3"
                  render={<a href={item.path} />}
                  variant={active ? "secondary" : "ghost"}
                  aria-current={active ? "page" : undefined}
                >
                  {content}
                </Button>
              )
            }
            return (
              <Button
                key={item.label}
                className="w-full justify-start gap-3 px-2 md:px-3"
                disabled
                variant="ghost"
              >
                {content}
              </Button>
            )
          })}
        </nav>

        <div className="mt-auto hidden rounded-xl bg-muted/60 p-4 md:block">
          <p className="text-xs font-medium">数据研究空间</p>
          <p className="mt-1 text-xs leading-5 text-muted-foreground">
            从市场数据概览开始，掌握当前研究基础。
          </p>
        </div>
      </aside>

      <div className="min-w-0 flex-1">
        <header className="flex h-16 items-center justify-between gap-4 border-b bg-card/80 px-4 backdrop-blur md:px-8">
          <div className="relative w-full max-w-md">
            <Search
              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
              aria-hidden="true"
            />
            <Input
              aria-label="搜索"
              className="h-9 bg-muted/40 pl-9"
              placeholder="搜索股票、数据或功能"
              readOnly
            />
          </div>
          <Avatar aria-label="用户头像">
            <AvatarFallback>研</AvatarFallback>
          </Avatar>
        </header>

        <main className="mx-auto w-full max-w-7xl p-4 md:p-8">{children}</main>
      </div>
    </div>
  )
}