/* global React, window */
const { useState: useTaskState, useEffect: useTaskEffect } = React;

const TASK_PRIORITY = {
  high:   { label: 'สูง',  chip: 'c-coral' },
  medium: { label: 'กลาง', chip: 'c-amber' },
  low:    { label: 'ต่ำ',   chip: 'c-gray' },
};
const TASK_COLUMNS = [
  { key: 'todo',  label: 'ค้างอยู่',   accent: 'var(--ink-4)' },
  { key: 'doing', label: 'กำลังทำ',   accent: 'var(--primary)' },
  { key: 'done',  label: 'เสร็จแล้ว', accent: 'var(--mint-ink)' },
];
const TASK_ORDER = ['todo', 'doing', 'done'];

function taskToday() { return window.TODAY || new Date().toISOString().slice(0, 10); }
function taskIsOverdue(due, status) {
  if (!due || status === 'done') return false;
  try { return due < taskToday(); } catch (e) { return false; }
}
function taskName(t) {
  const n = `${t.first_name || ''} ${t.last_name || ''}`.trim();
  return n || t.assignee_id || '—';
}

// Circular face avatar (clickable → profile).
function TaskAvatar({ id, size = 34 }) {
  const [err, setErr] = useTaskState(false);
  const src = (err || !id) ? '/img/avatar-person.svg' : `/faces/${id}.jpg`;
  return <img src={src} alt="" onError={() => setErr(true)}
    onClick={() => id && window.openProfile && window.openProfile(id)} title={id ? 'ดูโปรไฟล์' : ''}
    style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flex: 'none',
      cursor: id ? 'pointer' : 'default', border: '1px solid var(--line)' }} />;
}

// มอบหมายงาน — task board (todo / doing / done).
function TasksPage({ role }) {
  const [list, setList] = useTaskState([]);
  const [creating, setCreating] = useTaskState(false);
  const [narrow, setNarrow] = useTaskState(typeof window !== 'undefined' && window.innerWidth <= 900);
  const canManage = role === 'admin' || role === 'hr' || role === 'manager';

  const load = async () => {
    const r = await fetch('/api/tasks', { credentials: 'include' });
    if (r.ok) setList(await r.json());
  };
  useTaskEffect(() => { load(); }, []);

  useTaskEffect(() => {
    const onResize = () => setNarrow(window.innerWidth <= 900);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const move = async (t, dir) => {
    const idx = TASK_ORDER.indexOf(t.status);
    const next = TASK_ORDER[idx + dir];
    if (!next) return;
    const r = await fetch(`/api/tasks/${t.id}`, { method: 'PUT', credentials: 'include',
      headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: next }) });
    const d = await r.json().catch(() => ({}));
    if (!r.ok) { window.appToast && window.appToast(d.error || 'ย้ายสถานะไม่สำเร็จ', { tone: 'error' }); return; }
    window.appToast && window.appToast('อัปเดตสถานะแล้ว', { tone: 'success' });
    load();
  };

  const remove = async (t) => {
    const ok = window.appConfirm ? await window.appConfirm({ title: 'ลบงานนี้?', body: t.title, danger: true })
      : window.confirm('ลบงานนี้?');
    if (!ok) return;
    const r = await fetch(`/api/tasks/${t.id}`, { method: 'DELETE', credentials: 'include' });
    if (!r.ok) { const d = await r.json().catch(() => ({})); window.appToast && window.appToast(d.error || 'ลบไม่สำเร็จ', { tone: 'error' }); return; }
    window.appToast && window.appToast('ลบงานแล้ว', { tone: 'info' });
    load();
  };

  const grouped = (s) => list.filter((t) => t.status === s);

  return (
    <div data-screen-label="Tasks">
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 16 }}>
        <div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, margin: 0 }}>มอบหมายงาน / Tasks</h1>
          <div style={{ fontSize: 12.5, color: 'var(--ink-4)', marginTop: 4 }}>มอบหมาย · ติดตามความคืบหน้า · ปิดงาน</div>
        </div>
        {canManage && <button className="gv-btn ok" onClick={() => setCreating(true)}>＋ มอบหมายงาน</button>}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: narrow ? '1fr' : 'repeat(3,1fr)', gap: 14, alignItems: 'start' }}>
        {TASK_COLUMNS.map((col) => {
          const items = grouped(col.key);
          return (
            <div key={col.key} className="gv-card">
              <div className="gv-card-h">
                <b style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: col.accent, display: 'inline-block' }} />
                  {col.label}
                </b>
                <span className="gv-chip c-gray">{items.length}</span>
              </div>
              <div className="gv-card-b" style={{ display: 'flex', flexDirection: 'column', gap: 10, paddingTop: 8 }}>
                {items.length === 0 ? <div className="gv-empty">— ไม่มีงาน —</div>
                  : items.map((t) => {
                    const pr = TASK_PRIORITY[t.priority] || TASK_PRIORITY.medium;
                    const idx = TASK_ORDER.indexOf(t.status);
                    const overdue = taskIsOverdue(t.due_date, t.status);
                    return (
                      <div key={t.id} style={{ background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
                          <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.35, minWidth: 0 }}>{t.title}</div>
                          <span className={`gv-chip ${pr.chip}`} style={{ flexShrink: 0 }}>{pr.label}</span>
                        </div>
                        {t.detail ? <div style={{ fontSize: 12, color: 'var(--ink-4)', lineHeight: 1.4 }}>{t.detail}</div> : null}
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <TaskAvatar id={t.assignee_id} />
                          <div style={{ minWidth: 0, flex: 1 }}>
                            <div style={{ fontSize: 12.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{taskName(t)}</div>
                            {t.department_name ? <div style={{ fontSize: 11, color: 'var(--ink-5)' }}>{t.department_name}</div> : null}
                          </div>
                          {t.due_date ? (
                            <span className="tnum" style={{ fontSize: 11.5, fontWeight: 500, color: overdue ? 'var(--coral-ink)' : 'var(--ink-4)', flexShrink: 0 }}>
                              {overdue ? '⚠ ' : ''}{t.due_date}
                            </span>
                          ) : null}
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, borderTop: '1px solid var(--line)', paddingTop: 8 }}>
                          <button className="gv-btn no sm" disabled={idx <= 0} onClick={() => move(t, -1)} title="ย้ายถอยหลัง"
                            style={{ opacity: idx <= 0 ? 0.4 : 1 }}>◀</button>
                          <button className="gv-btn no sm" disabled={idx >= TASK_ORDER.length - 1} onClick={() => move(t, 1)} title="ย้ายไปข้างหน้า"
                            style={{ opacity: idx >= TASK_ORDER.length - 1 ? 0.4 : 1 }}>▶</button>
                          <div style={{ flex: 1 }} />
                          {canManage && <button className="gv-btn danger sm" onClick={() => remove(t)} title="ลบงาน">ลบ</button>}
                        </div>
                      </div>
                    );
                  })}
              </div>
            </div>
          );
        })}
      </div>

      {creating && <TaskModal onClose={() => setCreating(false)} onSaved={() => { setCreating(false); load(); }} />}
    </div>
  );
}

