/* ============================================================
   JNW Camp Maintenance — Employee (personal Kanban board)
   Crew sign in with real accounts; this is the board they land on.
   ============================================================ */
function EmployeeCard({ ticket, onOpen, dragging, onDragStart, onDragEnd }) {
  return (
    <div draggable onClick={() => onOpen(ticket.id)}
      onDragStart={(e) => { e.dataTransfer.effectAllowed = "move"; onDragStart(ticket.id); }} onDragEnd={onDragEnd}
      style={{ background: "#fff", border: "1px solid #E6E6E6", borderRadius: 12, padding: 14, cursor: "pointer", boxShadow: dragging ? "var(--shadow-lg)" : "var(--shadow-sm)", opacity: dragging ? 0.5 : 1, transition: "box-shadow 120ms" }}
      onMouseEnter={(e) => { if (!dragging) e.currentTarget.style.boxShadow = "var(--shadow-md)"; }} onMouseLeave={(e) => { if (!dragging) e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 9 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "#9AA3A5" }}>{ticket.id}</span>
        <PriorityChip priority={ticket.priority} compact />
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, lineHeight: 1.25, letterSpacing: "-0.01em", color: "#16331E", marginBottom: 8, textWrap: "pretty" }}>{ticket.title}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: ticket.photos.length ? 11 : 0 }}>
        <CategoryTag category={ticket.category} />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 12, color: "#515151" }}><Icon name="map-pin" size={12} color="#9AA3A5" />{ticket.customer.property}{ticket.customer.unit ? " · " + ticket.customer.unit : ""}</span>
      </div>
      {ticket.photos.length > 0 && (
        <div style={{ display: "flex", gap: 6 }}>
          {ticket.photos.slice(0, 3).map((p, i) => <PhotoThumb key={i} photo={p} size={42} />)}
        </div>
      )}
    </div>
  );
}

function EmployeeBoard({ state, actions, employeeId, onLogout, openId, setOpenId }) {
  const [dnd, setDnd] = useState(null);
  const mobile = useIsMobile();
  const me = WOData.employee(state, employeeId);
  if (!me) return null;
  const mine = state.tickets.filter((t) => (t.assigneeIds || []).includes(employeeId));
  const cols = [
    { id: "assigned", label: "To Do", hint: "Newly assigned to you" },
    { id: "in_progress", label: "In Progress", hint: "Work you've started" },
    { id: "done", label: "Done", hint: "Completed work" },
  ];
  const byStatus = (sid) => mine.filter((t) => t.status === sid).sort((a, b) =>
    (WOData.priorityRank(a.priority) - WOData.priorityRank(b.priority)) || (new Date(b.updatedAt) - new Date(a.updatedAt)));
  const todo = byStatus("assigned").length, prog = byStatus("in_progress").length, done = byStatus("done").length;

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", background: "#F2F2F2" }}>
      <div style={{ background: "#fff", borderBottom: "1px solid #E6E6E6", padding: mobile ? "14px 14px" : "20px 32px", display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, minWidth: 0 }}>
          <Avatar name={me.name} color={me.color} size={mobile ? 40 : 46} />
          <div style={{ minWidth: 0 }}>
            <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 19 : 22, letterSpacing: "-0.02em", color: "#16331E" }}>{me.name}</h1>
            <div style={{ fontSize: 13, color: "#2F6B3A", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{mobile ? me.trade : me.trade + " · " + me.email}</div>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: mobile ? 14 : 24 }}>
          <div style={{ display: "flex", gap: mobile ? 16 : 20 }}>
            <HeaderStat v={todo} label="To do" color="#6FA07C" />
            <HeaderStat v={prog} label="In progress" color="#2F6B3A" />
            <HeaderStat v={done} label="Done" color="#0DAB4A" />
          </div>
          <Button kind="ghost" icon="log-out" onClick={onLogout}>{mobile ? "" : "Sign out"}</Button>
        </div>
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: mobile ? "16px 14px" : "22px 32px" }}>
        {mine.length === 0 ? (
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", color: "#9AA3A5", gap: 12 }}>
            <Icon name="inbox" size={48} color="#C5CDCF" />
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, color: "#515151" }}>Nothing assigned yet</div>
            <div style={{ fontSize: 14 }}>When dispatch assigns you a work order, it'll appear here.</div>
          </div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: 16, minHeight: "100%", maxWidth: 1200, margin: "0 auto" }}>
            {cols.map((col) => {
              const tickets = byStatus(col.id);
              return <EmployeeColumn key={col.id} col={col} tickets={tickets} onOpen={setOpenId} onDrop={(sid) => { if (dnd) actions.moveTicket(dnd, sid); setDnd(null); }} dnd={dnd} setDnd={setDnd} />;
            })}
          </div>
        )}
      </div>

      <TicketModal openId={openId} onClose={() => setOpenId(null)} state={state} actions={actions} role="employee" currentEmployeeId={employeeId} />
    </div>
  );
}

function EmployeeColumn({ col, tickets, onOpen, onDrop, dnd, setDnd }) {
  const c = STATUS_COLORS[col.id];
  const [over, setOver] = useState(false);
  return (
    <div style={{ display: "flex", flexDirection: "column" }}
      onDragOver={(e) => { e.preventDefault(); setOver(true); }} onDragLeave={() => setOver(false)} onDrop={() => { setOver(false); onDrop(col.id); }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 4px 12px" }}>
        <span style={{ width: 9, height: 9, borderRadius: "50%", background: c.dot }}></span>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14.5, color: "#16331E" }}>{col.label}</span>
        <span style={{ fontSize: 12, fontWeight: 600, color: "#9AA3A5", background: "#fff", border: "1px solid #E6E6E6", borderRadius: 999, padding: "1px 8px" }}>{tickets.length}</span>
      </div>
      <div style={{ flex: 1, background: over ? "#E5F0E7" : "#EDEFEF", borderRadius: 14, padding: 10, display: "flex", flexDirection: "column", gap: 10, border: "1.5px " + (over ? "dashed #2F6B3A" : "solid transparent"), transition: "background 120ms, border-color 120ms", minHeight: 140 }}>
        {tickets.map((t) => <EmployeeCard key={t.id} ticket={t} onOpen={onOpen} dragging={dnd === t.id} onDragStart={setDnd} onDragEnd={() => setDnd(null)} />)}
        {tickets.length === 0 && <div style={{ padding: "28px 12px", textAlign: "center", color: "#9AA3A5", fontSize: 12.5 }}>{col.hint}</div>}
      </div>
    </div>
  );
}

function HeaderStat({ v, label, color }) {
  return <div style={{ textAlign: "center" }}>
    <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, lineHeight: 1, color, letterSpacing: "-0.02em" }}>{v}</div>
    <div style={{ fontSize: 11, color: "#9AA3A5", marginTop: 3 }}>{label}</div>
  </div>;
}

Object.assign(window, { EmployeeBoard, EmployeeCard, EmployeeColumn, HeaderStat });