"use client"

import * as React from "react"
import {motion} from "motion/react"
import {FolderOpen} from "lucide-react"

import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
import {FileStats} from "./components/file-stats"
import {FileList} from "./components/file-list"
import {StorageConfigTab} from "./components/storage-config-tab"

export default function FilesPage() {
  const [activeTab, setActiveTab] = React.useState("stats")

  return (
    <motion.div
      initial={{ opacity: 0, y: 15 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, ease: "easeOut" }}
      className="flex w-full flex-col gap-6 py-6"
    >
      {/* 顶部标题区 */}
      <div className="flex items-center gap-2">
        <FolderOpen className="size-5 text-primary" />
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">存储管理</h1>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
          <TabsTrigger value="stats" className="px-0 pb-2 text-xs font-semibold">
            文件存储信息
          </TabsTrigger>
          <TabsTrigger value="list" className="px-0 pb-2 text-xs font-semibold">
            文件列表
          </TabsTrigger>
          <TabsTrigger value="storage" className="px-0 pb-2 text-xs font-semibold">
            存储配置
          </TabsTrigger>
        </TabsList>

        {/* ──────── TAB 1: 统计看板 ──────── */}
        <TabsContent value="stats" className="outline-hidden">
          {activeTab === "stats" ? <FileStats /> : null}
        </TabsContent>

        {/* ──────── TAB 2: 文件列表 ──────── */}
        <TabsContent value="list" className="outline-hidden">
          {activeTab === "list" ? <FileList /> : null}
        </TabsContent>

        <TabsContent value="storage" className="outline-hidden">
          {activeTab === "storage" ? <StorageConfigTab /> : null}
        </TabsContent>
      </Tabs>
    </motion.div>
  )
}