import { Button } from "@/components/ui/button";
import type { CropItem } from "./types";

interface CropTableProps {
  rows: CropItem[];
  loading: boolean;
  onRefresh: () => void;
}

export function CropTable({ rows, loading, onRefresh }: CropTableProps) {
  return (
    <div className="card-agriculture overflow-hidden">
      <div className="flex flex-col gap-3 border-b border-border p-5 md:flex-row md:items-center md:justify-between md:p-6">
        <div className="flex items-center gap-3">
          <span className="grid h-10 w-10 place-items-center rounded-2xl bg-accent text-sm font-black text-accent-foreground">02</span>
          <h2 className="text-xl font-black tracking-tight text-card-foreground">Crop 数据列表</h2>
        </div>
        <Button variant="agriculture" type="button" onClick={onRefresh}>{loading ? "刷新中..." : "刷新数据"}</Button>
      </div>
      {loading ? (
        <div className="p-8 text-center text-sm font-bold text-muted-foreground">正在从后端读取 crop 表...</div>
      ) : rows.length > 0 ? (
        <div className="overflow-x-auto">
          <table className="w-full border-collapse text-left text-sm">
            <thead className="bg-muted text-xs uppercase tracking-[0.16em] text-muted-foreground">
              <tr>
                <th className="px-5 py-4 font-black">ID</th>
                <th className="px-5 py-4 font-black">作物名称</th>
                <th className="px-5 py-4 font-black">创建用户</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {rows.map((row) => (
                <tr key={row.id} className="transition hover:bg-muted/70">
                  <td className="px-5 py-4 text-muted-foreground">{row.id}</td>
                  <td className="px-5 py-4"><strong className="font-black text-card-foreground">{row.crop_name || "-"}</strong></td>
                  <td className="px-5 py-4 text-muted-foreground">{row.user_name || "-"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <div className="p-8 text-center text-sm font-bold text-muted-foreground">数据库里还没有作物。先在上方新增一个，比如 maize。</div>
      )}
    </div>
  );
}
