// Shared components

const { useState, useEffect, useRef, useMemo } = React;

function Avatar({ member, size = 'md' }) {
  const cls = size === 'lg' ? 'avatar lg' : size === 'sm' ? 'avatar sm' : size === 'xs' ? 'avatar xs' : 'avatar';
  return (
    <div className={cls} style={{ background: member.color }}>
      {member.nickname.charAt(0)}
    </div>
  );
}

function StatusPill({ status, overdue }) {
  if (overdue) {
    return <span className="status-pill status-overdue">เลยกำหนด</span>;
  }
  const meta = STATUS_META[status];
  return <span className={`status-pill status-${status}`}>{meta.label}</span>;
}

function IconPlus({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  );
}
function IconX({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  );
}
function IconSearch({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <circle cx="11" cy="11" r="8" />
      <line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>
  );
}
function IconCalendar({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <rect x="3" y="4" width="18" height="18" rx="2" />
      <line x1="16" y1="2" x2="16" y2="6" />
      <line x1="8" y1="2" x2="8" y2="6" />
      <line x1="3" y1="10" x2="21" y2="10" />
    </svg>
  );
}
function IconChevronDown({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
      <polyline points="6 9 12 15 18 9" />
    </svg>
  );
}
function IconTrash({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <polyline points="3 6 5 6 21 6" />
      <path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6" />
      <path d="M10 11v6M14 11v6" />
    </svg>
  );
}
function IconEdit({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M12 20h9" />
      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
    </svg>
  );
}

// Task Card (kanban)
function TaskCard({ task, onClick }) {
  const dl = deadlineLabel(task.deadline, task.status);
  return (
    <div className="task-card" onClick={() => onClick(task)}>
      <h4 className="task-card-title">{task.title}</h4>
      {task.desc && <p className="task-card-desc">{task.desc}</p>}
      <div className="task-card-footer">
        <span className={`task-card-deadline ${dl.cls}`}>
          <IconCalendar size={10} />
          {dl.text}
        </span>
      </div>
    </div>
  );
}

// Task Modal — for add/edit
function TaskModal({ task, onClose, onSave, onDelete, mode = 'edit' }) {
  const [title, setTitle] = useState(task?.title || '');
  const [desc, setDesc] = useState(task?.desc || '');
  const [status, setStatus] = useState(task?.status || 'todo');
  const [deadline, setDeadline] = useState(task?.deadline || daysFromNowIso(7));

  function handleSubmit(e) {
    e.preventDefault();
    if (!title.trim()) return;
    onSave({
      ...task,
      title: title.trim(),
      desc: desc.trim(),
      status,
      deadline,
    });
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2 className="modal-title">{mode === 'create' ? 'เพิ่มงานใหม่' : 'แก้ไขงาน'}</h2>
          <button className="modal-close" onClick={onClose}><IconX /></button>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="field">
            <label className="field-label">ชื่องาน</label>
            <input
              type="text"
              className="field-input"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="เช่น ออกแบบหน้า Login..."
              autoFocus
              required
            />
          </div>

          <div className="field">
            <label className="field-label">รายละเอียด</label>
            <textarea
              className="field-textarea"
              value={desc}
              onChange={(e) => setDesc(e.target.value)}
              placeholder="อธิบายรายละเอียดของงาน..."
            />
          </div>

          <div className="field-row">
            <div className="field">
              <label className="field-label">สถานะ</label>
              <div className="status-radio-group">
                {Object.entries(STATUS_META).map(([key, meta]) => (
                  <button
                    type="button"
                    key={key}
                    className={`status-radio ${key} ${status === key ? 'active' : ''}`}
                    onClick={() => setStatus(key)}
                  >
                    <span className="dot" style={{ background: meta.dot }} />
                    {meta.label}
                  </button>
                ))}
              </div>
            </div>
          </div>

          <div className="field">
            <label className="field-label">กำหนดส่ง</label>
            <input
              type="date"
              className="field-input"
              value={deadline}
              onChange={(e) => setDeadline(e.target.value)}
              required
            />
          </div>

          <div className="modal-footer">
            {mode === 'edit' && onDelete && (
              <button type="button" className="btn btn-ghost" onClick={() => onDelete(task)} style={{ marginRight: 'auto', color: 'var(--overdue)' }}>
                <IconTrash />
                ลบงาน
              </button>
            )}
            <button type="button" className="btn btn-secondary" onClick={onClose}>ยกเลิก</button>
            <button type="submit" className="btn btn-primary">
              {mode === 'create' ? 'เพิ่มงาน' : 'บันทึก'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function daysFromNowIso(n) {
  const d = new Date();
  d.setHours(0, 0, 0, 0);
  d.setDate(d.getDate() + n);
  return d.toISOString().slice(0, 10);
}

Object.assign(window, {
  Avatar, StatusPill, TaskCard, TaskModal,
  IconPlus, IconX, IconSearch, IconCalendar, IconChevronDown, IconTrash, IconEdit,
  daysFromNowIso,
});