"use client";

/**
 * Create Job (2026-11-10) — same form and flow as scheme.qrs.ae "Create Job":
 * Company · Audit (from Audit Schedule) · Current Stage · Lead Auditor · Templates (Select All) · Audit Date ·
 * expected dates · Document Prepare / Approval Date · Standards · Document Review · No. of Employees ·
 * NACE / EAC · MD · MD Risk · Schedule Slot.
 * Save creates ONE JOB PER SELECTED TEMPLATE (own job number each). The documents then show in the company's
 * 📁 Documents tab and in Job Registrar.
 */
import React, { useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import toast from "react-hot-toast";
import { FiCheckSquare, FiSquare, FiX } from "react-icons/fi";
import { createCompanyJobs, getJobForm, searchCodebook, type CodebookRow, type JobFormAudit, type JobFormData } from "@/lib/api/company-documents.api";

type Stage = "Stage 1" | "Stage 2";

const EMPTY = {
  auditId: "" as number | "",
  stage: "Stage 1" as Stage,
  leadAuditorId: "" as number | "",
  templateIds: [] as number[],
  date: "",
  expectedSurveillanceDate: "",
  expectedIADate: "",
  expectedMRMDate: "",
  expectedInitialInquiryDate: "",
  expectedInitial_Stage1_Date: "",
  prepareDate: "",
  approvedDate: "",
  standardIds: [] as number[],
  docReview: "",
  numEmployees: "",
  naceEacCodes: "",
  md: "",
  mdRisk: "",
  scheduleSlot: "",
  technicalExpert: "",
};

const addMonths = (d: string, m: number) => {
  if (!d) return "";
  const x = new Date(d + "T00:00:00Z");
  x.setUTCMonth(x.getUTCMonth() + m);
  return x.toISOString().slice(0, 10);
};

export default function CreateJobModal({
  company,
  onClose,
  onCreated,
}: {
  company: { id: number; name: string } | null;
  onClose: () => void;
  onCreated?: () => void;
}) {
  const [data, setData] = useState<JobFormData | null>(null);
  const [f, setF] = useState({ ...EMPTY });
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!company) return;
    setF({ ...EMPTY });
    setData(null);
    setLoading(true);
    getJobForm(company.id)
      .then((d) => {
        setData(d);
        // like scheme: preselect the company's latest audit
        if (d.audits.length) applyAudit(d.audits[0], { ...EMPTY });
      })
      .catch((e) => toast.error(e?.message || "Could not load the form"))
      .finally(() => setLoading(false));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [company?.id]);

  const applyAudit = (a: JobFormAudit, base = f) => {
    const p = a.prefill || {};
    const stage = a.stage_label;
    const s1 = p.expectedInitial_Stage1_Date || (stage === "Stage 1" ? p.date : "") || "";
    setF({
      ...base,
      auditId: a.id,
      stage,
      leadAuditorId: (p.leadAuditorId as number) || "",
      standardIds: p.standardIds || a.standards.map((s) => s.id),
      date: p.date || "",
      scheduleSlot: (p.scheduleSlot as string) || "",
      expectedSurveillanceDate: s1 ? addMonths(s1, 12) : p.expectedSurveillanceDate || "",
      expectedIADate: s1 ? addMonths(s1, 4) : p.expectedIADate || "",
      expectedMRMDate: s1 ? addMonths(s1, 3) : p.expectedMRMDate || "",
      expectedInitialInquiryDate: p.expectedInitialInquiryDate || "",
      expectedInitial_Stage1_Date: s1,
      templateIds: a.recommended_template_ids?.[stage] ?? [],
    });
  };

  const audit = useMemo(() => data?.audits.find((a) => a.id === f.auditId) ?? null, [data, f.auditId]);
  const set = (k: keyof typeof EMPTY, v: any) => setF((x) => ({ ...x, [k]: v }));

  const templates = data?.templates ?? [];
  const chosen = templates.filter((t) => f.templateIds.includes(t.id));
  const needApproval = chosen.filter((t) => t.prints.includes("approvedDate"));

  const save = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!company || !audit) return toast.error("Select the audit");
    if (!f.templateIds.length) return toast.error("Select at least one template");
    if (!f.leadAuditorId) return toast.error("Select the lead auditor");
    if (!f.date) return toast.error("Audit date is required");
    if (!f.standardIds.length) return toast.error("Select the standards");
    if (!f.mdRisk) return toast.error("Select MD Risk");
    if (f.md && !/^(\d+(\.\d+)?|\.\d+)$/.test(f.md)) return toast.error("MD must be a valid number (e.g. .5, 1, 2)");
    if (needApproval.length && !f.approvedDate) return toast.error(`Document Approval Date is needed for: ${needApproval.map((t) => t.name).join(", ")}`);
    setSaving(true);
    try {
      const r = await createCompanyJobs(company.id, {
        audit_schedule_row_id: audit.id,
        stage: f.stage,
        templateIds: f.templateIds,
        leadAuditorId: Number(f.leadAuditorId),
        standardIds: f.standardIds,
        date: f.date,
        docReview: f.docReview || null,
        numEmployees: f.numEmployees === "" ? null : Number(f.numEmployees),
        naceEacCodes: f.naceEacCodes || null,
        md: f.md || null,
        mdRisk: f.mdRisk,
        scheduleSlot: f.scheduleSlot || "FULL",
        technicalExpert: f.technicalExpert || null,
        expectedSurveillanceDate: f.expectedSurveillanceDate || null,
        expectedIADate: f.expectedIADate || null,
        expectedMRMDate: f.expectedMRMDate || null,
        expectedInitialInquiryDate: f.expectedInitialInquiryDate || null,
        expectedInitial_Stage1_Date: f.expectedInitial_Stage1_Date || null,
        prepareDate: f.prepareDate || null,
        approvedDate: f.approvedDate || null,
      });
      toast.success(`${r.created} Job(s) created successfully!`);
      onCreated?.();
      onClose();
    } catch (err: any) {
      toast.error(err?.message || "Failed to save job");
    } finally {
      setSaving(false);
    }
  };

  if (!company || typeof document === "undefined") return null;

  const byStage = (s: Stage) => templates.filter((t) => t.stage_name === s);
  const allIds = templates.map((t) => t.id);

  return createPortal(
    <div onClick={(e) => e.stopPropagation()} style={{ position: "fixed", inset: 0, zIndex: 1100, background: "rgba(15,23,42,.55)", display: "flex", alignItems: "center", justifyContent: "center", padding: 16 }}>
      <div style={{ width: "min(960px,100%)", maxHeight: "94vh", display: "flex", flexDirection: "column", background: "#fff", borderRadius: 14, overflow: "hidden", boxShadow: "0 30px 70px -20px rgba(15,23,42,.55)" }}>
        <div style={{ padding: "14px 20px", background: "#760E9E", color: "#fff", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700 }}>Create Job</h2>
          <button type="button" onClick={onClose} aria-label="Close" style={{ background: "rgba(255,255,255,.15)", border: 0, color: "#fff", borderRadius: 8, padding: 6, cursor: "pointer", display: "flex" }}>
            <FiX size={16} />
          </button>
        </div>

        {loading || !data ? (
          <div style={{ padding: 60, textAlign: "center", color: "#94a3b8" }}>Loading…</div>
        ) : (
          <form onSubmit={save} style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
            <div style={{ overflowY: "auto", padding: 20, display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))", gap: 14 }}>
              <G label="Company">
                <input value={company.name} readOnly style={{ ...inp, background: "#f8fafc" }} />
              </G>
              <G label="Audit (from Audit Schedule)">
                <select
                  value={f.auditId}
                  onChange={(e) => {
                    const a = data.audits.find((x) => x.id === Number(e.target.value));
                    if (a) applyAudit(a);
                    else set("auditId", "");
                  }}
                  style={inp}
                >
                  {!data.audits.length && <option value="">No audit available</option>}
                  {data.audits.map((a) => (
                    <option key={a.id} value={a.id}>
                      {a.audit_code} · {a.audit_stage || a.audit_type} · {a.schedule_date ?? "no date"}
                    </option>
                  ))}
                </select>
              </G>
              <G label="Current Stage">
                <select
                  value={f.stage}
                  onChange={(e) => {
                    const s = e.target.value as Stage;
                    setF((x) => ({ ...x, stage: s, templateIds: audit?.recommended_template_ids?.[s] ?? x.templateIds }));
                  }}
                  style={inp}
                >
                  <option value="Stage 1">Stage 1</option>
                  <option value="Stage 2">Stage 2</option>
                </select>
              </G>
              <G label="Lead Auditor">
                <select value={f.leadAuditorId} onChange={(e) => set("leadAuditorId", e.target.value ? Number(e.target.value) : "")} style={inp}>
                  <option value="">Select Lead Auditor</option>
                  {data.users.map((u) => (
                    <option key={u.id} value={u.id}>
                      {u.name}
                      {u.is_auditor ? "" : " (staff)"}
                    </option>
                  ))}
                </select>
              </G>

              {/* Templates — Select All, like scheme */}
              <div style={{ gridColumn: "1 / -1" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6, gap: 8, flexWrap: "wrap" }}>
                  <label style={lbl}>Select stage 1 &amp; 2 Template · {f.templateIds.length} selected</label>
                  <div style={{ display: "flex", gap: 6 }}>
                    <button type="button" onClick={() => set("templateIds", allIds)} style={chip}>Select All</button>
                    <button type="button" onClick={() => set("templateIds", byStage(f.stage).map((t) => t.id))} style={chip}>All {f.stage}</button>
                    {audit && <button type="button" onClick={() => set("templateIds", audit.recommended_template_ids?.[f.stage] ?? [])} style={chip}>Recommended</button>}
                    <button type="button" onClick={() => set("templateIds", [])} style={chip}>Clear</button>
                  </div>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  {(["Stage 1", "Stage 2"] as Stage[]).map((s) => (
                    <div key={s} style={{ border: "1px solid #e2e8f0", borderRadius: 10, padding: 8, maxHeight: 230, overflowY: "auto" }}>
                      <div style={{ fontSize: 11.5, fontWeight: 800, color: "#760E9E", margin: "2px 4px 6px" }}>{s}</div>
                      {byStage(s).map((t) => {
                        const on = f.templateIds.includes(t.id);
                        return (
                          <button
                            type="button"
                            key={t.id}
                            onClick={() => set("templateIds", on ? f.templateIds.filter((x) => x !== t.id) : [...f.templateIds, t.id])}
                            style={{ display: "flex", alignItems: "center", gap: 7, width: "100%", textAlign: "left", padding: "5px 6px", border: "none", borderRadius: 6, background: on ? "#f5f3ff" : "transparent", cursor: "pointer", fontSize: 12.5, color: "#0f172a" }}
                          >
                            {on ? <FiCheckSquare color="#760E9E" style={{ flexShrink: 0 }} /> : <FiSquare color="#cbd5e1" style={{ flexShrink: 0 }} />}
                            <span>{t.name}</span>
                          </button>
                        );
                      })}
                    </div>
                  ))}
                </div>
              </div>

              <G label="Audit Date"><input type="date" value={f.date} onChange={(e) => set("date", e.target.value)} style={inp} /></G>
              <G label="Expected Surveillance Date" hint="Stage 1 audit date + 1 year"><input type="date" value={f.expectedSurveillanceDate} onChange={(e) => set("expectedSurveillanceDate", e.target.value)} style={inp} /></G>
              <G label="Expected IA Date (Internal Audit)" hint="Stage 1 audit date + 4 months"><input type="date" value={f.expectedIADate} onChange={(e) => set("expectedIADate", e.target.value)} style={inp} /></G>
              <G label="Expected MRM Date (Management Review)" hint="Stage 1 audit date + 3 months"><input type="date" value={f.expectedMRMDate} onChange={(e) => set("expectedMRMDate", e.target.value)} style={inp} /></G>
              <G label="Expected Initial Inquiry Date"><input type="date" value={f.expectedInitialInquiryDate} onChange={(e) => set("expectedInitialInquiryDate", e.target.value)} style={inp} /></G>
              <G label="Expected Initial Date (Stage 1)" hint="Initial expected date for Stage 1 audit"><input type="date" value={f.expectedInitial_Stage1_Date} onChange={(e) => set("expectedInitial_Stage1_Date", e.target.value)} style={inp} /></G>
              <G label="Document Prepare Date"><input type="date" value={f.prepareDate} onChange={(e) => set("prepareDate", e.target.value)} style={inp} /></G>
              <G
                label={<>Document Approval Date {needApproval.length ? <Tag c="#b91c1c" b="#fee2e2">REQUIRED</Tag> : <Tag c="#64748b" b="#f1f5f9">OPTIONAL</Tag>}</>}
                hint={needApproval.length ? `Needed for: ${needApproval.map((t) => t.name).join(", ")}` : "Not needed for the selected templates"}
              >
                <input type="date" value={f.approvedDate} onChange={(e) => set("approvedDate", e.target.value)} style={{ ...inp, borderColor: needApproval.length && !f.approvedDate ? "#f87171" : "#d1d5db" }} />
              </G>

              <div style={{ gridColumn: "1 / -1" }}>
                <label style={lbl}>Standards</label>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, padding: 8, border: "1px solid #d1d5db", borderRadius: 8, maxHeight: 120, overflowY: "auto" }}>
                  {data.standards.map((s) => {
                    const on = f.standardIds.includes(s.id);
                    return (
                      <button type="button" key={s.id} onClick={() => set("standardIds", on ? f.standardIds.filter((x) => x !== s.id) : [...f.standardIds, s.id])} style={{ padding: "4px 10px", borderRadius: 99, border: `1px solid ${on ? "#760E9E" : "#e2e8f0"}`, background: on ? "#760E9E" : "#fff", color: on ? "#fff" : "#475569", fontSize: 11.5, fontWeight: 700, cursor: "pointer" }}>
                        {s.name}
                      </button>
                    );
                  })}
                </div>
              </div>

              <G label="Document Review"><input type="date" value={f.docReview} onChange={(e) => set("docReview", e.target.value)} style={inp} /></G>
              <G label="No. of Employees"><input type="number" min={0} value={f.numEmployees} onChange={(e) => set("numEmployees", e.target.value)} placeholder="No of employee" style={inp} /></G>
              <NaceInput value={f.naceEacCodes} onChange={(v, risk) => { set("naceEacCodes", v); if (risk && !f.mdRisk) set("mdRisk", risk); }} />
              <G label="MD"><input value={f.md} onChange={(e) => set("md", e.target.value)} placeholder="Enter value eg .5,1 etc" style={inp} /></G>
              <G label="MD Risk">
                <select value={f.mdRisk} onChange={(e) => set("mdRisk", e.target.value)} style={inp}>
                  <option value="">Select MD Risk</option>
                  <option value="Low">Low</option>
                  <option value="Medium">Medium</option>
                  <option value="High">High</option>
                </select>
              </G>
              <G label="Schedule Slot">
                <select value={f.scheduleSlot} onChange={(e) => set("scheduleSlot", e.target.value)} style={inp}>
                  <option value="">Select Schedule Slot</option>
                  <option value="MORNING">Morning (09:00 – 13:00)</option>
                  <option value="AFTERNOON">Afternoon (14:00 – 18:00)</option>
                  <option value="FULL">Full day</option>
                </select>
              </G>
              <G label="Technical Expert (optional)"><input value={f.technicalExpert} onChange={(e) => set("technicalExpert", e.target.value)} style={inp} /></G>
            </div>

            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, padding: "12px 20px", borderTop: "1px solid #e2e8f0", background: "#f8fafc" }}>
              <button type="submit" disabled={saving || !audit} style={{ padding: "9px 22px", borderRadius: 8, border: "none", background: saving || !audit ? "#c4b5fd" : "#760E9E", color: "#fff", fontWeight: 700, fontSize: 13.5, cursor: saving || !audit ? "not-allowed" : "pointer" }}>
                {saving ? "Saving..." : `Save${f.templateIds.length > 1 ? ` (${f.templateIds.length} jobs)` : ""}`}
              </button>
              <button type="button" onClick={onClose} style={{ padding: "9px 18px", borderRadius: 8, border: "1px solid #d1d5db", background: "#fff", fontWeight: 600, fontSize: 13.5, color: "#475569", cursor: "pointer" }}>
                Cancel
              </button>
            </div>
          </form>
        )}
      </div>
    </div>,
    document.body,
  );
}

