import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { flushSync } from 'react-dom';
import { Plus, Trash2, Save, FileText, CheckCircle2, Upload } from 'lucide-react';
import { toast } from 'sonner';
import {
  Button,
  Input,
  Textarea,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Checkbox,
  Label,
  RadioGroup,
  RadioGroupItem,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  Badge,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  type ApplicantPrefill,
  type ApplicationFormState,
  type Author,
  type SupportStaff,
  type ResearchEvidenceKind,
  type TextbookEvidenceKind,
  type InitiativeClassification,
  type BanCamKet,
  type ReferenceMaterialHonesty,
  type ResearchDomesticHonesty,
  INITIAL_APPLICATION_FORM_STATE,
  ensureBanCamKet,
  ensureReferenceMaterialHonesty,
  ensureResearchDomesticHonesty,
  createEmptyBanCamKet,
  createEmptyReferenceMaterialHonesty,
  createEmptyResearchDomesticHonesty,
  isBanCamKetComplete,
  isReferenceMaterialHonestyComplete,
  isResearchDomesticHonestyComplete,
  useOptionalDraft,
  MAX_EVIDENCE_PDF_BYTES,
  MAX_EVIDENCE_PDF_LABEL,
  collectApplicationTabHonestyGaps,
  formatApplicantPrerequisiteToastDescription,
  normalizeDdMmYyyyInput,
  parseDdMmYyyy,
  normalizeDobInputToStored,
  displayDobStoredAsDdMm,
} from '@ump/shared';
import { AuthorArticleCommitmentForm } from '@/components/applicant/AuthorArticleCommitmentForm';
import { ReferenceMaterialHonestyForm } from '@/components/applicant/ReferenceMaterialHonestyForm';
import { DomesticJournalHonestyForm } from '@/components/applicant/DomesticJournalHonestyForm';
import { WorkplaceSelect } from '@/components/applicant/WorkplaceSelect';

interface InitiativeApplicationFormProps {
  onVerify?: (fieldName: string, content: string) => void;
  /** When true, all fields are non-interactive (e.g. staff review). Must be applied to every control — see handlers with `readOnly` guards. */
  readOnly?: boolean;
  showVerifyButton?: boolean; // Only Admin can see verify button
  applicantPrefill?: ApplicantPrefill;
  initialDraft?: Partial<ApplicationFormState>;
  onSaveDraft?: (data: ApplicationFormState) => Promise<void>;
  autoSaveDebounceMs?: number;
  onNext?: () => void;
}

function deriveRecognition(f: ApplicationFormState): {
  tier: 'excellent' | 'good' | null;
  groupKey: 'group1' | 'group2' | null;
  summaryVi: string;
} {
  const g1FromTextbookBook =
    f.initiativeClassification === 'textbook' &&
    f.textbookEvidenceKind === 'book' &&
    f.textbookEvidenceFile != null &&
    isBanCamKetComplete(f.banCamKet);
  const g1FromTextbookReference =
    f.initiativeClassification === 'textbook' &&
    f.textbookEvidenceKind === 'reference' &&
    f.textbookEvidenceFile != null &&
    isReferenceMaterialHonestyComplete(f.referenceMaterialHonesty);
  const g1FromInternational =
    f.initiativeClassification === 'research' &&
    f.researchEvidenceKind === 'international' &&
    f.researchEvidenceFile != null &&
    (isBanCamKetComplete(f.banCamKet) || f.internationalJournalDeclaration.trim().length > 0);
  const group1 = g1FromTextbookBook || g1FromTextbookReference || g1FromInternational;

  const g2FromResearchDomestic =
    f.initiativeClassification === 'research' &&
    f.researchEvidenceKind === 'domestic' &&
    f.researchEvidenceFile != null &&
    (isResearchDomesticHonestyComplete(ensureResearchDomesticHonesty(f.researchDomesticHonesty)) ||
      isBanCamKetComplete(ensureBanCamKet(f.banCamKet)));
  const g2FromResearchPoster =
    f.initiativeClassification === 'research' &&
    f.researchEvidenceKind === 'poster' &&
    f.researchEvidenceFile != null;
  const g2FromResearchPosterNoReview =
    f.initiativeClassification === 'research' &&
    f.researchEvidenceKind === 'poster-without-review' &&
    f.researchEvidenceFile != null;
  const g2FromTechnical =
    f.initiativeClassification === 'technical' && f.technicalEvidenceFile != null;
  const group2 =
    g2FromResearchDomestic || g2FromResearchPoster || g2FromResearchPosterNoReview || g2FromTechnical;

  if (group1) {
    return {
      tier: 'excellent',
      groupKey: 'group1',
      summaryVi:
        'Nhóm 2: Bài báo tạp chí quốc tế (kèm bản cam kết), hoặc sách/giáo trình (Xuất sắc, bản cam kết), hoặc tài liệu tham khảo (2.2.2, biểu xác nhận) — hồ sơ đủ điều kiện nhận diện là xuất sắc khi minh chứng PDF và biểu kê khai đầy đủ.',
    };
  }
  if (group2) {
    const summaryVi =
      f.initiativeClassification === 'technical'
        ? 'Nhóm 1 (hồ sơ chuyển hội đồng đánh giá): Đã có văn bản chính thức do lãnh đạo đơn vị trực thuộc hoặc trực thuộc trực tiếp Đại học Y Dược TP.HCM xác nhận về phê duyệt, triển khai và áp dụng sáng kiến trong đơn vị.'
        : 'Nhóm 2: Bài báo tạp chí trong nước (kèm biểu xác nhận khi đủ điều kiện), poster / báo cáo hội nghị có phản biện (kèm chứng minh phản biện khi yêu cầu), hoặc poster / báo cáo hội nghị không phản biện. Hồ sơ đủ điều kiện được nhận diện tự động là Khá.';
    return {
      tier: 'good',
      groupKey: 'group2',
      summaryVi,
    };
  }
  return { tier: null, groupKey: null, summaryVi: '' };
}

const FIRST_APPLY_DATE_MIN = new Date(2025, 3, 15);
const FIRST_APPLY_DATE_MAX = new Date(2026, 3, 15);

function nextStateForTextbookEvidenceKind(
  prev: ApplicationFormState,
  sub: TextbookEvidenceKind,
): ApplicationFormState {
  return {
    ...prev,
    textbookEvidenceKind: sub,
    textbookEvidenceFile: null,
    ...(sub === 'book'
      ? { referenceMaterialHonesty: createEmptyReferenceMaterialHonesty() }
      : { banCamKet: createEmptyBanCamKet() }),
  };
}

