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

interface PersonFormProps {
  values: PersonFormValues;
  submitting: boolean;
  onChange: (key: keyof PersonFormValues, value: string) => void;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
}

export function PersonForm({ values, submitting, onChange, onSubmit }: PersonFormProps) {
  return (
    <form className="card-agriculture grid gap-5 p-5 md:p-6" onSubmit={onSubmit}>
      <div className="flex items-start gap-3">
        <span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-secondary text-sm font-black text-secondary-foreground">01</span>
        <div>
          <h2 className="text-xl font-black tracking-tight text-card-foreground">新增人员</h2>
          <p className="mt-1 text-sm leading-6 text-muted-foreground">至少填写姓名、邮箱、电话中的一项。建议优先维护邮箱和机构，方便后续追踪责任人。</p>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        <label className="grid gap-2 text-sm font-black text-card-foreground">
          <span>名 First Name</span>
          <input className="input-agriculture" value={values.firstName} onChange={(event) => onChange("firstName", event.target.value)} placeholder="例如：Li" />
        </label>
        <label className="grid gap-2 text-sm font-black text-card-foreground">
          <span>姓 Last Name</span>
          <input className="input-agriculture" value={values.lastName} onChange={(event) => onChange("lastName", event.target.value)} placeholder="例如：Wei" />
        </label>
        <label className="grid gap-2 text-sm font-black text-card-foreground">
          <span>邮箱 Email</span>
          <input className="input-agriculture" value={values.emailAddress} onChange={(event) => onChange("emailAddress", event.target.value)} placeholder="name@example.com" />
        </label>
        <label className="grid gap-2 text-sm font-black text-card-foreground">
          <span>电话 Phone</span>
          <input className="input-agriculture" value={values.phoneNumber} onChange={(event) => onChange("phoneNumber", event.target.value)} placeholder="联系电话" />
        </label>
        <label className="grid gap-2 text-sm font-black text-card-foreground md:col-span-2">
          <span>机构 Institute</span>
          <input className="input-agriculture" value={values.instituteName} onChange={(event) => onChange("instituteName", event.target.value)} placeholder="单位 / 实验室 / 项目组" />
        </label>
      </div>

      <Button variant="agriculture" size="lg" type="submit" disabled={submitting}>
        {submitting ? "正在写入 person 表..." : "保存人员"}
      </Button>
    </form>
  );
}