const inp: React.CSSProperties = { width: "100%", height: 38, padding: "0 10px", borderRadius: 8, border: "1px solid #d1d5db", fontSize: 13, color: "#0f172a", background: "#fff", boxSizing: "border-box" };
const lbl: React.CSSProperties = { display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 700, color: "#334155", marginBottom: 5 };
const chip: React.CSSProperties = { padding: "4px 10px", borderRadius: 7, border: "1px solid #ddd6fe", background: "#f5f3ff", color: "#5b21b6", fontSize: 11.5, fontWeight: 700, cursor: "pointer" };

function G({ label, hint, children }: { label: React.ReactNode; hint?: string; children: React.ReactNode }) {
  return (
    <div>
      <label style={lbl}>{label}</label>
      {children}
      {hint && <div style={{ fontSize: 10.5, color: "#94a3b8", marginTop: 4 }}>{hint}</div>}
    </div>
  );
}
const Tag = ({ c, b, children }: { c: string; b: string; children: React.ReactNode }) => (
  <span style={{ fontSize: 9.5, fontWeight: 800, color: c, background: b, padding: "1px 6px", borderRadius: 99 }}>{children}</span>
);

function NaceInput({ value, onChange }: { value: string; onChange: (v: string, risk?: string) => void }) {
  const [q, setQ] = useState("");
  const [rows, setRows] = useState<CodebookRow[]>([]);
  const [show, setShow] = useState(false);
  useEffect(() => {
    if (!q.trim()) return setRows([]);
    const t = setTimeout(() => searchCodebook(q).then(setRows).catch(() => setRows([])), 250);
    return () => clearTimeout(t);
  }, [q]);
  const code = (r: CodebookRow) => r.eac_iaf_codes || r.nace_rev1 || r.class || r.group || r.division || "";
  const risk = (r: CodebookRow) => {
    const x = String(r.risk || "").toLowerCase();
    return x.startsWith("h") ? "High" : x.startsWith("m") ? "Medium" : x.startsWith("l") ? "Low" : undefined;
  };
  return (
    <G label="NACE / EAC Code">
      <div style={{ position: "relative" }}>
        <input value={value} onChange={(e) => onChange(e.target.value)} placeholder="NACE/EAC" style={inp} />
        <input value={q} onFocus={() => setShow(true)} onBlur={() => setTimeout(() => setShow(false), 200)} onChange={(e) => setQ(e.target.value)} placeholder="🔍 search code book…" style={{ ...inp, height: 30, marginTop: 5, fontSize: 12, borderStyle: "dashed" }} />
        {show && rows.length > 0 && (
          <div style={{ position: "absolute", zIndex: 5, left: 0, right: 0, maxHeight: 200, overflowY: "auto", background: "#fff", border: "1px solid #e2e8f0", borderRadius: 8, boxShadow: "0 10px 24px -10px rgba(15,23,42,.35)" }}>
            {rows.map((r) => (
              <button
                type="button"
                key={r.id}
                onMouseDown={(e) => e.preventDefault()}
                onClick={() => {
                  const c = code(r);
                  onChange(value ? (value.split(/,\s*/).includes(c) ? value : `${value}, ${c}`) : c, risk(r));
                  setQ("");
                  setShow(false);
                }}
                style={{ display: "block", width: "100%", textAlign: "left", padding: "6px 9px", border: "none", borderBottom: "1px solid #f1f5f9", background: "#fff", cursor: "pointer", fontSize: 12 }}
              >
                <b style={{ color: "#760E9E" }}>{code(r) || "—"}</b> {r.nace_rev2_description || r.division || ""}
              </button>
            ))}
          </div>
        )}
      </div>
    </G>
  );
}