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 {
  RESEARCH_DOMESTIC_HONESTY_TIEU_DE_PHU_TEMPLATE_KEY,
  type ResearchDomesticHonesty,
  createEmptyResearchDomesticHonesty,
} from '@/components/applicant/initiativeFormTypes';

export interface DomesticJournalHonestyFormProps {
  value: ResearchDomesticHonesty;
  onChange: (next: ResearchDomesticHonesty) => void;
  readOnly?: boolean;
  quickFill: {
    authorName: string;
    unitName: string;
    submissionDay: number;
    submissionMonth: number;
    submissionYear: string;
  };
}

function patch(h: ResearchDomesticHonesty, partial: Partial<ResearchDomesticHonesty>): ResearchDomesticHonesty {
  return { ...h, ...partial };
}

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

function patchCam(
  h: ResearchDomesticHonesty,
  key: keyof ResearchDomesticHonesty['cam_ket'],
  checked: boolean,
): ResearchDomesticHonesty {
  return { ...h, cam_ket: { ...h.cam_ket, [key]: checked } };
}

/** Biểu xác nhận — nhóm 2.1.2 (bài báo tạp chí trong nước): PDF minh chứng + cam kết trung thực (JSON tab Đơn). */
export function DomesticJournalHonestyForm({
  value: r,
  onChange,
  readOnly = false,
  quickFill,
}: DomesticJournalHonestyFormProps) {
  const fillFromApplication = () => {
    const y = quickFill.submissionYear.trim() || new Date().getFullYear().toString();
    onChange(
      patch(r, {
        tac_gia_dang_ky: quickFill.authorName.trim() || r.tac_gia_dang_ky,
        nguoi_cam_ket: quickFill.authorName.trim() || r.nguoi_cam_ket,
        don_vi: quickFill.unitName.trim() || r.don_vi,
        nam_xet: /^\d{4}$/.test(y) ? y : r.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 xác nhận bài báo trong nước (2.1.2)</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 DOCX (mục « BẢN XÁC NHẬN BÀI BÁO TRONG NƯỚC (2.1.2) »). File PDF minh chứng tải ở tab « Tải PDF bài báo »
        (lưu kho MinIO, loại minh chứng nghiên cứu).
      </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={r.ngay_ky.ngay}
            onChange={(e) => onChange(patchNgay(r, '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={r.ngay_ky.thang}
            onChange={(e) => onChange(patchNgay(r, '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={r.ngay_ky.nam}
            onChange={(e) => onChange(patchNgay(r, 'nam', e.target.value))}
          />
        </div>
      </div>

      <div className="space-y-1.5">
        <Label htmlFor="dj-tieude" className="text-xs font-medium leading-snug">
          {RESEARCH_DOMESTIC_HONESTY_TIEU_DE_PHU_TEMPLATE_KEY}
        </Label>
        <Textarea
          id="dj-tieude"
          rows={2}
          className="min-h-[2.75rem] bg-white border-primary/20 text-sm"
          disabled={readOnly}
          value={r.tieu_de_phu}
          onChange={(e) => onChange(patch(r, { tieu_de_phu: e.target.value }))}
          placeholder="Tuỳ chọn — nếu mẫu in có dòng tiêu đề phụ"
        />
      </div>

      <div className="grid gap-3 sm:grid-cols-1">
        <p className="text-xs font-semibold text-foreground">I. THÔNG TIN ĐĂNG KÝ</p>
        <div className="space-y-1.5">
          <Label htmlFor="dj-tacgia">Tác giả đăng ký sáng kiến</Label>
          <Input
            id="dj-tacgia"
            className="bg-white border-primary/20"
            disabled={readOnly}
            value={r.tac_gia_dang_ky}
            onChange={(e) => onChange(patch(r, { tac_gia_dang_ky: e.target.value }))}
            maxLength={120}
          />
        </div>
        <div className="space-y-1.5">
          <Label htmlFor="dj-cccd">CCCD/Hộ chiếu số</Label>
          <Input
            id="dj-cccd"
            className="bg-white border-primary/20"
            disabled={readOnly}
            value={r.cccd}
            onChange={(e) => onChange(patch(r, { cccd: e.target.value }))}
            placeholder="8–12 ký tự số"
          />
        </div>
        <div className="space-y-1.5">
          <Label htmlFor="dj-donvi">Đơn vị</Label>
          <Input
            id="dj-donvi"
            className="bg-white border-primary/20"
            disabled={readOnly}
            value={r.don_vi}
            onChange={(e) => onChange(patch(r, { don_vi: e.target.value }))}
          />
        </div>
        <div className="space-y-1.5">
          <Label htmlFor="dj-tenbai">Tên bài báo (tạp chí trong nước, giai đoạn xuất bản quy định)</Label>
          <Textarea
            id="dj-tenbai"
            rows={2}
            className="min-h-[3.5rem] bg-white border-primary/20"
            disabled={readOnly}
            value={r.ten_bai_bao}
            onChange={(e) => onChange(patch(r, { ten_bai_bao: e.target.value }))}
          />
        </div>
        <div className="space-y-1.5">
          <Label htmlFor="dj-namxet">Năm xét công nhận sáng kiến</Label>
          <Input
            id="dj-namxet"
            type="text"
            inputMode="numeric"
            className="max-w-[8rem] bg-white border-primary/20"
            disabled={readOnly}
            value={r.nam_xet}
            onChange={(e) => onChange(patch(r, { nam_xet: e.target.value }))}
            placeholder="YYYY"
          />
        </div>
      </div>

      <fieldset className="space-y-3 rounded-md border border-border/60 p-3" disabled={readOnly}>
        <legend className="text-sm font-medium px-1">II. XÁC NHẬN VÀ CAM KẾT (☑ vào ô tương ứng)</legend>
        <label className="flex items-start gap-2 text-sm leading-snug cursor-pointer">
          <Checkbox
            className="mt-0.5"
            checked={r.cam_ket.thong_tin_trung_thuc}
            disabled={readOnly}
            onCheckedChange={(c) => onChange(patchCam(r, 'thong_tin_trung_thuc', c === true))}
          />
          <span>
            Tôi cam đoan các thông tin kê khai và minh chứng đính kèm đối với bài báo trên tạp chí trong nước là trung
            thực, đúng sự thật và phù hợp với thời điểm xuất bản trong giai đoạn quy định (15/4/2025–15/4/2026).
          </span>
        </label>
        <label className="flex items-start gap-2 text-sm leading-snug cursor-pointer">
          <Checkbox
            className="mt-0.5"
            checked={r.cam_ket.trach_nhiem_phap_luat}
            disabled={readOnly}
            onCheckedChange={(c) => onChange(patchCam(r, 'trach_nhiem_phap_luat', c === true))}
          />
          <span>
            Tôi hoàn toàn chịu trách nhiệm trước pháp luật và trước nhà trường về tính hợp pháp của bài báo và 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={r.cam_ket.bo_sung_khi_yeu_cau}
            disabled={readOnly}
            onCheckedChange={(c) => onChange(patchCam(r, 'bo_sung_khi_yeu_cau', c === true))}
          />
          <span>Tôi đồng ý bổ sung hoặc chỉnh sửa hồ sơ khi được yêu cầu.</span>
        </label>
      </fieldset>

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

      {!readOnly && (
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="text-muted-foreground"
          onClick={() => onChange(createEmptyResearchDomesticHonesty())}
        >
          Xóa nội dung biểu xác nhận
        </Button>
      )}
    </div>
  );
}