function TaskModal({ onClose, onSaved }) {
  const [title, setTitle] = useTaskState('');
  const [detail, setDetail] = useTaskState('');
  const [assignee, setAssignee] = useTaskState(((window.EMPLOYEES || [])[0] || {}).id || '');
  const [due, setDue] = useTaskState(taskToday());
  const [priority, setPriority] = useTaskState('medium');
  const [busy, setBusy] = useTaskState(false);
  const [err, setErr] = useTaskState('');

  const save = async () => {
    if (!title.trim()) { setErr('กรุณากรอกหัวข้องาน'); return; }
    if (!assignee) { setErr('กรุณาเลือกผู้รับผิดชอบ'); return; }
    setBusy(true); setErr('');
    try {
      const r = await fetch('/api/tasks', { method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: title.trim(), detail: detail.trim(), assignee_id: assignee, due_date: due, priority }) });
      const d = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(d.error || `error ${r.status}`);
      window.appToast && window.appToast('มอบหมายงานแล้ว', { tone: 'success' });
      onSaved();
    } catch (e) { setErr(e.message); } finally { setBusy(false); }
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(15,23,42,.45)', display: 'grid', placeItems: 'center', padding: 20 }}>
      <div className="gv-card" onClick={(e) => e.stopPropagation()} style={{ width: 'min(500px,100%)', maxHeight: '90vh', overflow: 'auto' }}>
        <div className="gv-card-h"><b>มอบหมายงาน</b></div>
        <div className="gv-card-b" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div className="gv-field">
            <label>หัวข้องาน *</label>
            <input className="gv-input" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="เช่น จัดทำรายงานประจำเดือน" />
          </div>
          <div className="gv-field">
            <label>รายละเอียด</label>
            <textarea className="gv-textarea" value={detail} onChange={(e) => setDetail(e.target.value)} rows={3} placeholder="(ไม่บังคับ)" />
          </div>
          <div className="gv-field">
            <label>มอบหมายให้ *</label>
            <select className="gv-select" value={assignee} onChange={(e) => setAssignee(e.target.value)}>
              <option value="">— เลือกพนักงาน —</option>
              {(window.EMPLOYEES || []).map((e) => <option key={e.id} value={e.id}>{e.first_name} {e.last_name} ({e.id})</option>)}
            </select>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <div className="gv-field" style={{ flex: 1, marginBottom: 0 }}>
              <label>กำหนดส่ง</label>
              <input className="gv-input" type="date" value={due} onChange={(e) => setDue(e.target.value)} />
            </div>
            <div className="gv-field" style={{ flex: 1, marginBottom: 0 }}>
              <label>ความสำคัญ</label>
              <div className="gv-seg">
                {['low', 'medium', 'high'].map((k) => (
                  <button key={k} type="button" className={priority === k ? 'on' : ''} onClick={() => setPriority(k)}>{TASK_PRIORITY[k].label}</button>
                ))}
              </div>
            </div>
          </div>
          {err && <div style={{ padding: '10px 14px', borderRadius: 10, background: 'var(--coral-soft)', color: 'var(--coral-ink)', fontSize: 12.5, fontWeight: 600 }}>{err}</div>}
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 4 }}>
            <button className="gv-btn no" onClick={onClose} disabled={busy}>ยกเลิก</button>
            <button className="gv-btn ok" onClick={save} disabled={busy}>{busy ? 'กำลังบันทึก…' : 'มอบหมายงาน'}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TasksPage = TasksPage;