"use client";

import { useState } from "react";
import Link from "next/link";
import { ProjectTable } from "@/components/admin/projects/ProjectTable";
import { ProjectGrid } from "@/components/admin/projects/ProjectGrid";
import {
  PageContainer,
  PageHeader,
  PageCard,
} from "@/components/admin/common";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import {
  LayoutGrid,
  List,
  Search,
} from "lucide-react";
import { AdminProjectFilters } from "@/lib/hooks/admin/useAdminProjects";

export default function AdminProjectsPage() {
  const [viewMode, setViewMode] = useState<"grid" | "list">("list");
  const [filters, setFilters] = useState<AdminProjectFilters>({});
  const [searchInput, setSearchInput] = useState("");

  const handleSearch = () => {
    setFilters((prev) => ({ ...prev, search: searchInput }));
  };

  const handleStatusChange = (status: string) => {
    setFilters((prev) => ({
      ...prev,
      status: status === "all" ? undefined : status,
    }));
  };

  return (
    <PageContainer>
      <PageHeader
        title="项目管理"
        description="管理系统中的所有项目"
        actions={
          <Button variant="outline" size="icon" asChild>
            <Link href="/admin/dashboard">
              <LayoutGrid className="h-4 w-4" />
            </Link>
          </Button>
        }
      />

      <Tabs defaultValue="all" className="space-y-4" onValueChange={handleStatusChange}>
        <div className="flex items-center justify-between">
          <TabsList>
            <TabsTrigger value="all">全部</TabsTrigger>
            <TabsTrigger value="active">进行中</TabsTrigger>
            <TabsTrigger value="archived">已归档</TabsTrigger>
            <TabsTrigger value="deleted">已删除</TabsTrigger>
          </TabsList>

          <div className="flex items-center gap-2">
            <div className="flex items-center gap-2">
              <Input
                placeholder="搜索项目..."
                value={searchInput}
                onChange={(e) => setSearchInput(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && handleSearch()}
                className="w-64"
              />
              <Button variant="outline" size="icon" onClick={handleSearch}>
                <Search className="h-4 w-4" />
              </Button>
            </div>
            <div className="flex bg-muted rounded-lg p-1 gap-1">
              <Button
                variant={viewMode === "grid" ? "secondary" : "ghost"}
                size="icon"
                onClick={() => setViewMode("grid")}
                className="h-8 w-8"
              >
                <LayoutGrid size={16} />
              </Button>
              <Button
                variant={viewMode === "list" ? "secondary" : "ghost"}
                size="icon"
                onClick={() => setViewMode("list")}
                className="h-8 w-8"
              >
                <List size={16} />
              </Button>
            </div>
          </div>
        </div>

        <TabsContent value="all" className="space-y-4">
          {viewMode === "grid" ? (
            <ProjectGrid filters={filters} />
          ) : (
            <ProjectTable filters={filters} />
          )}
        </TabsContent>

        <TabsContent value="active" className="space-y-4">
          {viewMode === "grid" ? (
            <ProjectGrid filters={filters} />
          ) : (
            <ProjectTable filters={filters} />
          )}
        </TabsContent>

        <TabsContent value="archived" className="space-y-4">
          {viewMode === "grid" ? (
            <ProjectGrid filters={filters} />
          ) : (
            <ProjectTable filters={filters} />
          )}
        </TabsContent>

        <TabsContent value="deleted" className="space-y-4">
          {viewMode === "grid" ? (
            <ProjectGrid filters={filters} />
          ) : (
            <ProjectTable filters={filters} />
          )}
        </TabsContent>
      </Tabs>
    </PageContainer>
  );
}
