"use client";

import { Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import type { TrialPublicationRow } from "../types";

type TrialPublicationsEditorProps = {
  publications: TrialPublicationRow[];
  onChange: (publications: TrialPublicationRow[]) => void;
  disabled?: boolean;
};

export function TrialPublicationsEditor({ publications, onChange, disabled }: TrialPublicationsEditorProps) {
  const addPublication = () => {
    onChange([...publications, { publicationPUI: "", publicationReference: "" }]);
  };

  const updatePublication = (index: number, patch: Partial<TrialPublicationRow>) => {
    const next = [...publications];
    next[index] = { ...next[index], ...patch };
    onChange(next);
  };

  const removePublication = (index: number) => {
    onChange(publications.filter((_, itemIndex) => itemIndex !== index));
  };

  return (
    <div className="md:col-span-2">
      <div className="mb-2 flex items-center justify-between">
        <Label className="text-sm text-slate-700 dark:text-slate-200">出版物 / 文献 (trial_publication)</Label>
        <Button type="button" size="sm" variant="outline" className="gap-1.5" onClick={addPublication} disabled={disabled}>
          <Plus className="h-3.5 w-3.5" />
          添加出版物
        </Button>
      </div>
      <div className="rounded-lg border border-slate-200 dark:border-slate-800">
        <Table>
          <TableHeader>
            <TableRow className="bg-slate-50 dark:bg-slate-900">
              <TableHead className="text-xs">出版物 PUI</TableHead>
              <TableHead className="text-xs">引用 / URL</TableHead>
              <TableHead className="w-16 text-right text-xs">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {publications.length === 0 ? (
              <TableRow>
                <TableCell colSpan={3} className="py-6 text-center text-sm text-slate-400">
                  暂无出版物记录
                </TableCell>
              </TableRow>
            ) : (
              publications.map((publication, index) => (
                <TableRow key={`pub-${index}`}>
                  <TableCell>
                    <Input
                      value={publication.publicationPUI ?? ""}
                      onChange={(event) => updatePublication(index, { publicationPUI: event.target.value })}
                      placeholder="publication PUI"
                      disabled={disabled}
                    />
                  </TableCell>
                  <TableCell>
                    <Input
                      value={publication.publicationReference ?? ""}
                      onChange={(event) => updatePublication(index, { publicationReference: event.target.value })}
                      placeholder="https://... 或文献引用"
                      disabled={disabled}
                    />
                  </TableCell>
                  <TableCell className="text-right">
                    <Button
                      type="button"
                      size="icon"
                      variant="ghost"
                      className="h-7 w-7 text-slate-400 hover:text-red-500"
                      onClick={() => removePublication(index)}
                      disabled={disabled}
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}
