import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { type BanCamKet, createEmptyBanCamKet } from '@/components/applicant/initiativeFormTypes';

export interface AuthorArticleCommitmentFormProps {
  value: BanCamKet;
  onChange: (next: BanCamKet) => void;
  readOnly?: boolean;
  /** Từ Đơn: tên tác giả chính, đơn vị, năm nộp — dùng cho nút “Điền nhanh”. */
  quickFill: {
    authorName: string;
    unitName: string;
    submissionDay: number;
    submissionMonth: number;
    submissionYear: string;
  };
}

function patch(b: BanCamKet, partial: Partial<BanCamKet>): BanCamKet {
  return { ...b, ...partial };
}

function patchNgay(b: BanCamKet, key: keyof BanCamKet['ngay_ky'], v: string): BanCamKet {
  return { ...b, ngay_ky: { ...b.ngay_ky, [key]: v } };
}

function patchCamKet(b: BanCamKet, key: keyof BanCamKet['cam_ket'], checked: boolean): BanCamKet {
  return { ...b, cam_ket: { ...b.cam_ket, [key]: checked } };
}

export function AuthorArticleCommitmentForm({
  value: ban,
  onChange,
  readOnly = false,
  quickFill,
}: AuthorArticleCommitmentFormProps) {
  const pickRole = (role: 'tac_gia_chinh' | 'dong_tac_gia') => {
    onChange({
      ...ban,
      vai_tro: {
        tac_gia_chinh: role === 'tac_gia_chinh',
        dong_tac_gia: role === 'dong_tac_gia',
      },
    });
  };

  const fillFromApplication = () => {
    const y = quickFill.submissionYear.trim() || new Date().getFullYear().toString();
    onChange(
      patch(ban, {
        tac_gia_dang_ky: quickFill.authorName.trim() || ban.tac_gia_dang_ky,
        nguoi_cam_ket: quickFill.authorName.trim() || ban.nguoi_cam_ket,
        don_vi: quickFill.unitName.trim() || ban.don_vi,
        nam_xet: /^\d{4}$/.test(y) ? y : ban.nam_xet,
        ngay_ky: {
          ngay: String(quickFill.submissionDay),
          thang: String(quickFill.submissionMonth),
          nam: y,
        },
      }),
    );
  };

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <p className="text-sm font-semibold text-foreground">Bản cam kết (tác giả bài báo khoa học)</p>
        {!readOnly && (
          <Button type="button" variant="secondary" size="sm" onClick={fillFromApplication}>
            Điền nhanh từ Đơn
          </Button>
        )}
      </div>
      <p className="text-xs text-muted-foreground leading-relaxed">
        Điền đầy đủ theo biểu mẫu: ngày ký, thông tin tác giả, vai trò với bài báo và các mục cam kết bắt buộc.
      </p>

      <div className="space-y-1.5">
        <Label className="text-xs font-medium">Ngày ký</Label>
        <div className="flex flex-wrap items-center gap-2 text-sm">
          <span className="text-muted-foreground">Ngày</span>
          <Input
            className="h-8 w-14 bg-white border-primary/20 text-center"
            inputMode="numeric"
            disabled={readOnly}
            value={ban.ngay_ky.ngay}
            onChange={(e) => onChange(patchNgay(ban, 'ngay', e.target.value))}
          />
          <span className="text-muted-foreground">Tháng</span>
          <Input
            className="h-8 w-14 bg-white border-primary/20 text-center"
            inputMode="numeric"
            disabled={readOnly}
            value={ban.ngay_ky.thang}
            onChange={(e) => onChange(patchNgay(ban, 'thang', e.target.value))}
          />
          <span className="text-muted-foreground">Năm</span>
          <Input
            className="h-8 w-20 bg-white border-primary/20 text-center"
            inputMode="numeric"
            disabled={readOnly}
            value={ban.ngay_ky.nam}
            onChange={(e) => onChange(patchNgay(ban, 'nam', e.target.value))}
          />
        </div>
      </div>

      <div className="grid gap-3 sm:grid-cols-1">
        <div className="space-y-1.5">
          <Label htmlFor="bck-tacgia">Tác giả đăng ký sáng kiến</Label>
          <Input
            id="bck-tacgia"
            className="bg-white border-primary/20"
            disabled={readOnly}
            value={ban.tac_gia_dang_ky}
            onChange={(e) => onChange(patch(ban, { tac_gia_dang_ky: e.target.value }))}
            maxLength={120}
          />
        </div>
        <div className="space-y-1.5">
          <Label htmlFor="bck-cccd">CCCD / Hộ chiếu số</Label>
          <Input
            id="bck-cccd"
            className="bg-white border-primary/20"
            disabled={readOnly}
            value={ban.cccd}
            onChange={(e) => onChange(patch(ban, { cccd: e.target.value }))}
            placeholder="8–12 ký tự số"
          />
        </div>
        <div className="space-y-1.5">
          <Label htmlFor="bck-donvi">Đơn vị</Label>
          <Input
            id="bck-donvi"
            className="bg-white border-primary/20"
            disabled={readOnly}
            value={ban.don_vi}
            onChange={(e) => onChange(patch(ban, { don_vi: e.target.value }))}
          />
        </div>
        <div className="space-y-1.5">
          <Label htmlFor="bck-tenbai">Tên bài báo</Label>
          <Textarea
            id="bck-tenbai"
            rows={2}
            className="min-h-[3.5rem] bg-white border-primary/20"
            disabled={readOnly}
            value={ban.ten_bai_bao}
            onChange={(e) => onChange(patch(ban, { ten_bai_bao: e.target.value }))}
          />
        </div>
        <div className="space-y-1.5">
          <Label htmlFor="bck-namxet">Năm xét</Label>
          <Input
            id="bck-namxet"
            type="text"
            inputMode="numeric"
            className="max-w-[8rem] bg-white border-primary/20"
            disabled={readOnly}
            value={ban.nam_xet}
            onChange={(e) => onChange(patch(ban, { nam_xet: e.target.value }))}
            placeholder="YYYY"
          />
        </div>
      </div>

      <fieldset className="space-y-2 rounded-md border border-border/60 p-3" disabled={readOnly}>
        <legend className="text-sm font-medium px-1">Vai trò đối với bài báo</legend>
        <div className="flex flex-col gap-2 sm:flex-row sm:gap-6">
          <label className="flex items-center gap-2 text-sm cursor-pointer">
            <Checkbox
              checked={ban.vai_tro.tac_gia_chinh}
              disabled={readOnly}
              onCheckedChange={() => pickRole('tac_gia_chinh')}
            />
            Tác giả chính
          </label>
          <label className="flex items-center gap-2 text-sm cursor-pointer">
            <Checkbox
              checked={ban.vai_tro.dong_tac_gia}
              disabled={readOnly}
              onCheckedChange={() => pickRole('dong_tac_gia')}
            />
            Đồng tác giả
          </label>
        </div>
      </fieldset>

      <fieldset className="space-y-3 rounded-md border border-border/60 p-3" disabled={readOnly}>
        <legend className="text-sm font-medium px-1">Cam kết nội dung</legend>
        <label className="flex items-start gap-2 text-sm leading-snug cursor-pointer">
          <Checkbox
            className="mt-0.5"
            checked={ban.cam_ket.quyen_so_huu_1}
            disabled={readOnly}
            onCheckedChange={(c) => onChange(patchCamKet(ban, 'quyen_so_huu_1', c === true))}
          />
          <span>
            Tôi là chủ sở hữu hợp pháp của bài báo (hoặc được ủy quyền hợp lệ) theo quy định về sở hữu trí tuệ.
          </span>
        </label>
        <label className="flex items-start gap-2 text-sm leading-snug cursor-pointer">
          <Checkbox
            className="mt-0.5"
            checked={ban.cam_ket.quyen_so_huu_2}
            disabled={readOnly}
            onCheckedChange={(c) => onChange(patchCamKet(ban, 'quyen_so_huu_2', c === true))}
          />
          <span>
            Trường hợp bài báo là sản phẩm của nhiệm vụ NCKH / đề tài: tôi xác nhận đúng quy định về quyền và
            trách nhiệm của đơn vị chủ trì.
          </span>
        </label>
        <label className="flex items-start gap-2 text-sm leading-snug cursor-pointer">
          <Checkbox
            className="mt-0.5"
            checked={ban.cam_ket.dong_thuan}
            disabled={readOnly}
            onCheckedChange={(c) => onChange(patchCamKet(ban, 'dong_thuan', c === true))}
          />
          <span>Tất cả đồng tác giả đã biết, đồng ý với nội dung đăng ký.</span>
        </label>
        <label className="flex items-start gap-2 text-sm leading-snug cursor-pointer">
          <Checkbox
            className="mt-0.5"
            checked={ban.cam_ket.bai_bao_uy_tin}
            disabled={readOnly}
            onCheckedChange={(c) => onChange(patchCamKet(ban, 'bai_bao_uy_tin', c === true))}
          />
          <span>Cam kết bài báo không thuộc &quot;Tạp chí săn mồi&quot; (predatory).</span>
        </label>
        <label className="flex items-start gap-2 text-sm leading-snug cursor-pointer">
          <Checkbox
            className="mt-0.5"
            checked={ban.cam_ket.tuan_thu_phap_luat}
            disabled={readOnly}
            onCheckedChange={(c) => onChange(patchCamKet(ban, 'tuan_thu_phap_luat', c === true))}
          />
          <span>Tuân thủ pháp luật về sở hữu trí tuệ.</span>
        </label>
      </fieldset>

      <div className="space-y-1.5">
        <Label htmlFor="bck-nguoicamket">Người cam kết (ký tên)</Label>
        <Input
          id="bck-nguoicamket"
          className="bg-white border-primary/20"
          disabled={readOnly}
          value={ban.nguoi_cam_ket}
          onChange={(e) => onChange(patch(ban, { nguoi_cam_ket: e.target.value }))}
        />
      </div>

      {!readOnly && (
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="text-muted-foreground"
          onClick={() => onChange(createEmptyBanCamKet())}
        >
          Xóa nội dung bản cam kết
        </Button>
      )}
    </div>
  );
}