function nextStateForResearchEvidenceKind(
  prev: ApplicationFormState,
  kind: ResearchEvidenceKind,
): ApplicationFormState {
  const isIntl = kind === 'international';
  return {
    ...prev,
    researchEvidenceKind: kind,
    researchEvidenceFile: null,
    internationalJournalDeclaration: isIntl ? prev.internationalJournalDeclaration : '',
    banCamKet: isIntl ? prev.banCamKet : createEmptyBanCamKet(),
    researchDomesticHonesty:
      kind === 'domestic' ? prev.researchDomesticHonesty : createEmptyResearchDomesticHonesty(),
  };
}

function nextStateForInitiativeClassification(
  prev: ApplicationFormState,
  kind: 'technical' | 'research' | 'textbook',
  isOn: boolean,
): ApplicationFormState {
  if (!isOn) {
    if (prev.initiativeClassification !== kind) return prev;
    return {
      ...prev,
      initiativeClassification: null,
      textbookEvidenceFile: null,
      textbookEvidenceKind: '',
      researchEvidenceKind: '',
      researchEvidenceFile: null,
      internationalJournalDeclaration: '',
      banCamKet: createEmptyBanCamKet(),
      referenceMaterialHonesty: createEmptyReferenceMaterialHonesty(),
      researchDomesticHonesty: createEmptyResearchDomesticHonesty(),
      technicalEvidenceFile: null,
    };
  }
  let next: ApplicationFormState = {
    ...prev,
    initiativeClassification: kind,
  };
  if (kind === 'technical') {
    next = {
      ...next,
      textbookEvidenceFile: null,
      textbookEvidenceKind: '',
      researchEvidenceKind: '',
      researchEvidenceFile: null,
      internationalJournalDeclaration: '',
      banCamKet: createEmptyBanCamKet(),
      referenceMaterialHonesty: createEmptyReferenceMaterialHonesty(),
      researchDomesticHonesty: createEmptyResearchDomesticHonesty(),
      technicalEvidenceFile: prev.technicalEvidenceFile,
    };
  } else if (kind === 'research') {
    next = {
      ...next,
      textbookEvidenceFile: null,
      textbookEvidenceKind: '',
      referenceMaterialHonesty: createEmptyReferenceMaterialHonesty(),
      researchDomesticHonesty: createEmptyResearchDomesticHonesty(),
      technicalEvidenceFile: null,
    };
  } else {
    next = {
      ...next,
      researchEvidenceKind: '',
      researchEvidenceFile: null,
      internationalJournalDeclaration: '',
      researchDomesticHonesty: createEmptyResearchDomesticHonesty(),
      technicalEvidenceFile: null,
    };
  }
  return next;
}

