import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Link } from 'react-router-dom';
import { apiFetch } from '../../lib/api';

type ProjectItem = {
  id: string;
  name: string;
  description: string | null;
  openApiVersion: string;
  createdAt: string;
  user: { id: string; name: string; email: string };
  _count: { endpoints: number; modules: number };
};

type ProjectsResponse = {
  projects: ProjectItem[];
  total: number;
  page: number;
  limit: number;
};

export default function AdminProjects() {
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [searchInput, setSearchInput] = useState('');
  const limit = 20;

  const { data, isLoading } = useQuery({
    queryKey: ['admin', 'projects', page, search],
    queryFn: () => {
      const params = new URLSearchParams({ page: String(page), limit: String(limit) });
      if (search) params.set('search', search);
      return apiFetch<ProjectsResponse>(`/admin/projects?${params}`);
    },
  });

  const totalPages = data ? Math.ceil(data.total / limit) : 0;

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setSearch(searchInput);
    setPage(1);
  };

  return (
    <div className="space-y-4 animate-fade-in">
      {/* Header */}
      <div>
        <h2 className="text-lg font-bold text-text-primary font-heading">项目管理</h2>
        <p className="text-[12px] text-text-muted mt-0.5">共 {data?.total ?? 0} 个项目</p>
      </div>

      {/* Search */}
      <form onSubmit={handleSearch} className="flex gap-2">
        <input
          type="text"
          value={searchInput}
          onChange={(e) => setSearchInput(e.target.value)}
          placeholder="搜索项目名称..."
          className="input-base max-w-xs"
        />
        <button type="submit" className="btn-primary text-[13px] px-3">搜索</button>
        {search && (
          <button type="button" className="btn-ghost text-[13px] px-3" onClick={() => { setSearch(''); setSearchInput(''); setPage(1); }}>
            清除
          </button>
        )}
      </form>

      {/* Table */}
      <div className="card overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-[13px]">
            <thead>
              <tr className="border-b border-border-default bg-bg-secondary">
                <th className="text-left px-4 py-3 font-medium text-text-muted">项目</th>
                <th className="text-left px-4 py-3 font-medium text-text-muted">所有者</th>
                <th className="text-left px-4 py-3 font-medium text-text-muted">版本</th>
                <th className="text-left px-4 py-3 font-medium text-text-muted">模块</th>
                <th className="text-left px-4 py-3 font-medium text-text-muted">端点</th>
                <th className="text-left px-4 py-3 font-medium text-text-muted">创建时间</th>
                <th className="text-right px-4 py-3 font-medium text-text-muted">操作</th>
              </tr>
            </thead>
            <tbody>
              {isLoading ? (
                Array.from({ length: 5 }).map((_, i) => (
                  <tr key={i} className="border-b border-border-muted">
                    {Array.from({ length: 7 }).map((_, j) => (
                      <td key={j} className="px-4 py-3"><div className="skeleton h-4 w-20" /></td>
                    ))}
                  </tr>
                ))
              ) : data?.projects.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-4 py-12 text-center text-text-muted">无匹配项目</td>
                </tr>
              ) : (
                data?.projects.map((project) => (
                  <tr key={project.id} className="border-b border-border-muted hover:bg-bg-secondary/50 transition-colors">
                    <td className="px-4 py-3">
                      <div className="font-medium text-text-primary">{project.name}</div>
                      {project.description && (
                        <div className="text-[11px] text-text-muted truncate max-w-[200px]">{project.description}</div>
                      )}
                    </td>
                    <td className="px-4 py-3">
                      <Link to={`/admin/users/${project.user.id}`} className="text-text-secondary hover:text-accent transition-colors">
                        {project.user.name}
                      </Link>
                    </td>
                    <td className="px-4 py-3">
                      <span className="font-mono text-[11px] text-text-muted">{project.openApiVersion}</span>
                    </td>
                    <td className="px-4 py-3 text-text-secondary">{project._count.modules}</td>
                    <td className="px-4 py-3 text-text-secondary">{project._count.endpoints}</td>
                    <td className="px-4 py-3 text-text-muted">{new Date(project.createdAt).toLocaleDateString('zh-CN')}</td>
                    <td className="px-4 py-3 text-right">
                      <Link to={`/admin/projects/${project.id}`} className="text-accent hover:text-accent-hover text-[12px] font-medium transition-colors">
                        查看
                      </Link>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between">
          <span className="text-[12px] text-text-muted">第 {page} / {totalPages} 页</span>
          <div className="flex gap-1.5">
            <button className="btn-outline text-[12px] px-2.5 py-1.5" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</button>
            <button className="btn-outline text-[12px] px-2.5 py-1.5" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</button>
          </div>
        </div>
      )}
    </div>
  );
}