/* global React, Icon, Modal, Pill, Field, NumInput, formatDateTH, DB */
const { useState: useStateRep, useMemo: useMemoRep, useEffect: useEffectRep } = React;

const REPAIR_CATS = ["ไฟฟ้า", "ประปา", "เฟอร์นิเจอร์", "เครื่องปรับอากาศ", "โครงสร้าง", "อื่นๆ"];

const CAT_ICON = {
  "ไฟฟ้า": "bolt", "ประปา": "drop", "เฟอร์นิเจอร์": "home",
  "เครื่องปรับอากาศ": "refresh", "โครงสร้าง": "doc", "อื่นๆ": "wrench",
};

const STATUS = {
  pending:     { label: "รอดำเนินการ", color: "#b45309", bg: "#fef3c7" },
  in_progress: { label: "กำลังซ่อม",  color: "#2563eb", bg: "#dbeafe" },
  done:        { label: "เสร็จแล้ว",  color: "#16a34a", bg: "#dcfce7" },
};

function compressImg(file) {
  return new Promise(resolve => {
    const reader = new FileReader();
    reader.onload = e => {
      const img = new Image();
      img.onload = () => {
        const maxW = 1200, ratio = Math.min(1, maxW / img.width);
        const c = document.createElement("canvas");
        c.width = img.width * ratio; c.height = img.height * ratio;
        c.getContext("2d").drawImage(img, 0, 0, c.width, c.height);
        resolve(c.toDataURL("image/jpeg", 0.75));
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

function RepairModal({ open, onClose, onSave, rooms, initial }) {
  const blank = { room_no: "", location: "", category: REPAIR_CATS[0], description: "", image: null };
  const [form, setForm] = useStateRep(blank);
  const [saving, setSaving] = useStateRep(false);
  useEffectRep(() => { setForm(initial ? { ...blank, ...initial } : blank); }, [open]);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const handleImg = async e => {
    const file = e.target.files[0];
    if (!file) return;
    set("image", await compressImg(file));
  };

  const handleSave = async () => {
    if (!form.location.trim() && !form.room_no.trim()) { alert("กรุณาระบุห้องหรือสถานที่"); return; }
    setSaving(true);
    try { await onSave(form); onClose(); }
    finally { setSaving(false); }
  };

  if (!open) return null;
  return (
    <Modal open={open} onClose={onClose} title={initial ? "แก้ไขรายการซ่อม" : "แจ้งซ่อมใหม่"}
      footer={<>
        <button className="btn" onClick={onClose}>ยกเลิก</button>
        <button className="btn primary" onClick={handleSave} disabled={saving}>
          <Icon name="check" size={16}/> {saving ? "กำลังบันทึก..." : "บันทึก"}
        </button>
      </>}>
      <div className="grid" style={{ gap: 14 }}>
        <div className="grid cols-2" style={{ gap: 14 }}>
          <Field label="ห้อง (ถ้ามี)">
            <select className="select" value={form.room_no} onChange={e => set("room_no", e.target.value)}>
              <option value="">— ไม่ระบุ —</option>
              {(rooms || []).map(r => <option key={r.no} value={r.no}>{r.no}</option>)}
            </select>
          </Field>
          <Field label="ประเภทงานซ่อม">
            <select className="select" value={form.category} onChange={e => set("category", e.target.value)}>
              {REPAIR_CATS.map(c => <option key={c}>{c}</option>)}
            </select>
          </Field>
        </div>
        <Field label="สถานที่ / ตำแหน่งที่ซ่อม">
          <input className="input" placeholder="เช่น ห้องน้ำชั้น 3, ลิฟต์, ทางเดิน..."
            value={form.location} onChange={e => set("location", e.target.value)}/>
        </Field>
        <Field label="รายละเอียดปัญหา">
          <textarea className="input" rows={3} placeholder="อธิบายอาการเสีย / สิ่งที่ต้องซ่อม..."
            value={form.description} onChange={e => set("description", e.target.value)}
            style={{ resize: "vertical" }}/>
        </Field>
        <Field label="แนบรูปภาพ (ถ้ามี)">
          <input type="file" accept="image/*" id="repair-img-input" style={{ display: "none" }}
            onChange={handleImg}/>
          <div style={{ display: "flex", gap: 10, alignItems: "flex-start", flexWrap: "wrap" }}>
            <label htmlFor="repair-img-input" className="btn" style={{ cursor: "pointer" }}>
              <Icon name="camera" size={16}/> เลือกรูปภาพ
            </label>
            {form.image && (
              <div style={{ position: "relative" }}>
                <img src={form.image} alt="repair"
                  style={{ width: 100, height: 80, objectFit: "cover", borderRadius: 8,
                    border: "1px solid var(--line)", cursor: "pointer" }}
                  onClick={() => window.open(form.image)}/>
                <button onClick={() => set("image", null)}
                  style={{ position: "absolute", top: -6, right: -6, background: "var(--danger)",
                    color: "#fff", border: "none", borderRadius: "50%", width: 20, height: 20,
                    cursor: "pointer", fontSize: 12, lineHeight: 1 }}>✕</button>
              </div>
            )}
          </div>
        </Field>
      </div>
    </Modal>
  );
}

function StatusBadge({ status }) {
  const s = STATUS[status] || STATUS.pending;
  return (
    <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 99,
      fontSize: "0.78rem", fontWeight: 700, color: s.color, background: s.bg, whiteSpace: "nowrap" }}>
      {s.label}
    </span>
  );
}

function RepairCard({ repair, onStatusChange, onEdit, onDelete, onImgClick }) {
  const cat = STATUS[repair.status] || STATUS.pending;
  return (
    <div className="card" style={{ padding: 14, display: "grid", gap: 10,
      borderLeft: `3px solid ${cat.color}` }}>
      {/* header */}
      <div className="row" style={{ gap: 8, alignItems: "flex-start" }}>
        <div style={{ width: 34, height: 34, borderRadius: 8, background: cat.bg,
          display: "grid", placeItems: "center", flexShrink: 0 }}>
          <Icon name={CAT_ICON[repair.category] || "wrench"} size={16} style={{ color: cat.color }}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 700, fontSize: "0.9rem" }}>{repair.category}</div>
          <div style={{ fontSize: "0.8rem", color: "var(--ink-3)", marginTop: 1 }}>
            {repair.room_no ? `ห้อง ${repair.room_no}` : ""}{repair.room_no && repair.location ? " · " : ""}{repair.location}
          </div>
        </div>
        <StatusBadge status={repair.status}/>
      </div>

      {/* description */}
      {repair.description && (
        <div style={{ fontSize: "0.88rem", color: "var(--ink-2)", lineHeight: 1.5,
          display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
          {repair.description}
        </div>
      )}

      {/* image */}
      {repair.image && (
        <img src={repair.image} alt="repair"
          style={{ width: "100%", maxHeight: 120, objectFit: "cover", borderRadius: 8,
            cursor: "zoom-in", border: "1px solid var(--line)" }}
          onClick={() => onImgClick(repair.image)}/>
      )}

      {/* footer */}
      <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
        <span style={{ fontSize: "0.75rem", color: "var(--ink-3)", flex: 1 }}>
          {repair.created_at ? repair.created_at.slice(0, 10).split("-").reverse().join("/") : ""}
        </span>
        {repair.status === "pending" && (
          <button className="btn sm" style={{ color: "#2563eb", borderColor: "#bfdbfe", background: "#dbeafe" }}
            onClick={() => onStatusChange(repair.id, "in_progress")}>
            <Icon name="refresh" size={13}/> รับงาน
          </button>
        )}
        {repair.status === "in_progress" && (
          <button className="btn sm" style={{ color: "#16a34a", borderColor: "#bbf7d0", background: "#dcfce7" }}
            onClick={() => onStatusChange(repair.id, "done")}>
            <Icon name="check" size={13}/> เสร็จแล้ว
          </button>
        )}
        <button className="btn sm ghost" style={{ color: "var(--ok)" }} onClick={() => onEdit(repair)}>
          <Icon name="edit" size={13}/>
        </button>
        <button className="btn sm ghost" style={{ color: "var(--danger)" }} onClick={() => onDelete(repair.id)}>
          <Icon name="trash" size={13}/>
        </button>
      </div>
    </div>
  );
}

function Repairs({ repairs, setRepairs, rooms }) {
  const [filter, setFilter] = useStateRep("all");
  const [adding, setAdding] = useStateRep(false);
  const [editing, setEditing] = useStateRep(null);
  const [imgView, setImgView] = useStateRep(null);

  const counts = useMemoRep(() => ({
    all: repairs.length,
    pending: repairs.filter(r => r.status === "pending").length,
    in_progress: repairs.filter(r => r.status === "in_progress").length,
    done: repairs.filter(r => r.status === "done").length,
  }), [repairs]);

  const filtered = useMemoRep(() =>
    filter === "all" ? repairs : repairs.filter(r => r.status === filter),
    [repairs, filter]
  );

  const handleSave = async (form) => {
    if (editing) {
      await DB.updateRepair(editing.id, form);
      setRepairs(rs => rs.map(r => r.id === editing.id ? { ...r, ...form } : r));
      setEditing(null);
    } else {
      const res = await DB.addRepair(form);
      setRepairs(rs => [{ ...form, id: res?.id ?? Date.now(), status: "pending",
        created_at: new Date().toISOString() }, ...rs]);
    }
  };

  const handleStatusChange = async (id, status) => {
    setRepairs(rs => rs.map(r => r.id === id ? { ...r, status } : r));
    await DB.updateRepair(id, { status }).catch(() =>
      setRepairs(rs => rs.map(r => r.id === id ? { ...r, status: r.status } : r))
    );
  };

  const handleDelete = (id) => {
    if (!confirm("ลบรายการซ่อมนี้?")) return;
    setRepairs(rs => rs.filter(r => r.id !== id));
    DB.deleteRepair(id).catch(console.error);
  };

  const TABS = [
    { key: "all",         label: "ทั้งหมด" },
    { key: "pending",     label: "รอดำเนินการ" },
    { key: "in_progress", label: "กำลังซ่อม" },
    { key: "done",        label: "เสร็จแล้ว" },
  ];

  return (
    <div className="grid" style={{ gap: 18 }}>
      {/* toolbar */}
      <div className="row" style={{ flexWrap: "wrap", gap: 12 }}>
        <div className="tabs">
          {TABS.map(t => (
            <button key={t.key} className={"tab " + (filter === t.key ? "active" : "")}
              onClick={() => setFilter(t.key)}>
              {t.label}
              {counts[t.key] > 0 && (
                <span style={{
                  marginLeft: 6, fontSize: "0.72rem", fontWeight: 700,
                  background: filter === t.key ? "#fff3" : "var(--surface-2)",
                  color: t.key === "pending" ? "#b45309" : t.key === "in_progress" ? "#2563eb" : "var(--ink-2)",
                  borderRadius: 99, padding: "1px 7px",
                }}>{counts[t.key]}</span>
              )}
            </button>
          ))}
        </div>
        <div style={{ flex: 1 }}/>
        <button className="btn primary" onClick={() => { setEditing(null); setAdding(true); }}>
          <Icon name="plus" size={16}/> แจ้งซ่อมใหม่
        </button>
      </div>

      {/* summary KPIs */}
      <div className="grid cols-3" style={{ gap: 12 }}>
        {[
          { key: "pending",     label: "รอดำเนินการ", color: "#b45309", bg: "#fef3c7" },
          { key: "in_progress", label: "กำลังซ่อม",  color: "#2563eb", bg: "#dbeafe" },
          { key: "done",        label: "เสร็จแล้ว",  color: "#16a34a", bg: "#dcfce7" },
        ].map(s => (
          <div key={s.key} className="card" style={{ padding: "14px 18px", borderTop: `3px solid ${s.color}`, cursor: "pointer" }}
            onClick={() => setFilter(s.key)}>
            <div style={{ fontSize: "0.8rem", color: "var(--ink-3)" }}>{s.label}</div>
            <div style={{ fontSize: "1.8rem", fontWeight: 800, color: s.color }}>{counts[s.key]}</div>
          </div>
        ))}
      </div>

      {/* cards grid */}
      {filtered.length === 0 ? (
        <div style={{ padding: "48px 0", textAlign: "center", color: "var(--ink-3)" }}>
          <Icon name="wrench" size={32} style={{ opacity: 0.3, display: "block", margin: "0 auto 12px" }}/>
          ไม่มีรายการซ่อม
        </div>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
          {filtered.map(r => (
            <RepairCard key={r.id} repair={r}
              onStatusChange={handleStatusChange}
              onEdit={(rep) => { setEditing(rep); setAdding(true); }}
              onDelete={handleDelete}
              onImgClick={setImgView}/>
          ))}
        </div>
      )}

      <RepairModal open={adding} onClose={() => { setAdding(false); setEditing(null); }}
        onSave={handleSave} rooms={rooms} initial={editing}/>

      {/* image viewer */}
      {imgView && (
        <div onClick={() => setImgView(null)}
          style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)",
            display: "grid", placeItems: "center", zIndex: 9999, cursor: "zoom-out" }}>
          <img src={imgView} alt="repair"
            style={{ maxWidth: "90vw", maxHeight: "90vh", borderRadius: 12 }}
            onClick={e => e.stopPropagation()}/>
        </div>
      )}
    </div>
  );
}

window.Repairs = Repairs;