export default function InitiativeApplicationForm({
  onVerify,
  readOnly = false,
  showVerifyButton = false,
  applicantPrefill,
  initialDraft,
  onSaveDraft,
  autoSaveDebounceMs,
  onNext,
}: InitiativeApplicationFormProps) {
  const draftCtx = useOptionalDraft();
  const [formData, setFormData] = useState<ApplicationFormState>(INITIAL_APPLICATION_FORM_STATE);
  const formDataRef = useRef(formData);
  formDataRef.current = formData;
  const [isAdvancing, setIsAdvancing] = useState(false);
  const autoSaveSkipRef = useRef(true);

  useEffect(() => {
    if (!onSaveDraft || !autoSaveDebounceMs || readOnly) return;
    if (autoSaveSkipRef.current) {
      autoSaveSkipRef.current = false;
      return;
    }
    const id = window.setTimeout(() => {
      void (async () => {
        try {
          await onSaveDraft(formData);
        } catch (e) {
          console.error("Đơn đề nghị — tự động lưu bản nháp thất bại:", e);
        }
      })();
    }, autoSaveDebounceMs);
    return () => window.clearTimeout(id);
  }, [formData, onSaveDraft, autoSaveDebounceMs, readOnly]);

  useEffect(() => {
    if (draftCtx) return;
    if (!applicantPrefill) return;
    setFormData((prev) => {
      const next = { ...prev };
      if (applicantPrefill.initiativeName) next.initiativeName = applicantPrefill.initiativeName;
      if (applicantPrefill.authorName) {
        const first = prev.authors[0];
        next.authors = [
          { ...first, name: applicantPrefill.authorName },
          ...prev.authors.slice(1),
        ];
      }
      return next;
    });
  }, [applicantPrefill?.initiativeName, applicantPrefill?.authorName, draftCtx]);

  useEffect(() => {
    if (draftCtx) return;
    if (!initialDraft) return;
    setFormData((prev) => {
      const merged = { ...prev, ...initialDraft };
      return {
        ...merged,
        honestyConfirmed: Boolean(merged.honestyConfirmed),
        banCamKet: ensureBanCamKet(merged.banCamKet as BanCamKet | undefined),
        referenceMaterialHonesty: ensureReferenceMaterialHonesty(
          merged.referenceMaterialHonesty as ReferenceMaterialHonesty | undefined,
        ),
        researchDomesticHonesty: ensureResearchDomesticHonesty(
          merged.researchDomesticHonesty as ResearchDomesticHonesty | undefined,
        ),
      };
    });
  }, [initialDraft, draftCtx]);

  useEffect(() => {
    if (!draftCtx || readOnly) return;
    let cancelled = false;
    draftCtx.hydrateApplication().then((s) => {
      if (cancelled) return;
      setFormData(() => {
        const next = { ...s };
        const authors = applicantPrefill?.authorName
          ? [
              { ...next.authors[0], name: applicantPrefill.authorName },
              ...next.authors.slice(1),
            ]
          : next.authors;
        return {
          ...next,
          initiativeName: applicantPrefill?.initiativeName ?? next.initiativeName,
          authors,
          honestyConfirmed: Boolean(next.honestyConfirmed),
          banCamKet: ensureBanCamKet(next.banCamKet as BanCamKet | undefined),
          referenceMaterialHonesty: ensureReferenceMaterialHonesty(
            next.referenceMaterialHonesty as ReferenceMaterialHonesty | undefined,
          ),
          researchDomesticHonesty: ensureResearchDomesticHonesty(
            next.researchDomesticHonesty as ResearchDomesticHonesty | undefined,
          ),
        };
      });
    });
    return () => {
      cancelled = true;
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps -- re-hydrate when draftId or prefill identity changes
  }, [draftCtx?.draft.draftId, readOnly, applicantPrefill?.initiativeName, applicantPrefill?.authorName]);

  const syncAppPatch = (patch: Partial<ApplicationFormState>) => {
    if (draftCtx && !readOnly) void draftCtx.updateApplication(patch);
  };

  /**
   * "Tên sáng kiến" (§2) is the same value as Báo cáo §2.1 and Bản xác nhận (`report.initiativeName` + tab đóng góp).
   * Kept in sync with {@link InitiativeReportForm} / {@link ContributionConfirmationForm} via draft context.
   */
  const handleInitiativeNameChange = useCallback(
    (value: string) => {
      if (readOnly) return;
      setFormData((prev) => ({ ...prev, initiativeName: value }));
      if (draftCtx && !readOnly) {
        void draftCtx.updateApplication({ initiativeName: value });
        draftCtx.updateReport({ initiativeName: value });
      }
    },
    [draftCtx, readOnly],
  );

  /**
   * When báo cáo / xác nhận update the name elsewhere, keep Đơn aligned (application is canonical).
   * Do not depend on `draftCtx` identity: `DraftProvider`'s memo includes `draft`, so the context
   * value changes on every field patch — listing `draftCtx` here re-ran this effect on each keystroke.
   */
  useEffect(() => {
    if (!draftCtx || readOnly) return;
    const appName = draftCtx.draft.application.initiativeName ?? '';
    setFormData((prev) => {
      if (prev.initiativeName === appName) return prev;
      return { ...prev, initiativeName: appName };
    });
    const reportName = draftCtx.draft.report.initiativeName ?? '';
    if (reportName !== appName) {
      draftCtx.updateReport({ initiativeName: appName });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- omit unstable `draftCtx`; use draft primitives + stable updateReport
  }, [
    readOnly,
    draftCtx?.draft.draftId,
    draftCtx?.draft.application.initiativeName,
    draftCtx?.draft.report.initiativeName,
  ]);

  /**
   * Flush đơn to the draft, persist tab JSON if configured, then run `onNext`
   * (Dashboard uses this to open « Xác nhận Tỷ lệ Đóng góp »).
   */
  const handleNext = async () => {
    if (isAdvancing) return;
    setIsAdvancing(true);
    try {
      if (draftCtx && !readOnly) {
        await draftCtx.updateApplication(formData);
      }
      if (onSaveDraft) {
        await onSaveDraft(formData);
      }
      onNext?.();
    } finally {
      setIsAdvancing(false);
    }
  };

  const recognition = useMemo(() => deriveRecognition(formData), [formData]);
  const applicationHonestyPrerequisiteGaps = useMemo(
    () => collectApplicationTabHonestyGaps(formData),
    [formData],
  );
  const firstApplyDateError = useMemo(() => {
    if (!formData.firstApplyDate) return '';
    const parsedDate = parseDdMmYyyy(formData.firstApplyDate);
    if (!parsedDate) return 'Ngày không hợp lệ. Vui lòng nhập đúng định dạng dd/mm/yyyy.';
    if (parsedDate < FIRST_APPLY_DATE_MIN || parsedDate > FIRST_APPLY_DATE_MAX) {
      return 'Ngày áp dụng lần đầu phải nằm trong khoảng từ 15/04/2025 đến 15/04/2026.';
    }
    return '';
  }, [formData.firstApplyDate]);

  const handleInputChange = (field: keyof ApplicationFormState, value: unknown) => {
    if (readOnly) return;
    setFormData((prev) => ({ ...prev, [field]: value }));
    syncAppPatch({ [field]: value } as Partial<ApplicationFormState>);
  };

  const handleBanCamKetChange = (next: BanCamKet) => {
    if (readOnly) return;
    setFormData((prev) => ({ ...prev, banCamKet: next }));
    if (draftCtx && !readOnly) void draftCtx.updateApplication({ banCamKet: next });
  };

  const handleReferenceMaterialHonestyChange = (next: ReferenceMaterialHonesty) => {
    if (readOnly) return;
    setFormData((prev) => ({ ...prev, referenceMaterialHonesty: next }));
    if (draftCtx && !readOnly) void draftCtx.updateApplication({ referenceMaterialHonesty: next });
  };

  const handleResearchDomesticHonestyChange = (next: ResearchDomesticHonesty) => {
    if (readOnly) return;
    setFormData((prev) => ({ ...prev, researchDomesticHonesty: next }));
    if (draftCtx && !readOnly) void draftCtx.updateApplication({ researchDomesticHonesty: next });
  };

  /** Reject PDFs over 50 MB before draft/MinIO; keeps input and form state aligned. */
  const handleEvidencePdfChange = (
    field: 'textbookEvidenceFile' | 'researchEvidenceFile' | 'technicalEvidenceFile',
    e: React.ChangeEvent<HTMLInputElement>,
  ) => {
    if (readOnly) {
      e.currentTarget.value = "";
      return;
    }
    const file = e.target.files?.[0] ?? null;
    if (file && file.size > MAX_EVIDENCE_PDF_BYTES) {
      toast.error(
        `Tệp PDF không được vượt quá ${MAX_EVIDENCE_PDF_LABEL} (hiện: ${(file.size / 1024 / 1024).toFixed(1)} MB).`,
      );
      e.currentTarget.value = '';
      return;
    }
    handleInputChange(field, file);
  };

  const setInitiativeClassification = (
    kind: 'technical' | 'research' | 'textbook',
    checked: boolean | 'indeterminate',
  ) => {
    if (readOnly) return;
    const isOn = checked === true;
    let changed = false;
    flushSync(() => {
      setFormData((prev) => {
        const next = nextStateForInitiativeClassification(prev, kind, isOn);
        changed = next !== prev;
        return next;
      });
    });
    if (draftCtx && !readOnly && changed) {
      void draftCtx.updateApplication(formDataRef.current);
    }
  };

  // Author Table Logic
  const addAuthor = () => {
    if (readOnly) return;
    const newAuthor: Author = {
      id: Date.now(),
      name: '',
      dob: '',
      workplace: '',
      title: '',
      qualification: '',
      contributionPercent: 0,
    };
    flushSync(() => {
      setFormData((prev) => ({ ...prev, authors: [...prev.authors, newAuthor] }));
    });
    if (draftCtx && !readOnly) {
      void draftCtx.updateApplication({ authors: formDataRef.current.authors });
    }
  };

  const updateAuthor = (id: number, field: keyof Author, value: unknown) => {
    if (readOnly) return;
    flushSync(() => {
      setFormData((prev) => ({
        ...prev,
        authors: prev.authors.map((a) => (a.id === id ? { ...a, [field]: value } : a)),
      }));
    });
    if (draftCtx && !readOnly) {
      const nextAuthors = formDataRef.current.authors;
      void draftCtx.updateApplication({ authors: nextAuthors });
      const first = nextAuthors[0];
      if (first && first.id === id && field === 'name') {
        const n = String(value ?? '');
        draftCtx.updateReport({ representativeAuthor: n, authorName: n });
      }
    }
  };

  const removeAuthor = (id: number) => {
    if (readOnly) return;
    flushSync(() => {
      setFormData((prev) => ({
        ...prev,
        authors: prev.authors.filter((a) => a.id !== id),
      }));
    });
    if (draftCtx && !readOnly) {
      const nextAuthors = formDataRef.current.authors;
      void draftCtx.updateApplication({ authors: nextAuthors });
      const first = nextAuthors[0];
      const n = first?.name ?? '';
      draftCtx.updateReport({ representativeAuthor: n, authorName: n });
    }
  };

  const totalContribution = formData.authors.reduce((sum, a) => sum + Number(a.contributionPercent), 0);

  // Support Staff Table Logic
  const addSupportStaff = () => {
    if (readOnly) return;
    const newStaff: SupportStaff = {
      id: Date.now(),
      name: '',
      dob: '',
      workplace: '',
      title: '',
      qualification: '',
      supportContent: '',
    };
    flushSync(() => {
      setFormData((prev) => ({ ...prev, supportStaff: [...prev.supportStaff, newStaff] }));
    });
    if (draftCtx && !readOnly) {
      void draftCtx.updateApplication({ supportStaff: formDataRef.current.supportStaff });
    }
  };

  const updateSupportStaff = (id: number, field: keyof SupportStaff, value: unknown) => {
    if (readOnly) return;
    flushSync(() => {
      setFormData((prev) => ({
        ...prev,
        supportStaff: prev.supportStaff.map((s) => (s.id === id ? { ...s, [field]: value } : s)),
      }));
    });
    if (draftCtx && !readOnly) {
      void draftCtx.updateApplication({ supportStaff: formDataRef.current.supportStaff });
    }
  };

  const removeSupportStaff = (id: number) => {
    if (readOnly) return;
    flushSync(() => {
      setFormData((prev) => ({
        ...prev,
        supportStaff: prev.supportStaff.filter((s) => s.id !== id),
      }));
    });
    if (draftCtx && !readOnly) {
      void draftCtx.updateApplication({ supportStaff: formDataRef.current.supportStaff });
    }
  };

  const handleVerify = (fieldName: string, content: string) => {
    if (onVerify && content.trim()) {
      onVerify(fieldName, content);
    }
  };

  const VerifyButton = ({ fieldName, content }: { fieldName: string; content: string }) => {
    if (!showVerifyButton) return null;
    return (
      <Button
        type="button"
        variant="outline"
        size="sm"
        className="mt-2 gap-1 text-xs"
        onClick={() => handleVerify(fieldName, content)}
        disabled={!content.trim()}
      >
        <CheckCircle2 size={14} />
        Kiểm tra
      </Button>
    );
  };

  return (
    <Card className="border-border shadow-lg">
      {/* Header Section */}
      <CardHeader className="relative border-b border-border pb-4">
        <div className="text-center mt-6">
          <CardTitle className="text-2xl font-bold uppercase mb-2">
            ĐƠN ĐỀ NGHỊ CÔNG NHẬN SÁNG KIẾN
          </CardTitle>
          <p className="text-sm font-semibold text-muted-foreground">
            Kính gửi: Hội đồng sáng kiến Đại học Y Dược TP. Hồ Chí Minh
          </p>
        </div>
      </CardHeader>

      <CardContent className="p-6 md:p-8 space-y-6">
        {/* 1. Authors Table */}
        <section>
          <div className="flex justify-between items-center mb-2">
            <label className="font-bold text-foreground">1. Tên tôi (chúng tôi) là:</label>
            <Button
              type="button"
              onClick={addAuthor}
              size="sm"
              variant="secondary"
              className="gap-1"
              disabled={readOnly}
            >
              <Plus size={14}/> Thêm tác giả
            </Button>
          </div>
          <div className="overflow-x-auto border border-border rounded-lg">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-12">STT</TableHead>
                  <TableHead>Họ và tên</TableHead>
                  <TableHead className="w-28">Ngày sinh</TableHead>
                  <TableHead>Nơi công tác</TableHead>
                  <TableHead>Chức danh</TableHead>
                  <TableHead>Trình độ CM</TableHead>
                  <TableHead className="w-20">% Đóng góp</TableHead>
                  <TableHead className="w-12"></TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {formData.authors.map((author, idx) => (
                  <TableRow key={author.id}>
                    <TableCell className="text-center">{idx + 1}</TableCell>
                    <TableCell>
                      <Input 
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                        placeholder="Nhập họ và tên..."
                        value={author.name} 
                        onChange={(e) => updateAuthor(author.id, 'name', e.target.value)} 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <Input 
                        type="text"
                        inputMode="numeric"
                        placeholder="dd/mm/yyyy"
                        maxLength={10}
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                        value={displayDobStoredAsDdMm(author.dob)} 
                        onChange={(e) =>
                          updateAuthor(author.id, 'dob', normalizeDobInputToStored(e.target.value))
                        } 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <WorkplaceSelect
                        value={author.workplace}
                        onValueChange={(v) => updateAuthor(author.id, 'workplace', v)}
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <Input 
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                        value={author.title} 
                        onChange={(e) => updateAuthor(author.id, 'title', e.target.value)} 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <Input 
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                        value={author.qualification} 
                        onChange={(e) => updateAuthor(author.id, 'qualification', e.target.value)} 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <Input 
                        type="number"
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1 text-center"
                        value={author.contributionPercent} 
                        onChange={(e) => updateAuthor(author.id, 'contributionPercent', e.target.value)} 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell className="text-center">
                      {formData.authors.length > 1 && (
                        <Button 
                          type="button" 
                          variant="ghost" 
                          size="icon"
                          onClick={() => removeAuthor(author.id)}
                          className="text-destructive hover:text-destructive hover:bg-destructive/10"
                          disabled={readOnly}
                        >
                          <Trash2 size={14} />
                        </Button>
                      )}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
          {totalContribution !== 100 && (
            <p className="text-destructive text-xs mt-1">* Tổng tỷ lệ đóng góp phải là 100% (Hiện tại: {totalContribution}%)</p>
          )}
        </section>

        {/* 2. General Info */}
        <section className="space-y-4">
          <div>
            <label className="font-bold block text-foreground">2. Tên sáng kiến đề nghị công nhận:</label>
            <Input 
              className="bg-white border-primary/20"
              placeholder="Nhập tên sáng kiến..."
              value={formData.initiativeName}
              onChange={(e) => handleInitiativeNameChange(e.target.value)}
              disabled={readOnly}
            />
          </div>
          <div>
            <label className="font-bold block text-foreground">Chủ đầu tư tạo ra sáng kiến (nếu khác tác giả):</label>
            <Input 
              className="bg-white border-primary/20"
              value={formData.investorName}
              onChange={(e) => handleInputChange('investorName', e.target.value)}
              disabled={readOnly}
            />
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="font-bold block text-foreground">Lĩnh vực áp dụng:</label>
              <Input 
                className="bg-white border-primary/20"
                value={formData.applicationField}
                onChange={(e) => handleInputChange('applicationField', e.target.value)}
                disabled={readOnly}
              />
            </div>
            <div>
              <label className="font-bold block text-foreground">Ngày sáng kiến được áp dụng lần đầu:</label>
              <Input 
                className="bg-white border-primary/20"
                type="text"
                inputMode="numeric"
                placeholder="dd/mm/yyyy"
                maxLength={10}
                value={formData.firstApplyDate}
                onChange={(e) => handleInputChange('firstApplyDate', normalizeDdMmYyyyInput(e.target.value))}
                disabled={readOnly}
              />
              <p className={`mt-1 text-xs ${firstApplyDateError ? 'text-destructive' : 'text-muted-foreground'}`}>
                {firstApplyDateError || 'Định dạng: dd/mm/yyyy (15/04/2025 - 15/04/2026).'}
              </p>
            </div>
          </div>
        </section>

        {/* 3. Classification */}
        <section className="border border-border p-4 rounded bg-muted/30 space-y-4">
          <label className="font-bold block text-foreground">3. Phân loại sáng kiến (Chọn ô phù hợp):</label>

          {recognition.tier && (
            <div className="flex flex-col sm:flex-row sm:items-start gap-2 rounded-md border border-primary/30 bg-primary/5 p-3">
              <Badge variant={recognition.tier === 'excellent' ? 'default' : 'secondary'} className="shrink-0 w-fit">
                {recognition.tier === 'excellent'
                  ? 'Nhóm 1 — Xuất sắc'
                  : formData.initiativeClassification === 'technical'
                    ? 'Nhóm 01 — Tốt'
                    : 'Nhóm 2 — Tốt'}
              </Badge>
              <p className="text-sm text-foreground">{recognition.summaryVi}</p>
            </div>
          )}

          <div className="space-y-3">
            <label className="flex items-start gap-2 cursor-pointer">
              <Checkbox
                checked={formData.initiativeClassification === 'technical'}
                disabled={readOnly}
                onCheckedChange={(c) => setInitiativeClassification('technical', c)}
              />
              <span className="text-sm space-y-1.5">
                <span className="block font-medium text-foreground">
                  Nhóm 1 - Giải pháp kỹ thuật, quản lý, tác nghiệp, ứng dụng tiến bộ kỹ thuật áp dụng cho Đại học Y Dược TP.HCM
                </span>
                <span className="block text-xs text-muted-foreground leading-relaxed">
                  Bắt buộc kèm minh chứng: văn bản có xác nhận của lãnh đạo đơn vị thuộc, trực thuộc Đại học Y Dược TP.HCM chứng minh việc phê duyệt, triển khai và áp dụng sáng kiến trong đơn vị (tải file PDF bên dưới).{' '}
                </span>
              </span>
            </label>
            <label className="flex items-start gap-2 cursor-pointer">
              <Checkbox
                checked={formData.initiativeClassification === 'research'}
                disabled={readOnly}
                onCheckedChange={(c) => setInitiativeClassification('research', c)}
              />
              <span className="text-sm space-y-1.5">
                <span className="block font-medium text-foreground">
                Nhóm 2.1 - Sáng kiến – cải tiến kỹ thuật từ các nghiên cứu khoa học (đã đăng tạp chí/hội nghị)
                </span>
                <span className="block text-xs text-muted-foreground leading-relaxed">
                  Bắt buộc kèm minh chứng: bài báo đã được xuất bản trong giai đoạn từ 15/4/2025-15/4/2026 (tải file PDF bên dưới).{' '}
                </span>
              </span>
            </label>
            <label className="flex items-start gap-2 cursor-pointer">
              <Checkbox
                checked={formData.initiativeClassification === 'textbook'}
                disabled={readOnly}
                onCheckedChange={(c) => setInitiativeClassification('textbook', c)}
              />
              <span className="text-sm space-y-1.5">
                <span className="block font-medium text-foreground">
                Nhóm 2.2 - Sáng kiến – cải tiến kỹ thuật từ sách, giáo trình, tài liệu tham khảo
                </span>
                <span className="block text-xs text-muted-foreground leading-relaxed">
                  Bắt buộc kèm minh chứng: Quyết định xuất bản sách/giáo trình/tài liệu trong giai đoạn từ 15/4/2025-15/4/2026, kèm theo trang bìa, bìa phụ, mục lục (tải file PDF bên dưới).{' '}
                  
                </span>
              </span>
               </label>
          </div>

          {formData.initiativeClassification === 'textbook' && (
            <div className="space-y-3 rounded-md border border-border bg-background p-3">
              <Label className="text-sm font-semibold text-foreground">
                Minh chứng PDF — Sách / giáo trình / tài liệu tham khảo{' '}
                <span className="text-muted-foreground font-normal">(Nhóm 2.2)</span>
              </Label>
              <RadioGroup
                className="space-y-2"
                disabled={readOnly}
                value={formData.textbookEvidenceKind}
                onValueChange={(v) => {
                  const sub = v as TextbookEvidenceKind;
                  flushSync(() => {
                    setFormData((prev) => nextStateForTextbookEvidenceKind(prev, sub));
                  });
                  if (draftCtx && !readOnly) {
                    void draftCtx.updateApplication(formDataRef.current);
                  }
                }}
              >
                <div className="flex items-start gap-2">
                  <RadioGroupItem value="book" id="tb2-book" className="mt-0.5" />
                  <Label htmlFor="tb2-book" className="font-normal cursor-pointer leading-snug">
                    2.2.1 - Sách, giáo trình{' '}
                    <span className="text-muted-foreground">
                      (Quyết định xuất bản trong giai đoạn 15/4/2025–15/4/2026 kèm bản cam kết của tác giả)
                    </span>
                  </Label>
                </div>
                {/* <div className="flex items-start gap-2">
                  <RadioGroupItem value="reference" id="tb2-ref" className="mt-0.5" />
                  <Label htmlFor="tb2-ref" className="font-normal cursor-pointer leading-snug">
                    2.2.2 — Tài liệu tham khảo{' '}
                    <span className="text-muted-foreground">
                      (Quyết định xuất bản tài liệu trong giai đoạn 15/4/2025–15/4/2026; PDF + biểu xác nhận)
                    </span>
                  </Label>
                </div> */}
              </RadioGroup>

              {formData.textbookEvidenceKind === 'book' && (
                <Tabs defaultValue="pdf" className="w-full">
                  <TabsList className="grid w-full max-w-md grid-cols-2">
                    <TabsTrigger value="pdf" disabled={readOnly}>
                      Tải PDF minh chứng
                    </TabsTrigger>
                    <TabsTrigger value="declaration" disabled={readOnly}>
                      Bản cam kết của tác giả
                    </TabsTrigger>
                  </TabsList>
                  <TabsContent value="pdf" className="space-y-2 pt-2">
                    <p className="text-xs text-muted-foreground">
                      Tải Quyết định xuất bản, trang bìa, bìa phụ, mục lục (không tải toàn bộ sách).
                    </p>
                    <Input
                      type="file"
                      accept="application/pdf"
                      disabled={readOnly}
                      className="max-w-md cursor-pointer disabled:cursor-not-allowed"
                      onChange={(e) => handleEvidencePdfChange('textbookEvidenceFile', e)}
                    />
                    {formData.textbookEvidenceFile && (
                      <span className="text-xs text-muted-foreground flex items-center gap-1">
                        <Upload className="h-3.5 w-3.5" />
                        {formData.textbookEvidenceFile.name}
                      </span>
                    )}
                  </TabsContent>
                  <TabsContent value="declaration" className="space-y-2 pt-2">
                    <AuthorArticleCommitmentForm
                      value={formData.banCamKet}
                      onChange={handleBanCamKetChange}
                      readOnly={readOnly}
                      quickFill={{
                        authorName: formData.authors[0]?.name ?? '',
                        unitName: formData.unitName,
                        submissionDay: Number(formData.submissionDay) || new Date().getDate(),
                        submissionMonth: Number(formData.submissionMonth) || new Date().getMonth() + 1,
                        submissionYear: String(formData.submissionYear || new Date().getFullYear()),
                      }}
                    />
                  </TabsContent>
                </Tabs>
              )}

              {formData.textbookEvidenceKind === 'reference' && (
                <Tabs defaultValue="pdf" className="w-full">
                  <TabsList className="grid w-full max-w-md grid-cols-2">
                    <TabsTrigger value="pdf" disabled={readOnly}>
                      Tải PDF minh chứng
                    </TabsTrigger>
                    <TabsTrigger value="declaration" disabled={readOnly}>
                      Biểu xác nhận (2.2.2)
                    </TabsTrigger>
                  </TabsList>
                  <TabsContent value="pdf" className="space-y-2 pt-2">
                    <p className="text-xs text-muted-foreground">
                      Tải Quyết định xuất bản tài liệu tham khảo, trang bìa, bìa phụ, mục lục (không tải toàn bộ tài
                      liệu).
                    </p>
                    <Input
                      type="file"
                      accept="application/pdf"
                      disabled={readOnly}
                      className="max-w-md cursor-pointer disabled:cursor-not-allowed"
                      onChange={(e) => handleEvidencePdfChange('textbookEvidenceFile', e)}
                    />
                    {formData.textbookEvidenceFile && (
                      <span className="text-xs text-muted-foreground flex items-center gap-1">
                        <Upload className="h-3.5 w-3.5" />
                        {formData.textbookEvidenceFile.name}
                      </span>
                    )}
                  </TabsContent>
                  <TabsContent value="declaration" className="space-y-2 pt-2">
                    <ReferenceMaterialHonestyForm
                      value={formData.referenceMaterialHonesty}
                      onChange={handleReferenceMaterialHonestyChange}
                      readOnly={readOnly}
                      quickFill={{
                        authorName: formData.authors[0]?.name ?? '',
                        unitName: formData.unitName,
                        submissionDay: Number(formData.submissionDay) || new Date().getDate(),
                        submissionMonth: Number(formData.submissionMonth) || new Date().getMonth() + 1,
                        submissionYear: String(formData.submissionYear || new Date().getFullYear()),
                      }}
                    />
                  </TabsContent>
                </Tabs>
              )}
            </div>
          )}

          {formData.initiativeClassification === 'research' && (
            <div className="space-y-3 rounded-md border border-border bg-background p-3">
              <Label className="text-sm font-semibold text-foreground">Minh chứng từ công bố nghiên cứu (chọn loại và tải PDF)</Label>
              <RadioGroup
                className="space-y-2"
                disabled={readOnly}
                value={formData.researchEvidenceKind}
                onValueChange={(v) => {
                  const kind = v as ResearchEvidenceKind;
                  flushSync(() => {
                    setFormData((prev) => nextStateForResearchEvidenceKind(prev, kind));
                  });
                  if (draftCtx && !readOnly) {
                    void draftCtx.updateApplication(formDataRef.current);
                  }
                }}
              >
                <div className="flex items-start gap-2">
                  <RadioGroupItem value="international" id="r21-intl" className="mt-0.5" />
                  <Label htmlFor="r21-intl" className="font-normal cursor-pointer leading-snug">
                    2.1.1 - Bài báo tạp chí quốc tế <span className="text-muted-foreground">(Minh chứng bài báo xuất bản giai đoạn từ 15/4/2025-15/4/2025 kèm bản cam kết của tác giả)</span>
                  </Label>
                </div>
                <div className="flex items-start gap-2">
                  <RadioGroupItem value="domestic" id="r21-dom" className="mt-0.5" />
                  <Label htmlFor="r21-dom" className="font-normal cursor-pointer leading-snug">
                    2.1.2 - Bài báo tạp chí trong nước{' '}
                    <span className="text-muted-foreground">
                      (Minh chứng bài báo xuất bản giai đoạn 15/4/2025–15/4/2026)
                    </span>
                  </Label>
                </div>
                <div className="flex items-start gap-2">
                  <RadioGroupItem value="poster" id="r21-post" className="mt-0.5" />
                  <Label htmlFor="r21-post" className="font-normal cursor-pointer leading-snug">
                  2.1.3 - Poster, báo cáo hội nghị có phản biện{' '}
                    <span className="text-muted-foreground">
                      (Minh chứng poster/báo cáo hội nghị giai đoạn 15/4/2025–15/4/2026 kèm minh chứng bình duyệt của hội nghị)
                    </span>
                  </Label>
                </div>
                <div className="flex items-start gap-2">
                  <RadioGroupItem value="poster-without-review" id="r21-post-without-review" className="mt-0.5" />
                  <Label htmlFor="r21-post-without-review" className="font-normal cursor-pointer leading-snug">
                  2.1.4 - Poster, báo cáo hội nghị không có phản biện{' '}
                    <span className="text-muted-foreground">
                      (Minh chứng poster/báo cáo hội nghị giai đoạn 15/4/2025–15/4/2026)
                    </span>
                  </Label>
                </div>
              </RadioGroup>

              {formData.researchEvidenceKind === 'international'  && (
                <Tabs defaultValue="pdf" className="w-full">
                  <TabsList className="grid w-full max-w-md grid-cols-2">
                    <TabsTrigger value="pdf" disabled={readOnly}>
                      Tải PDF bài báo
                    </TabsTrigger>
                    <TabsTrigger value="declaration" disabled={readOnly}>
                      Bản cam kết của tác giả
                    </TabsTrigger>
                  </TabsList>
                  <TabsContent value="pdf" className="space-y-2 pt-2">
                    <p className="text-xs text-muted-foreground">Tải bản PDF bài báo trên tạp chí quốc tế.</p>
                    <Input
                      type="file"
                      accept="application/pdf"
                      disabled={readOnly}
                      onChange={(e) => handleEvidencePdfChange('researchEvidenceFile', e)}
                    />
                    {formData.researchEvidenceFile && (
                      <span className="text-xs text-muted-foreground flex items-center gap-1">
                        <Upload className="h-3.5 w-3.5" />
                        {formData.researchEvidenceFile.name}
                      </span>
                    )}
                  </TabsContent>
                  <TabsContent value="declaration" className="space-y-2 pt-2">
                    <AuthorArticleCommitmentForm
                      value={formData.banCamKet}
                      onChange={handleBanCamKetChange}
                      readOnly={readOnly}
                      quickFill={{
                        authorName: formData.authors[0]?.name ?? '',
                        unitName: formData.unitName,
                        submissionDay: Number(formData.submissionDay) || new Date().getDate(),
                        submissionMonth: Number(formData.submissionMonth) || new Date().getMonth() + 1,
                        submissionYear: String(formData.submissionYear || new Date().getFullYear()),
                      }}
                    />
                  </TabsContent>
                </Tabs>
              )}

              {formData.researchEvidenceKind === 'domestic' && (
                <Tabs defaultValue="pdf" className="w-full">
                  <TabsList className="grid w-full max-w-md grid-cols-2">
                    <TabsTrigger value="pdf" disabled={readOnly}>
                      Tải PDF bài báo
                    </TabsTrigger>
                    <TabsTrigger value="declaration" disabled={readOnly}>
                      Bản cam kết của tác giả
                    </TabsTrigger>
                  </TabsList>
                  <TabsContent value="pdf" className="space-y-2 pt-2">
                    <p className="text-xs text-muted-foreground">Tải bản PDF bài báo trên tạp chí trong nước (giai đoạn quy định).</p>
                    <Input
                      type="file"
                      accept="application/pdf"
                      disabled={readOnly}
                      onChange={(e) => handleEvidencePdfChange('researchEvidenceFile', e)}
                    />
                    {formData.researchEvidenceFile && (
                      <span className="text-xs text-muted-foreground flex items-center gap-1">
                        <Upload className="h-3.5 w-3.5" />
                        {formData.researchEvidenceFile.name}
                      </span>
                    )}
                  </TabsContent>
                  <TabsContent value="declaration" className="space-y-2 pt-2">
                    <AuthorArticleCommitmentForm
                      value={formData.banCamKet}
                      onChange={handleBanCamKetChange}
                      readOnly={readOnly}
                      quickFill={{
                        authorName: formData.authors[0]?.name ?? '',
                        unitName: formData.unitName,
                        submissionDay: Number(formData.submissionDay) || new Date().getDate(),
                        submissionMonth: Number(formData.submissionMonth) || new Date().getMonth() + 1,
                        submissionYear: String(formData.submissionYear || new Date().getFullYear()),
                      }}
                    />
                  </TabsContent>
                </Tabs>
              )}

              {(formData.researchEvidenceKind === 'poster' ||
                formData.researchEvidenceKind === 'poster-without-review') && (
                <div className="space-y-2">
                  <p className="text-xs text-muted-foreground">
                    {formData.researchEvidenceKind === 'poster'
                      ? 'Tải PDF poster hoặc báo cáo hội nghị và tài liệu chứng minh phản biện (nếu có).'
                      : 'Tải PDF poster hoặc báo cáo hội nghị không phản biện (nếu có).'}
                  </p>
                  <Input
                    className="bg-white border-primary/20 cursor-pointer disabled:cursor-not-allowed"
                    type="file"
                    accept="application/pdf"
                    disabled={readOnly}
                    onChange={(e) => handleEvidencePdfChange('researchEvidenceFile', e)}
                  />
                  {formData.researchEvidenceFile && (
                    <span className="text-xs text-muted-foreground flex items-center gap-1">
                      <Upload className="h-3.5 w-3.5" />
                      {formData.researchEvidenceFile.name}
                    </span>
                  )}
                </div>
              )}
            </div>
          )}

          {formData.initiativeClassification === 'technical' && (
            <div className="space-y-3 rounded-md border border-border bg-background p-3">
              <Label className="text-sm font-semibold text-foreground">
                Minh chứng PDF — Nhóm 01 (bắt buộc)
              </Label>
              <p className="text-xs text-muted-foreground leading-relaxed">
                Tải lên bản PDF văn bản chính thức do lãnh đạo đơn vị trực thuộc hoặc trực thuộc trực tiếp Đại học Y Dược TP.HCM ký xác nhận, ghi rõ việc phê duyệt, triển khai và áp dụng sáng kiến tại đơn vị.
              </p>
              <div className="flex flex-wrap items-center gap-2">
                <Input
                  type="file"
                  accept="application/pdf"
                  disabled={readOnly}
                  className="max-w-md bg-white border-primary/20 cursor-pointer disabled:cursor-not-allowed"
                  onChange={(e) => handleEvidencePdfChange('technicalEvidenceFile', e)}
                />
                {formData.technicalEvidenceFile && (
                  <span className="text-xs text-muted-foreground flex items-center gap-1">
                    <Upload className="h-3.5 w-3.5" />
                    {formData.technicalEvidenceFile.name}
                  </span>
                )}
              </div>
            </div>
          )}
        </section>

        {/* 4. Content Details */}
        <section className="space-y-4">
          <div>
            <label className="font-bold block mb-1 text-foreground">4. Nội dung của sáng kiến:</label>
            <p className="text-xs italic text-muted-foreground mb-1">(Mô tả ngắn gọn, đầy đủ các bước thực hiện, kết quả, hiệu quả thử nghiệm)</p>
            <Textarea 
              className="min-h-32 bg-white border-primary/20"
              value={formData.contentSummary}
              onChange={(e) => handleInputChange('contentSummary', e.target.value)}
              disabled={readOnly}
            />
            </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="font-bold block mb-1 text-foreground">Thông tin cần bảo mật (nếu có):</label>
              <Textarea 
                className="min-h-20 bg-white border-primary/20"
                value={formData.confidentialInfo}
                onChange={(e) => handleInputChange('confidentialInfo', e.target.value)}
                disabled={readOnly}
              />
            </div>
            <div>
              <label className="font-bold block mb-1 text-foreground">Các điều kiện cần thiết để áp dụng:</label>
              <Textarea 
                className="min-h-20 bg-white border-primary/20"
                value={formData.conditions}
                onChange={(e) => handleInputChange('conditions', e.target.value)}
                disabled={readOnly}
              />
              </div>
          </div>
        </section>

        {/* 5. Evaluations */}
        <section className="space-y-4">
          <div>
            <label className="font-bold block mb-1 text-foreground">5. Đánh giá lợi ích (theo ý kiến tác giả):</label>
            <Textarea 
              className="min-h-24 bg-white border-primary/20"
              placeholder="Lợi ích thu được hoặc dự kiến..."
              value={formData.authorEvaluation}
              onChange={(e) => handleInputChange('authorEvaluation', e.target.value)}
              disabled={readOnly}
            />
            </div>
          <div>
            <label className="font-bold block mb-1 text-foreground">6. Đánh giá lợi ích (theo đơn vị áp dụng thử):</label>
            <Textarea 
              className="min-h-24 bg-white border-primary/20"
              placeholder="Ý kiến của tổ chức, cá nhân đã tham gia áp dụng..."
              value={formData.trialEvaluation}
              onChange={(e) => handleInputChange('trialEvaluation', e.target.value)}
              disabled={readOnly}
            />
            </div>
        </section>

        {/* 7. Support Staff Table */}
        <section>
          <div className="flex justify-between items-center mb-2">
            <label className="font-bold text-foreground">7. Danh sách người tham gia áp dụng thử/lần đầu (nếu có):</label>
            <Button
              type="button"
              onClick={addSupportStaff}
              size="sm"
              variant="secondary"
              className="gap-1"
              disabled={readOnly}
            >
              <Plus size={14}/> Thêm người hỗ trợ
            </Button>
          </div>
          <div className="overflow-x-auto border border-border rounded-lg">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-12">STT</TableHead>
                  <TableHead>Họ và tên</TableHead>
                  <TableHead className="w-28">Ngày sinh</TableHead>
                  <TableHead>Nơi công tác</TableHead>
                  <TableHead>Chức danh</TableHead>
                  <TableHead>Trình độ CM</TableHead>
                  <TableHead>Nội dung hỗ trợ</TableHead>
                  <TableHead className="w-12"></TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {formData.supportStaff.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={8} className="p-4 text-center italic text-muted-foreground">
                      Không có người hỗ trợ
                    </TableCell>
                  </TableRow>
                )}
                {formData.supportStaff.map((staff, idx) => (
                  <TableRow key={staff.id}>
                    <TableCell className="text-center">{idx + 1}</TableCell>
                    <TableCell>
                      <Input 
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                        value={staff.name} 
                        onChange={(e) => updateSupportStaff(staff.id, 'name', e.target.value)} 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <Input 
                        type="text"
                        inputMode="numeric"
                        placeholder="dd/mm/yyyy"
                        maxLength={10}
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                        value={displayDobStoredAsDdMm(staff.dob)} 
                        onChange={(e) =>
                          updateSupportStaff(staff.id, 'dob', normalizeDobInputToStored(e.target.value))
                        } 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <WorkplaceSelect
                        value={staff.workplace}
                        onValueChange={(v) => updateSupportStaff(staff.id, 'workplace', v)}
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <Input 
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                        value={staff.title} 
                        onChange={(e) => updateSupportStaff(staff.id, 'title', e.target.value)} 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <Input 
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                        value={staff.qualification} 
                        onChange={(e) => updateSupportStaff(staff.id, 'qualification', e.target.value)} 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell>
                      <Input 
                        className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                        value={staff.supportContent} 
                        onChange={(e) => updateSupportStaff(staff.id, 'supportContent', e.target.value)} 
                        disabled={readOnly}
                      />
                    </TableCell>
                    <TableCell className="text-center">
                      <Button 
                        type="button" 
                        variant="ghost" 
                        size="icon"
                        onClick={() => removeSupportStaff(staff.id)}
                        className="text-destructive hover:text-destructive hover:bg-destructive/10"
                        disabled={readOnly}
                      >
                        <Trash2 size={14} />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </section>

        {/* Footer */}
        <section className="pt-8 border-t border-border">

          <div className="mb-6 flex items-center gap-3 rounded-md border border-border/60 bg-muted/20 p-3">
            <Checkbox
              id="application-honesty-confirmation"
              checked={formData.honestyConfirmed}
              disabled={readOnly}
              onCheckedChange={(checked) => {
                if (readOnly) return;
                const v = checked === true;
                if (v && applicationHonestyPrerequisiteGaps.length > 0) {
                  toast.error('Chưa thể xác nhận cam kết', {
                    description: formatApplicantPrerequisiteToastDescription(
                      applicationHonestyPrerequisiteGaps,
                    ),
                  });
                  return;
                }
                handleInputChange('honestyConfirmed', v);
              }}
            />
            <Label htmlFor="application-honesty-confirmation" className="cursor-pointer">
              Tôi xin cam đoan mọi thông tin nêu trong đơn là trung thực, đúng sự thật và hoàn toàn chịu trách nhiệm trước pháp luật.
            </Label>
          </div>
          
          <div className="flex flex-col md:flex-row justify-between gap-10">
            <div className="text-center w-full md:w-1/2">
              <p className="font-bold uppercase text-foreground">Xác nhận của lãnh đạo đơn vị</p>
              <div className="h-32 mt-4 border border-dashed border-border rounded flex items-center justify-center text-muted-foreground">
                (Ký và đóng dấu)
              </div>
            </div>
            <div className="text-center w-full md:w-1/2">
              <p className="italic mb-2 text-foreground">
                TP. Hồ Chí Minh, ngày{' '}
                <Input 
                  type="number" 
                  className="w-14 inline-block text-center mx-1" 
                  value={formData.submissionDay} 
                  onChange={(e) => handleInputChange('submissionDay', e.target.value)} 
                  disabled={readOnly}
                />{' '}
                tháng{' '}
                <Input 
                  type="number" 
                  className="w-14 inline-block text-center mx-1" 
                  value={formData.submissionMonth} 
                  onChange={(e) => handleInputChange('submissionMonth', e.target.value)} 
                  disabled={readOnly}
                />{' '}
                năm{' '}
                <Input 
                  type="text" 
                  className="w-20 inline-block text-center mx-1" 
                  value={formData.submissionYear}
                  onChange={(e) => handleInputChange('submissionYear', e.target.value)} 
                  disabled={readOnly}
                />{' '}
              </p>
              <p className="font-bold uppercase text-foreground">Tác giả chính / Đại diện nhóm tác giả sáng kiến</p>
              <div className="h-32 mt-4 border border-dashed border-border rounded flex items-center justify-center text-muted-foreground">
                (chữ ký và ghi rõ họ tên)
              </div>
            </div>
          </div>
        </section>

        {/* Actions */}
        <div className="flex justify-end gap-4 border-t border-border pt-6">
          
          <Button
            className="gap-2 shadow-lg"
            type="button"
            onClick={() => void handleNext()}
            disabled={readOnly || isAdvancing || !formData.honestyConfirmed}
          >
            <Save size={18} /> {isAdvancing ? 'Đang lưu...' : 'Tiếp theo'}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

export type {
  ApplicationFormState,
  Author,
  SupportStaff,
  ResearchEvidenceKind,
  TextbookEvidenceKind,
  InitiativeClassification,
  BanCamKet,
  ReferenceMaterialHonesty,
  ResearchDomesticHonesty,
} from '@ump/shared';
