/* Tasks & Calendar — tasks (user & non-user) and follow-ups. window.TasksScreen */
const { useState } = React;

function AssigneeChip({ a }) {
  if (!a) return <Badge tone="neutral" size="sm" icon="circle-dashed">Unassigned</Badge>;
  const isLabel = !window.PT_DATA.team.includes(a);
  return isLabel
    ? <Badge tone="info" size="sm" icon="tag">{a}</Badge>
    : <span style={{ display: "inline-flex", alignItems: "center", gap: 5, whiteSpace: "nowrap" }}><Avatar name={a} size="xs" /><span style={{ fontSize: "var(--text-xs)", color: "var(--text-body)", fontWeight: 500 }}>{a}</span></span>;
}

function TaskRow({ t, onToggle, onEdit }) {
  const [hover, setHover] = useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 16px", borderBottom: "1px solid var(--border-subtle)", opacity: t.done ? 0.55 : 1, background: hover ? "var(--surface-hover)" : "transparent" }}>
      <Checkbox checked={t.done} onChange={onToggle} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 600, color: "var(--text-strong)", fontSize: "var(--text-base)", textDecoration: t.done ? "line-through" : "none" }}>{t.title}</div>
        <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)", display: "inline-flex", alignItems: "center", gap: 5, whiteSpace: "nowrap" }}><Icon name="building-2" size={12} /> {t.property}</div>
      </div>
      <AssigneeChip a={t.assignee} />
      <span style={{ width: 72, textAlign: "right", fontSize: "var(--text-sm)", fontWeight: 600, color: t.overdue ? "var(--ember-600)" : "var(--text-body)" }} className="tnum">{t.due}</span>
      <span style={{ opacity: hover ? 1 : 0.3 }}><IconButton icon="pencil" label="Edit task" size="sm" onClick={onEdit} /></span>
    </div>
  );
}

function MiniCalendar() {
  // June 2026 — 1st is a Monday
  const days = Array.from({ length: 30 }, (_, i) => i + 1);
  const blanks = 1; // start offset (Sun=0; Jun 1 is Mon -> 1 blank)
  const events = { 18: [["t", 3]], 21: [["f", 1]], 22: [["t", 1]], 25: [["t", 1], ["f", 1]], 28: [["f", 1]] };
  return (
    <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xs)", overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "13px 16px", borderBottom: "1px solid var(--border-subtle)" }}>
        <Icon name="calendar" size={17} color="var(--text-brand)" />
        <h3 style={{ fontSize: "var(--text-md)", fontWeight: 700, color: "var(--text-strong)" }}>June 2026</h3>
        <div style={{ marginLeft: "auto", display: "flex", gap: 4 }}>
          <IconButton icon="chevron-left" label="Prev" variant="solid" size="sm" />
          <IconButton icon="chevron-right" label="Next" variant="solid" size="sm" />
        </div>
      </div>
      <div style={{ padding: 12 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 4, marginBottom: 6 }}>
          {["S", "M", "T", "W", "T", "F", "S"].map((d, i) => <div key={i} style={{ textAlign: "center", fontSize: "var(--text-2xs)", fontWeight: 700, color: "var(--text-subtle)", textTransform: "uppercase" }}>{d}</div>)}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 4 }}>
          {Array.from({ length: blanks }).map((_, i) => <div key={"b" + i} />)}
          {days.map((day) => {
            const ev = events[day];
            const today = day === 18;
            return (
              <div key={day} style={{ aspectRatio: "1", borderRadius: "var(--radius-sm)", border: today ? "1.5px solid var(--harbor-400)" : "1px solid transparent", background: today ? "var(--harbor-50)" : "var(--surface-sunken)", padding: 4, display: "flex", flexDirection: "column" }}>
                <span style={{ fontSize: "var(--text-2xs)", fontWeight: today ? 700 : 500, color: today ? "var(--harbor-700)" : "var(--text-muted)" }} className="tnum">{day}</span>
                <div style={{ marginTop: "auto", display: "flex", gap: 2, flexWrap: "wrap" }}>
                  {ev && ev.map(([type, n], i) => Array.from({ length: n }).map((_, j) => (
                    <span key={i + "-" + j} style={{ width: 5, height: 5, borderRadius: "50%", background: type === "f" ? "var(--ember-500)" : "var(--harbor-500)" }} />
                  )))}
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ display: "flex", gap: 16, marginTop: 12, fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--harbor-500)" }} /> Task</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--ember-500)" }} /> Follow-up</span>
        </div>
      </div>
    </div>
  );
}

function TasksScreen() {
  const d = window.PT_DATA;
  const [tab, setTab] = useState("all");
  function toggle(i) { d.tasks[i].done = !d.tasks[i].done; PTStore.bump(); }
  const filtered = tab === "mine" ? d.tasks.filter((t) => t.assignee === d.user.name) : tab === "labels" ? d.tasks.filter((t) => t.assignee && !d.team.includes(t.assignee)) : d.tasks;
  return (
    <div style={{ padding: 22 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14, flexWrap: "wrap" }}>
        <div style={{ display: "inline-flex", background: "var(--surface-sunken)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)", padding: 3, gap: 2 }}>
          {[["all", "All tasks"], ["mine", "Assigned to me"], ["labels", "Task labels"]].map(([k, label]) => (
            <button key={k} onClick={() => setTab(k)} style={{ padding: "5px 11px", borderRadius: "var(--radius-sm)", border: "none", cursor: "pointer", fontSize: "var(--text-sm)", fontWeight: 600, fontFamily: "var(--font-sans)", background: tab === k ? "var(--surface-card)" : "transparent", color: tab === k ? "var(--text-strong)" : "var(--text-muted)", boxShadow: tab === k ? "var(--shadow-xs)" : "none" }}>{label}</button>
          ))}
        </div>
        <div style={{ marginLeft: "auto" }}><Button variant="brand" size="sm" icon="plus" onClick={() => navigate("/tasks/new")}>New task</Button></div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 320px", gap: 18, alignItems: "start" }} className="pt-detail-grid">
        <section style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xs)", overflow: "hidden" }}>
          <div style={{ padding: "11px 16px", borderBottom: "1px solid var(--border-default)", background: "var(--surface-sunken)", fontSize: "var(--text-2xs)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-muted)" }}>Open tasks</div>
          {filtered.map((t, i) => <TaskRow key={i} t={t} onToggle={() => toggle(d.tasks.indexOf(t))} onEdit={() => navigate("/tasks/" + d.tasks.indexOf(t))} />)}
        </section>
        <MiniCalendar />
      </div>
    </div>
  );
}
window.TasksScreen = TasksScreen;