import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Plus, Trash2, CheckCircle2 } from 'lucide-react';
import { toast } from 'sonner';
import {
  Button,
  Input,
  Textarea,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Checkbox,
  Label,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  type ApplicantPrefill,
  collectReportTabHonestyGaps,
  formatApplicantPrerequisiteToastDescription,
  useAuth,
  type InitiativeFormState,
  type TrialUnit,
  INITIAL_REPORT_FORM_STATE,
  useOptionalDraft,
  buildReportSection42PatchFromApplication,
  type ReportSection42Key,
  formatContentSummaryFromSection42,
  formatMergedAuthorEvaluation,
  parseMergedAuthorEvaluation,
  bieuMauTemplate,
  pushMainAuthorToDraft,
  normalizeDdMmYyyyInput,
  parseFlexibleVnDateString,
} from '@ump/shared';
import { exportDraftPdf } from '@/components/applicant/initiative-draft/pdfExport';
import { WorkplaceSelect } from '@/components/applicant/WorkplaceSelect';

const REPORT_TEMPLATE_SNAPSHOT_KEY = 'initiative.report.template.snapshot.v1';
const REPORT_FORM_SNAPSHOT_KEY = 'initiative.report.form.snapshot.v1';

function persistReportPayloadSnapshots(payload: {
  report: InitiativeFormState;
  template: typeof bieuMauTemplate;
}): void {
  const rawReport = JSON.stringify(payload.report);
  const rawTemplate = JSON.stringify(payload.template);

  // Primary target: localStorage for cross-tab/session inspection.
  try {
    localStorage.setItem(REPORT_FORM_SNAPSHOT_KEY, rawReport);
    localStorage.setItem(REPORT_TEMPLATE_SNAPSHOT_KEY, rawTemplate);
    return;
  } catch {
    // Fallback: sessionStorage when localStorage is blocked/quota-limited.
  }

  try {
    sessionStorage.setItem(REPORT_FORM_SNAPSHOT_KEY, rawReport);
    sessionStorage.setItem(REPORT_TEMPLATE_SNAPSHOT_KEY, rawTemplate);
  } catch {
    // Last-chance in-memory debug handle for manual extraction in console.
    const g = globalThis as typeof globalThis & {
      __initiativeReportPayloadSnapshot?: {
        report: InitiativeFormState;
        template: typeof bieuMauTemplate;
      };
    };
    g.__initiativeReportPayloadSnapshot = payload;
  }
}

function buildReportTemplateSnapshot(report: InitiativeFormState): typeof bieuMauTemplate {
  const doc = JSON.parse(JSON.stringify(bieuMauTemplate)) as typeof bieuMauTemplate;
  const cover = doc['TRANG BÌA'];
  cover['Tên sáng kiến (Tiếng Việt)'] = report.initiativeName ?? '';
  cover['Tác giả/nhóm tác giả sáng kiến'] =
    report.representativeAuthor || report.authorName || '';
  cover['Thông tin liên hệ (Điện thoại, Email)'] = [report.representativePhone, report.representativeEmail]
    .filter(Boolean)
    .join(' · ');

  const mau01 = doc['MẪU SỐ 01 - BÁO CÁO MÔ TẢ SÁNG KIẾN'];
  mau01['1. Mở đầu'] = report.introduction ?? '';
  mau01['2. Tên sáng kiến (tên quy trình, giải pháp, phương pháp)'] = report.initiativeName ?? '';
  mau01['3. Lĩnh vực áp dụng của sáng kiến'] = report.applicationField ?? '';
  mau01['6. Những thông tin cần được bảo mật (nếu có)'] = report.confidentialInfo ?? '';
  mau01['Tác giả sáng kiến (Ký, ghi rõ họ tên)'] =
    report.authorName || report.representativeAuthor || '';

  const moTa = mau01['4. Mô tả sáng kiến'];
  moTa['4.1 Tình trạng giải pháp đã biết hoặc hiện trạng công tác khi chưa có sáng kiến'] =
    report.currentStatus ?? '';
  const noiDung = moTa['4.2 Nội dung giải pháp đề nghị công nhận là sáng kiến'];
  noiDung['Mục đích của sáng kiến'] = report.purpose ?? '';
  noiDung['Về tính mới của sáng kiến'] = report.novelty ?? '';
  const details = noiDung['Về nội dung của sáng kiến'];
  details['Các bước thực hiện giải pháp'] = report.implementationSteps ?? '';
  details['Các điều kiện cần thiết để áp dụng giải pháp'] = report.conditions ?? '';
  details['Lĩnh vực áp dụng'] = report.applicationField ?? '';
  details['Kết quả thu được'] = report.achievedResult ?? '';
  details['Danh sách đơn vị/cá nhân đã tham gia áp dụng thử hoặc lần đầu'] =
    report.trialUnits.length > 0
      ? report.trialUnits.map((u, i) => ({
          TT: String(i + 1),
          'Tên tổ chức/cá nhân': u.name ?? '',
          'Địa chỉ': u.address ?? '',
          'Lĩnh vực áp dụng sáng kiến': u.field ?? '',
        }))
      : [
          {
            TT: '',
            'Tên tổ chức/cá nhân': '',
            'Địa chỉ': '',
            'Lĩnh vực áp dụng sáng kiến': '',
          },
        ];

  const hieuQua = noiDung['Về tính hiệu quả'];
  hieuQua['Tạo ra lợi ích kinh tế'] = report.effectiveness.economic ?? '';
  hieuQua['Đem lại hiệu quả trong giảng dạy'] = report.effectiveness.teaching ?? '';
  hieuQua['Tăng năng suất lao động'] = report.effectiveness.productivity ?? '';
  hieuQua['Nâng cao hiệu quả công việc'] = report.effectiveness.social ?? '';
  hieuQua['Nâng cao chất lượng công việc, dịch vụ'] = report.effectiveness.quality ?? '';
  hieuQua['Cải thiện môi trường, điều kiện học tập, làm việc, sống'] = report.effectiveness.environment ?? '';
  hieuQua['Đảm bảo an toàn lao động, PCCC'] = report.effectiveness.safety ?? '';

  if (report.submissionDate) {
    const d = parseFlexibleVnDateString(report.submissionDate);
    if (d && !Number.isNaN(d.getTime())) {
      mau01['Ngày ký']['Ngày'] = String(d.getDate());
      mau01['Ngày ký']['Tháng'] = String(d.getMonth() + 1);
      mau01['Ngày ký']['Năm'] = String(d.getFullYear());
      cover['Năm'] = String(d.getFullYear());
    }
  }

  return doc;
}

