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

const quickPeople = [
  { firstName: "Li", lastName: "Wei", instituteName: "Crop Research Center" },
  { firstName: "Anna", lastName: "Chen", instituteName: "Field Trial Team" },
  { firstName: "Ming", lastName: "Zhao", instituteName: "Breeding Lab" },
];

interface PersonHeaderProps {
  total: number;
  namedCount: number;
  onFillExample: (person: Partial<PersonFormValues>) => void;
}

export function PersonHeader({ total, namedCount, onFillExample }: PersonHeaderProps) {
  return (
    <div className="relative grid gap-6 overflow-hidden rounded-[34px] bg-[radial-gradient(circle_at_16%_18%,rgba(254,240,138,0.55),transparent_26%),linear-gradient(135deg,#083344,var(--primary)_50%,#365314)] p-6 text-primary-foreground shadow-agriculture lg:grid-cols-[1fr_260px] lg:p-8">
      <div className="pointer-events-none absolute -right-12 top-10 h-48 w-48 rounded-full border border-primary-foreground/20 bg-primary-foreground/10" />
      <div className="relative z-10 max-w-3xl">
        <div className="mb-4 inline-flex rounded-full border border-primary-foreground/25 bg-primary-foreground/15 px-3 py-1 text-xs font-black uppercase tracking-[0.2em]">
          农业基础字典入口 / Person
        </div>
        <h1 className="text-3xl font-black tracking-tight md:text-5xl">人员字典录入</h1>
        <p className="mt-4 max-w-2xl text-sm leading-7 text-primary-foreground/90 md:text-base">
          维护 BrAPI 标准 <strong className="font-black">person</strong> 表。人员可以作为 Program 负责人、Trial 联系人、Study 协作者，是后续数据责任链的基础。
        </p>
        <div className="mt-5 flex flex-wrap gap-2">
          {quickPeople.map((person) => (
            <Button key={`${person.firstName}-${person.lastName}`} type="button" variant="outline" className="rounded-full border-primary-foreground/20 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/25" onClick={() => onFillExample(person)}>
              {person.firstName} {person.lastName}
            </Button>
          ))}
        </div>
      </div>
      <div className="relative z-10 grid gap-3">
        <div className="rounded-3xl border border-primary-foreground/20 bg-primary-foreground/15 p-5 shadow-2xl shadow-emerald-950/15 backdrop-blur">
          <span className="text-sm font-black text-primary-foreground/85">人员记录</span>
          <strong className="mt-3 block text-5xl font-black leading-none">{total}</strong>
        </div>
        <div className="rounded-3xl border border-primary-foreground/20 bg-primary-foreground/15 p-5 shadow-2xl shadow-emerald-950/15 backdrop-blur">
          <span className="text-sm font-black text-primary-foreground/85">具名人员</span>
          <strong className="mt-3 block text-5xl font-black leading-none">{namedCount}</strong>
        </div>
      </div>
    </div>
  );
}