function hasReportPatchChanges(
  patch: Partial<InitiativeFormState>,
  current: InitiativeFormState,
): boolean {
  return Object.entries(patch).some(([key, value]) => {
    const k = key as keyof InitiativeFormState;
    return current[k] !== value;
  });
}

interface InitiativeReportFormProps {
  onVerify?: (fieldName: string, content: string) => void;
  /** When true, all fields are non-interactive (e.g. staff review). Paired with `disabled={readOnly}` on inputs and early returns in change handlers. */
  readOnly?: boolean;
  showVerifyButton?: boolean; // Only Admin can see verify button
  /** When admin opens a specific applicant submission, seed visible title/author fields */
  applicantPrefill?: ApplicantPrefill;
  initialDraft?: Partial<InitiativeFormState>;
  onSaveDraft?: (data: InitiativeFormState) => Promise<void>;
  /** When set with `onSaveDraft`, debounce-persists the tab to the server (e.g. Postgres drafts) on changes. */
  autoSaveDebounceMs?: number;
  onNext?: () => void;
}

export default function InitiativeReportForm({
  onVerify,
  readOnly = false,
  showVerifyButton = false,
  applicantPrefill,
  initialDraft,
  onSaveDraft,
  autoSaveDebounceMs,
  onNext,
}: InitiativeReportFormProps) {
  const { hasRole } = useAuth();
  const draftCtx = useOptionalDraft();
  const [formData, setFormData] = useState<InitiativeFormState>(INITIAL_REPORT_FORM_STATE);
  const formDataRef = useRef<InitiativeFormState>(INITIAL_REPORT_FORM_STATE);
  const [isAdvancing, setIsAdvancing] = useState(false);
  const canShowVerifyButton = showVerifyButton && !hasRole('viewer');
  const applicationDraft = draftCtx?.draft.application;
  const reportDraft = draftCtx?.draft.report;
  const updateApplication = draftCtx?.updateApplication;
  const updateReport = draftCtx?.updateReport;
  /** Keep latest draft slices without listing whole objects in effect deps (new refs each render would retrigger). */
  const reportForAuthorEvalRef = useRef(reportDraft);
  const applicationForAuthorEvalRef = useRef(applicationDraft);
  if (reportDraft) {
    reportForAuthorEvalRef.current = reportDraft;
  }
  if (applicationDraft) {
    applicationForAuthorEvalRef.current = applicationDraft;
  }

  useEffect(() => {
    formDataRef.current = formData;
  }, [formData]);

  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(formDataRef.current);
        } catch (e) {
          console.error("Báo cáo — 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) => ({
      ...prev,
      ...(applicantPrefill.initiativeName ? { initiativeName: applicantPrefill.initiativeName } : {}),
      ...(applicantPrefill.authorName
        ? { authorName: applicantPrefill.authorName, representativeAuthor: applicantPrefill.authorName }
        : {}),
    }));
  }, [applicantPrefill?.initiativeName, applicantPrefill?.authorName, draftCtx]);

  useEffect(() => {
    if (draftCtx) return;
    if (!initialDraft) return;
    setFormData((prev) => {
      const merged = { ...prev, ...initialDraft };
      return { ...merged, honestyConfirmed: Boolean(merged.honestyConfirmed) };
    });
  }, [initialDraft, draftCtx]);

  useEffect(() => {
    if (!draftCtx || readOnly) return;
    const r = draftCtx.draft.report;
    setFormData({
      ...INITIAL_REPORT_FORM_STATE,
      ...r,
      honestyConfirmed: Boolean(r.honestyConfirmed),
    });
  // eslint-disable-next-line react-hooks/exhaustive-deps -- draftId only; avoid reset loop on autosave
  }, [draftCtx?.draft.draftId, readOnly]);

  const patchReport = (patch: Partial<InitiativeFormState>) => {
    if (draftCtx && !readOnly) draftCtx.updateReport(patch);
  };

  /**
   * "Tên sáng kiến" must match Đơn §2 (`application.initiativeName`) and Báo cáo §2.1
   * (`report.initiativeName`). Mirrors the same field as {@link InitiativeApplicationForm}
   * (section 2 — Tên sáng kiến đề nghị công nhận).
   */
  const handleInitiativeNameChange = useCallback(
    (value: string) => {
      if (readOnly) return;
      setFormData((prev) => {
        const next = { ...prev, initiativeName: value };
        formDataRef.current = next;
        return next;
      });
      if (updateReport && updateApplication && !readOnly) {
        updateReport({ initiativeName: value });
        void updateApplication({ initiativeName: value });
      }
    },
    [updateReport, updateApplication, readOnly],
  );

  useEffect(() => {
    if (!applicationDraft || !updateReport || readOnly) return;
    const appName = applicationDraft.initiativeName ?? '';
    setFormData((prev) => {
      if (prev.initiativeName === appName) return prev;
      const next = { ...prev, initiativeName: appName };
      formDataRef.current = next;
      return next;
    });
    const reportName = reportDraft?.initiativeName ?? '';
    if (reportName !== appName) {
      updateReport({ initiativeName: appName });
    }
  }, [applicationDraft?.initiativeName, reportDraft?.initiativeName, updateReport, readOnly]);

  /**
   * "Lĩnh vực áp dụng" matches Đơn (`application.applicationField`) and Báo cáo §3
   * (`report.applicationField`). Same field as {@link InitiativeApplicationForm} (grid — Lĩnh vực áp dụng).
   */
  const handleApplicationFieldChange = useCallback(
    (value: string) => {
      if (readOnly) return;
      setFormData((prev) => {
        const next = { ...prev, applicationField: value };
        formDataRef.current = next;
        return next;
      });
      if (updateReport && updateApplication && !readOnly) {
        updateReport({ applicationField: value });
        void updateApplication({ applicationField: value });
      }
    },
    [updateReport, updateApplication, readOnly],
  );

  useEffect(() => {
    if (!applicationDraft || !updateReport || readOnly) return;
    const appField = applicationDraft.applicationField ?? '';
    setFormData((prev) => {
      if (prev.applicationField === appField) return prev;
      const next = { ...prev, applicationField: appField };
      formDataRef.current = next;
      return next;
    });
    const reportField = reportDraft?.applicationField ?? '';
    if (reportField !== appField) {
      updateReport({ applicationField: appField });
    }
  }, [applicationDraft?.applicationField, reportDraft?.applicationField, updateReport, readOnly]);

  /**
   * Họ tên tác giả chính: một giá trị cho §2.2, dòng ký, và Đơn mục 1 (tác giả thứ nhất). Sửa ở bất kỳ chỗ nào đều cập nhật các nơi còn lại.
   */
  const handlePrimaryAuthorNameChange = useCallback(
    (value: string) => {
      if (readOnly) return;
      setFormData((prev) => {
        const next = { ...prev, representativeAuthor: value, authorName: value };
        formDataRef.current = next;
        return next;
      });
      if (draftCtx && !readOnly) {
        pushMainAuthorToDraft(draftCtx, value);
      } else {
        patchReport({ representativeAuthor: value, authorName: value });
      }
    },
    [draftCtx, readOnly],
  );

  useEffect(() => {
    if (!applicationDraft || readOnly) return;
    const target = applicationDraft.authors[0]?.name ?? '';
    setFormData((prev) => {
      if (prev.representativeAuthor === target && prev.authorName === target) return prev;
      const next = { ...prev, representativeAuthor: target, authorName: target };
      formDataRef.current = next;
      return next;
    });
    if (!updateReport) return;
    const rRep = reportDraft?.representativeAuthor ?? '';
    const rAuth = reportDraft?.authorName ?? '';
    if (rRep !== target || rAuth !== target) {
      updateReport({ representativeAuthor: target, authorName: target });
    }
  }, [
    readOnly,
    draftCtx?.draft.draftId,
    applicationDraft?.authors[0]?.name,
    reportDraft?.representativeAuthor,
    reportDraft?.authorName,
    updateReport,
  ]);

  /**
   * Đơn §4 `contentSummary` is a labeled merge of báo cáo §4.2 (purpose, steps, first unit, conditions, kết quả).
   * `conditions` / `trialEvaluation` on the application also mirror `conditions` / `achievedResult` here.
   */
  const flushSection42MergedToApplication = useCallback(
    (nextReport: InitiativeFormState) => {
      if (!updateApplication || readOnly) return;
      const merged = formatContentSummaryFromSection42(nextReport);
      void updateApplication({
        contentSummary: merged,
        conditions: nextReport.conditions,
        trialEvaluation: nextReport.achievedResult,
      });
    },
    [updateApplication, readOnly],
  );

  const handleReportSection42FieldChange = useCallback(
    (field: ReportSection42Key, value: string) => {
      if (readOnly) return;
      setFormData((prev) => {
        const next = { ...prev, [field]: value };
        formDataRef.current = next;
        if (updateReport && !readOnly) {
          updateReport({ [field]: value } as Partial<InitiativeFormState>);
          flushSection42MergedToApplication(next);
        }
        return next;
      });
    },
    [updateReport, readOnly, flushSection42MergedToApplication],
  );

  /**
   * Báo cáo §6 “Thông tin cần bảo mật” matches Đơn (`application.confidentialInfo`).
   */
  const handleConfidentialInfoChange = useCallback(
    (value: string) => {
      if (readOnly) return;
      setFormData((prev) => {
        const next = { ...prev, confidentialInfo: value };
        formDataRef.current = next;
        return next;
      });
      if (updateReport && updateApplication && !readOnly) {
        updateReport({ confidentialInfo: value });
        void updateApplication({ confidentialInfo: value });
      }
    },
    [updateReport, updateApplication, readOnly],
  );

  /** Đơn §4 textarea (`contentSummary`) → báo cáo §4.2 fields; then flush `conditions` / `trialEvaluation` on the đơn. */
  useEffect(() => {
    if (!updateReport || readOnly) return;
    const report = reportForAuthorEvalRef.current;
    const app = applicationForAuthorEvalRef.current;
    if (!report || !app) return;
    const patch = buildReportSection42PatchFromApplication(app, report);
    if (!patch) return;
    if (!hasReportPatchChanges(patch, report)) return;
    const mergedReport = { ...report, ...patch };
    setFormData((prev) => {
      const next = { ...prev, ...patch };
      formDataRef.current = next;
      return next;
    });
    updateReport(patch);
    flushSection42MergedToApplication(mergedReport);
    // Only when `contentSummary` changes; omit `reportDraft` to avoid loops after `updateReport` (e.g. test autofill).
  }, [applicationDraft?.contentSummary, updateReport, readOnly, flushSection42MergedToApplication]);

  /**
   * Đơn side fields `conditions` / `trialEvaluation` edited without changing the merged block —
   * patch báo cáo and rebuild `contentSummary` so §4 stays one conceptual unit.
   */
  useEffect(() => {
    if (!updateReport || !updateApplication || readOnly) return;
    const app = applicationForAuthorEvalRef.current;
    const report = reportForAuthorEvalRef.current;
    if (!app || !report) return;
    const cond = app.conditions ?? '';
    const trial = app.trialEvaluation ?? '';
    if (cond === (report.conditions ?? '') && trial === (report.achievedResult ?? '')) return;
    const nextReport: InitiativeFormState = {
      ...report,
      conditions: cond,
      achievedResult: trial,
    };
    setFormData((prev) => ({
      ...prev,
      conditions: cond,
      achievedResult: trial,
    }));
    formDataRef.current = {
      ...formDataRef.current,
      conditions: cond,
      achievedResult: trial,
    };
    updateReport({ conditions: cond, achievedResult: trial });
    const merged = formatContentSummaryFromSection42(nextReport);
    if (merged !== (app.contentSummary ?? '')) {
      void updateApplication({ contentSummary: merged });
    }
    // Deps: only application mirror fields; omit `reportDraft` to avoid oscillation with `updateReport`.
  }, [applicationDraft?.conditions, applicationDraft?.trialEvaluation, updateReport, updateApplication, readOnly]);

  /**
   * Đơn §5 (`authorEvaluation`) is the merged view of báo cáo §5–6 (tính mới + bốn hiệu quả).
   * Editing báo cáo pushes the merge; editing Đơn pulls structured text back into the báo cáo fields.
   */
  useEffect(() => {
    if (!updateReport || !updateApplication || readOnly) return;
    const applicationDraftNow = applicationForAuthorEvalRef.current;
    if (!applicationDraftNow) return;
    const report = reportForAuthorEvalRef.current;
    if (!report) return;
    const appEval = applicationDraftNow.authorEvaluation ?? '';
    const merged = formatMergedAuthorEvaluation(report);
    if (merged === appEval) return;

    if (!appEval.trim()) {
      void updateApplication({ authorEvaluation: merged });
      return;
    }

    const parsed = parseMergedAuthorEvaluation(appEval);
    const nextEffectiveness = { ...report.effectiveness, ...parsed.effectiveness };
    if (
      report.novelty === parsed.novelty &&
      report.effectiveness.economic === parsed.effectiveness.economic &&
      report.effectiveness.teaching === parsed.effectiveness.teaching &&
      report.effectiveness.safety === parsed.effectiveness.safety &&
      report.effectiveness.social === parsed.effectiveness.social
    ) {
      return;
    }
    setFormData((prev) => {
      const next = { ...prev, novelty: parsed.novelty, effectiveness: nextEffectiveness };
      formDataRef.current = next;
      return next;
    });
    updateReport({ novelty: parsed.novelty, effectiveness: nextEffectiveness });
    // Deps: only `authorEvaluation` (string). Omitting `reportDraft` / full `applicationDraft` avoids
    // re-running on every context identity change and while Đơn lags report after test fill.
  }, [applicationDraft?.authorEvaluation, updateReport, updateApplication, readOnly]);

  useEffect(() => {
    if (!applicationDraft || !reportDraft || !updateReport || readOnly) return;
    const appConf = applicationDraft.confidentialInfo ?? '';
    setFormData((prev) => {
      if (prev.confidentialInfo === appConf) return prev;
      const next = { ...prev, confidentialInfo: appConf };
      formDataRef.current = next;
      return next;
    });
    const reportConf = reportDraft.confidentialInfo ?? '';
    if (reportConf !== appConf) {
      updateReport({ confidentialInfo: appConf });
    }
  }, [applicationDraft?.confidentialInfo, reportDraft?.confidentialInfo, updateReport, readOnly]);

  const handleInputChange = (field: keyof InitiativeFormState, value: string) => {
    if (readOnly) return;
    const nextValue = field === 'submissionDate' ? normalizeDdMmYyyyInput(value) : value;
    setFormData((prev) => {
      const next = { ...prev, [field]: nextValue };
      formDataRef.current = next;
      return next;
    });
    patchReport({ [field]: nextValue } as Partial<InitiativeFormState>);
  };

  const handleNoveltyChange = useCallback(
    (value: string) => {
      if (readOnly) return;
      setFormData((prev) => {
        const next = { ...prev, novelty: value };
        formDataRef.current = next;
        patchReport({ novelty: value });
        if (updateApplication && !readOnly) {
          void updateApplication({ authorEvaluation: formatMergedAuthorEvaluation(next) });
        }
        return next;
      });
    },
    [updateApplication, readOnly],
  );

  const handleEffectivenessChange = useCallback(
    (metric: keyof InitiativeFormState['effectiveness'], value: string) => {
      if (readOnly) return;
      setFormData((prev) => {
        const effectiveness = { ...prev.effectiveness, [metric]: value };
        const next = { ...prev, effectiveness };
        formDataRef.current = next;
        patchReport({ effectiveness });
        if (updateApplication && !readOnly) {
          void updateApplication({ authorEvaluation: formatMergedAuthorEvaluation(next) });
        }
        return { ...prev, effectiveness };
      });
    },
    [updateApplication, readOnly],
  );

  const addTrialUnit = () => {
    if (readOnly) return;
    const newUnit: TrialUnit = { id: Date.now(), name: '', address: '', field: '' };
    setFormData((prev) => {
      const trialUnits = [...prev.trialUnits, newUnit];
      formDataRef.current = { ...prev, trialUnits };
      patchReport({ trialUnits });
      return { ...prev, trialUnits };
    });
  };

  const updateTrialUnit = (id: number, field: keyof TrialUnit, value: string) => {
    if (readOnly) return;
    setFormData((prev) => {
      const trialUnits = prev.trialUnits.map((unit) =>
        unit.id === id ? { ...unit, [field]: value } : unit,
      );
      formDataRef.current = { ...prev, trialUnits };
      patchReport({ trialUnits });
      return { ...prev, trialUnits };
    });
  };

  const removeTrialUnit = (id: number) => {
    if (readOnly) return;
    setFormData((prev) => {
      const trialUnits = prev.trialUnits.filter((unit) => unit.id !== id);
      formDataRef.current = { ...prev, trialUnits };
      patchReport({ trialUnits });
      return { ...prev, trialUnits };
    });
  };

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

  const reportHonestyPrerequisiteGaps = useMemo(
    () => collectReportTabHonestyGaps(formData),
    [formData],
  );

  const handleExportCurrentPdf = async () => {
    if (!draftCtx) {
      toast.error('Không tìm thấy dữ liệu bản nháp để xuất PDF.');
      return;
    }
    try {
      await exportDraftPdf(draftCtx.draft, draftCtx.caseId);
      toast.success('Đã xuất PDF hồ sơ hiện tại.');
    } catch {
      toast.error('Không thể xuất PDF hồ sơ hiện tại.');
    }
  };

  const handleNext = async () => {
    if (isAdvancing) return;
    if (!formDataRef.current.honestyConfirmed) {
      toast.error('Vui lòng xác nhận đã đọc và hiểu cam kết trước khi tiếp tục.');
      return;
    }
    if (!onNext) {
      toast.error('Không thể chuyển tab kế tiếp vì chưa có cấu hình điều hướng.');
      return;
    }
    setIsAdvancing(true);
    try {
      const snapshot = formDataRef.current;
      const templateSnapshot = buildReportTemplateSnapshot(snapshot);
      persistReportPayloadSnapshots({ report: snapshot, template: templateSnapshot });

      if (draftCtx && !readOnly) {
        try {
          draftCtx.updateReport(snapshot);
          await updateApplication?.({ authorEvaluation: formatMergedAuthorEvaluation(snapshot) });
        } catch (error) {
          console.error('Failed to sync report to draft context before next tab:', error);
          toast.warning('Không đồng bộ được toàn bộ dữ liệu nháp cục bộ. Tiếp tục với dữ liệu đã lưu gần nhất.');
        }
      }
      let savedToBackend = true;
      if (onSaveDraft) {
        try {
          await onSaveDraft(snapshot);
        } catch (error) {
          savedToBackend = false;
          const message = error instanceof Error ? error.message : 'Không thể lưu bản nháp lên máy chủ.';
          console.error('Failed to persist report draft before opening next tab:', error);
          toast.error(`${message} Tiếp tục sang tab kế tiếp với dữ liệu đã lưu cục bộ.`);
        }
      }
      if (!savedToBackend) {
        try {
          sessionStorage.setItem('initiative.report.pending-server-sync.v1', '1');
        } catch {
          /* ignore */
        }
      }
      onNext();
    } finally {
      setIsAdvancing(false);
    }
  };

  const VerifyButton = ({ fieldName, content }: { fieldName: string; content: string }) => {
    if (!canShowVerifyButton) 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 */}
      {/* <CardHeader className="bg-primary text-primary-foreground text-center rounded-t-lg">
        <CardTitle className="text-2xl font-bold uppercase tracking-wide">
          Báo Cáo Mô Tả Sáng Kiến
        </CardTitle>
        <p className="text-sm opacity-80 mt-2">Mẫu đơn đăng ký xét công nhận sáng kiến</p>
      </CardHeader> */}

      <div className="relative">
        <div className="text-center mt-6">
          <CardTitle className="text-2xl font-bold uppercase mb-2">
            Báo Cáo Mô Tả Sáng Kiến
          </CardTitle>
        </div>
      </div>

      <CardContent className="p-6 md:p-8 space-y-8">
        {/* Section 1: Introduction & Basic Info */}
        <section className="space-y-4">
          <h2 className="text-xl font-bold text-foreground border-b border-border pb-2 flex items-center gap-2">
            <span className="bg-primary/10 text-primary px-2 py-1 rounded text-sm">1-3</span> 
            Thông Tin Chung
          </h2>
          
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">1. Mở đầu (Giới thiệu về những vấn đề liên quan đến sáng kiến ở trong và ngoài đơn vị/ trường mà tác giả đã biết, những khó khăn/bất cập/hạn chế tại đơn vị/ trường liên quan đến nội dung của sáng kiến; từ đó nêu ra sự cần thiết phải thực hiện sáng kiến)</label>
            <Textarea
              className="min-h-32"
              placeholder="Giới thiệu vấn đề, khó khăn, bất cập hiện tại..."
              value={formData.introduction}
              onChange={(e) => handleInputChange('introduction', e.target.value)}
              disabled={readOnly}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">2.1. Tên sáng kiến (Bắt buộc bằng Tiếng Việt)</label>
            <Input
              placeholder="Nhập tên quy trình, giải pháp..."
              value={formData.initiativeName}
              onChange={(e) => handleInitiativeNameChange(e.target.value)}
              disabled={readOnly}
            />
            <VerifyButton fieldName="2.1.Tên sáng kiến (Bắt buộc bằng Tiếng Việt)" content={formData.initiativeName} />
          </div>
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">2.2. Tác giả chính / Đại diện nhóm tác giả sáng kiến</label>
            <Input
              placeholder="Nhập họ và tên..."
              value={formData.representativeAuthor}
              onChange={(e) => handlePrimaryAuthorNameChange(e.target.value)}
              disabled={readOnly}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">2.3. Thông tin liên hệ của tác giả chính / đại diện nhóm tác giả sáng kiến (SĐT, email)</label>
            <Input
              placeholder="Số điện thoại"
              value={formData.representativePhone}
              onChange={(e) => handleInputChange('representativePhone', e.target.value)}
              disabled={readOnly}
            />
            <Input
              className="mt-2"
              placeholder="Email"
              value={formData.representativeEmail}
              onChange={(e) => handleInputChange('representativeEmail', e.target.value)}
              disabled={readOnly}
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">3. Lĩnh vực áp dụng</label>
            <Input
              placeholder="Ví dụ: Quản lý giáo dục, Cải cách hành chính..."
              value={formData.applicationField}
              onChange={(e) => handleApplicationFieldChange(e.target.value)}
              disabled={readOnly}
            />
          </div>
          
          
        </section>

        {/* Section 4: Description */}
        <section className="space-y-4">
          <h2 className="text-xl font-bold text-foreground border-b border-border pb-2 flex items-center gap-2">
            <span className="bg-primary/10 text-primary px-2 py-1 rounded text-sm">4</span> 
            Mô Tả Sáng Kiến
          </h2>
          
          <div className="space-y-4">
            <label className="block text-lg font-medium text-foreground">
              4.1. Tình trạng giải pháp đã biết hoặc hiện trạng công tác khi chưa có sáng kiến
            </label>
            <label className="block text-sm font-medium text-foreground">Nêu hiện trạng trước khi áp dụng giải pháp mới/chưa có sáng kiến, phân tích ưu nhược điểm của giải pháp cũ để cho thấy sự cần thiết của việc đề xuất giải pháp mới để khắc phục nhược điểm của giải pháp cũ</label>
            <Textarea
              className="min-h-24 w-full resize-y whitespace-pre-wrap [field-sizing:content]"
              value={formData.currentStatus}
              onChange={(e) => handleInputChange('currentStatus', e.target.value)}
              disabled={readOnly}
            />
           </div>
          
          <div className="space-y-4">
            <label className="block text-lg font-medium text-foreground">4.2. Nội dung giải pháp đề nghị công nhận là sáng kiến</label>
            
            <div className="grid grid-cols-1 gap-4">
              <div>
                <label className="block text-sm font-medium text-foreground">Mục đích (Vấn đề cần giải quyết)</label>
                <Textarea
                  className="min-h-24 w-full resize-y whitespace-pre-wrap [field-sizing:content]"
                  value={formData.purpose}
                  onChange={(e) => handleReportSection42FieldChange('purpose', e.target.value)}
                  disabled={readOnly}
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-foreground">Các bước thực hiện giải pháp</label>
                <Textarea
                  className="min-h-32"
                  placeholder="Mô tả ngắn gọn, đầy đủ các bước..."
                  value={formData.implementationSteps}
                  onChange={(e) => handleReportSection42FieldChange('implementationSteps', e.target.value)}
                  disabled={readOnly}
                />
                </div>
                <div>
                <label className="block text-sm font-medium text-foreground">Đơn vị áp dụng lần đầu</label>
                <p className="text-sm text-muted-foreground mt-1 mb-2">
                  Đơn vị áp dụng phải thuộc/trực thuộc Đại học Y Dược TP.HCM
                </p>
                <WorkplaceSelect
                  value={formData.firstAppliedUnit}
                  onValueChange={(v) => handleReportSection42FieldChange('firstAppliedUnit', v)}
                  disabled={readOnly}
                  className="h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                />
                </div>
              
              <div>
                <label className="block text-sm font-medium text-foreground">Điều kiện cần thiết để áp dụng</label>
                <Textarea
                  className="min-h-32"
                  value={formData.conditions}
                  onChange={(e) => handleReportSection42FieldChange('conditions', e.target.value)}
                  disabled={readOnly}
                />
              </div>
               </div>
                <div>
                <label className="block text-sm font-medium text-foreground">Kết quả thu được</label>
                <Textarea
                  className="min-h-20"
                  placeholder="Ghi rõ ngày sáng kiến được áp dụng lần đầu hoặc áp dụng thử và kết quả thu được"
                  value={formData.achievedResult}
                  onChange={(e) => handleReportSection42FieldChange('achievedResult', e.target.value)}
                  disabled={readOnly}
                />
              
            </div>
          </div>

          {/* Table Section */}
          <div className="mt-6">
            <div className="flex justify-between items-center mb-2">
              <label className="block text-sm font-bold text-foreground">Danh sách đơn vị/cá nhân áp dụng thử</label>
              {!readOnly && (
                <Button
                  type="button"
                  onClick={addTrialUnit}
                  size="sm"
                  className="gap-1"
                >
                  <Plus size={16} /> Thêm đơn vị
                </Button>
              )}
            </div>
            
            <div className="overflow-x-auto border border-border rounded-lg">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-12">TT</TableHead>
                    <TableHead>Tên tổ chức/Cá nhân</TableHead>
                    <TableHead>Địa chỉ</TableHead>
                    <TableHead>Lĩnh vực</TableHead>
                    <TableHead className="w-16 text-center">Xóa</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {formData.trialUnits.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={5} className="text-center text-muted-foreground italic py-4">
                        Chưa có dữ liệu
                      </TableCell>
                    </TableRow>
                  )}
                  {formData.trialUnits.map((unit, index) => (
                    <TableRow key={unit.id}>
                      <TableCell className="text-sm">{index + 1}</TableCell>
                      <TableCell>
                        <Input 
                          className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                          value={unit.name}
                          onChange={(e) => updateTrialUnit(unit.id, 'name', e.target.value)}
                          disabled={readOnly}
                        />
                      </TableCell>
                      <TableCell>
                        <Input 
                          className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                          value={unit.address}
                          onChange={(e) => updateTrialUnit(unit.id, 'address', e.target.value)}
                          disabled={readOnly}
                        />
                      </TableCell>
                      <TableCell>
                        <Input 
                          className="border-0 border-b rounded-none focus-visible:ring-0 px-1"
                          value={unit.field}
                          onChange={(e) => updateTrialUnit(unit.id, 'field', e.target.value)}
                          disabled={readOnly}
                        />
                      </TableCell>
                      <TableCell className="text-center">
                        <Button 
                          variant="ghost" 
                          size="icon"
                          onClick={() => removeTrialUnit(unit.id)} 
                          className="text-destructive hover:text-destructive hover:bg-destructive/10"
                          disabled={readOnly}
                        >
                          <Trash2 size={16} />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </section>

        {/* Section: Evaluation & Metrics */}
        <section className="space-y-4">
          <h2 className="text-xl font-bold text-foreground border-b border-border pb-2 flex items-center gap-2">
            <span className="bg-primary/10 text-primary px-2 py-1 rounded text-sm">5-6</span> 
            Đánh Giá Hiệu Quả
          </h2>
          
          <div>
            <label className="block text-sm font-bold text-foreground mb-1">Tính mới của sáng kiến</label>
            <Textarea
              className="min-h-20"
              placeholder="Điểm khác biệt so với giải pháp cũ..."
              value={formData.novelty}
              onChange={(e) => handleNoveltyChange(e.target.value)}
              disabled={readOnly}
            />
            <VerifyButton fieldName="Tính mới của sáng kiến" content={formData.novelty} />

            <label className="block gap-6 mt-4 text-sm font-bold text-black-600 dark:text-green-400 mb-1">
                Hiệu quả Kinh tế
              </label>
              <Textarea
                className="min-h-20 text-sm"
                placeholder="Số tiền làm lợi, chi phí giảm được (kèm cách tính)..."
                value={formData.effectiveness.economic}
                onChange={(e) => handleEffectivenessChange('economic', e.target.value)}
                disabled={readOnly}
              />
              <VerifyButton fieldName="Hiệu quả Kinh tế" content={formData.effectiveness.economic} />

              <label className="block gap-6 mt-4 text-sm font-bold text-black-600 dark:text-blue-400 mb-1">
                Hiệu quả Công việc/Giảng dạy
              </label>
              <Textarea
                className="min-h-20 text-sm"
                placeholder="Tăng năng suất, hiệu quả giảng dạy (số liệu cụ thể)..."
                value={formData.effectiveness.teaching}
                onChange={(e) => handleEffectivenessChange('teaching', e.target.value)}
                disabled={readOnly}
              />

              <label className="block gap-6 mt-4 text-sm font-bold text-black-600 dark:text-yellow-400 mb-1">
                Môi trường & An toàn
              </label>
              <Textarea
                className="min-h-20 text-sm"
                placeholder="Cải thiện điều kiện làm việc, an toàn lao động..."
                value={formData.effectiveness.safety}
                onChange={(e) => handleEffectivenessChange('safety', e.target.value)}
                disabled={readOnly}
              />

              <label className="block gap-6 mt-4 text-sm font-bold text-black-600 dark:text-green-400 mb-1">
                Nhận thức & Xã hội
              </label>
              <Textarea
                className="min-h-20 text-sm"
                placeholder="Nâng cao trình độ, nhận thức..."
                value={formData.effectiveness.social}
                onChange={(e) => handleEffectivenessChange('social', e.target.value)}
                disabled={readOnly}
              />
          </div>
        </section>

        {/* Footer & Signatures */}
        <section className="border-t border-border pt-6 mt-6">
          <div className="mb-6">
            <label className="block text-sm font-bold text-destructive mb-1">
              6. Thông tin cần bảo mật (nếu có)
            </label>
            <Textarea
              className="min-h-32 border-destructive/30 bg-destructive/5"
              value={formData.confidentialInfo}
              onChange={(e) => handleConfidentialInfoChange(e.target.value)}
              disabled={readOnly}
            />
          </div>

          <div className="mb-6 space-y-3">
            
            <div className="flex flex-col gap-2 rounded-md border border-border/60 bg-muted/20 p-3">
              <div className="flex items-start gap-3">
                <Checkbox
                  id="report-honesty-policy"
                  checked={formData.honestyConfirmed}
                  disabled={readOnly}
                  onCheckedChange={(checked) => {
                    if (readOnly) return;
                    const v = checked === true;
                    if (v && reportHonestyPrerequisiteGaps.length > 0) {
                      toast.error('Chưa thể xác nhận cam kết', {
                        description: formatApplicantPrerequisiteToastDescription(
                          reportHonestyPrerequisiteGaps,
                        ),
                      });
                      return;
                    }
                    setFormData((prev) => {
                      const next = { ...prev, honestyConfirmed: v };
                      formDataRef.current = next;
                      return next;
                    });
                    patchReport({ honestyConfirmed: v });
                  }}
                  className="mt-0.5"
                />
                <Label htmlFor="report-honesty-policy" className="cursor-pointer italic text-sm leading-snug">
                  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>
          </div>
          
          <div className="flex flex-col md:flex-row justify-between items-start gap-8 mt-8">
            <div className="text-center w-full md:w-1/3">
              <p className="font-bold uppercase mb-16 text-foreground">Lãnh đạo đơn vị</p>
              <div className="border-t border-border w-48 mx-auto pt-2 text-sm text-muted-foreground">
                (Ký, ghi rõ họ tên)
              </div>
            </div>
            
            <div className="text-center w-full md:w-1/3">
              <p className="italic mb-2 text-foreground">
                Tp. Hồ Chí Minh, ngày{' '}
                <Input 
                  type="text"
                  inputMode="numeric"
                  placeholder="dd/mm/yyyy"
                  maxLength={10}
                  className="inline-block w-[9.5rem] text-center"
                  value={formData.submissionDate} 
                  onChange={(e) => handleInputChange('submissionDate', e.target.value)} 
                  disabled={readOnly}
                />
              </p>
              <p className="font-bold uppercase mb-16 text-foreground">Tác giả chính / Đại diện nhóm tác giả sáng kiến</p>
              <Input 
                placeholder="Nhập họ và tên..."
                className="text-center border-0 border-b rounded-none focus-visible:ring-0"
                value={formData.authorName}
                onChange={(e) => handlePrimaryAuthorNameChange(e.target.value)}
                disabled={readOnly}
              />
            </div>
          </div>
        </section>

        {/* Action Buttons */}
        <div className="flex justify-end gap-4 border-t border-border pt-6">
          {/* <Button
            type="button"
            variant="outline"
            className="gap-2"
            onClick={() => void handleExportCurrentPdf()}
            disabled={readOnly || !draftCtx}
          >
            <FileText size={18} /> Xuất PDF hồ sơ hiện tại
          </Button> */}
          <Button
            type="button"
            className="gap-2 shadow-lg"
            onClick={() => void handleNext()}
            disabled={readOnly || !formData.honestyConfirmed || isAdvancing}
          >
            {isAdvancing ? "Đang lưu..." : "Tiếp theo"}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

export type { InitiativeFormState, TrialUnit } from '@ump/shared';
