/* global React, Icon, Avatar, AvatarGroup, Tag, dateFmt, dateState */
const { useState, useRef, useEffect } = React;

// ============ SIDEBAR ============
const Sidebar = ({ boards, activeBoard, onSelectBoard, onClose }) => {
  return (
    <aside className="sidebar">
      <div className="sidebar-inner">
        <div className="workspace-switcher">
          <div className="workspace-mark">A</div>
          <div className="workspace-name">Acme</div>
          <Icon name="chevron" size={12} stroke={1.75} />
        </div>

        <div className="sidebar-section">
          <div className="sidebar-item">
            <span className="icon"><Icon name="inbox" size={14} /></span>
            <span className="label">Inbox</span>
            <span className="count">3</span>
          </div>
          <div className="sidebar-item">
            <span className="icon"><Icon name="today" size={14} /></span>
            <span className="label">Hoje</span>
            <span className="count">7</span>
          </div>
          <div className="sidebar-item">
            <span className="icon"><Icon name="calendar" size={14} /></span>
            <span className="label">Próximos</span>
          </div>
        </div>

        <div className="sidebar-section">
          <div className="sidebar-header">
            <span>Boards</span>
          </div>
          {Object.values(boards).map((b) => (
            <div
              key={b.id}
              className="sidebar-item"
              data-active={b.id === activeBoard}
              onClick={() => { onSelectBoard(b.id); onClose && onClose(); }}
            >
              <span className="board-dot" style={{ background: b.color }} />
              <span className="label">{b.name}</span>
            </div>
          ))}
        </div>

        <div className="sidebar-section">
          <div className="sidebar-header">
            <span>Workspace</span>
          </div>
          <div className="sidebar-item">
            <span className="icon"><Icon name="users" size={14} /></span>
            <span className="label">Membros</span>
          </div>
          <div className="sidebar-item">
            <span className="icon"><Icon name="settings" size={14} /></span>
            <span className="label">Configurações</span>
          </div>
        </div>

        <div className="sidebar-footer">
          <Avatar name="João Pereira" size="sm" />
          <div className="user-meta">
            <div className="name">João Pereira</div>
            <div className="email">joao@acme.com</div>
          </div>
        </div>
      </div>
    </aside>
  );
};

// ============ TOPBAR ============
const Topbar = ({
  boardName, onToggleSidebar, onOpenCmdK, onNew, sidebarCollapsed,
}) => {
  return (
    <header className="topbar">
      <button className="icon-btn" onClick={onToggleSidebar} title={sidebarCollapsed ? "Mostrar sidebar" : "Ocultar sidebar"}>
        <Icon name="sidebar" size={15} />
      </button>
      <nav className="crumbs">
        <span className="crumb current">{boardName}</span>
      </nav>

      <div className="topbar-spacer" />

      <div className="searchbar" onClick={onOpenCmdK}>
        <span className="icon"><Icon name="search" size={13} /></span>
        <span className="placeholder">Buscar</span>
        <span className="kbd">⌘K</span>
      </div>

      <button className="icon-btn hide-mobile" onClick={onNew} title="Nova tarefa">
        <Icon name="plus" size={15} stroke={1.75} />
      </button>
    </header>
  );
};

// ============ BOARD HEADER ============
const BoardHeader = ({ board, totalCards, doneCards, onFilter }) => {
  return (
    <div className="board-header">
      <h1 className="board-title">{board.name}</h1>
      <div className="board-meta">
        <span className="stat"><strong>{totalCards}</strong> tarefas</span>
        {doneCards > 0 && <span className="stat"><strong>{doneCards}</strong> concluídas</span>}
      </div>
      <div className="board-actions">
        <button className="btn" data-variant="ghost" onClick={onFilter} title="Filtrar">
          <Icon name="filter" size={12} />
          <span className="hide-mobile">Filtrar</span>
        </button>
        <button className="btn" data-variant="ghost" title="Mais">
          <Icon name="more-h" size={13} />
        </button>
      </div>
    </div>
  );
};

// ============ TASK CARD ============
const TaskCard = ({ card, onClick, onDragStart, isDragging, isFresh }) => {
  const due = card.due ? dateFmt(card.due) : null;
  const dueClass = card.due ? dateState(card.due) : null;
  const hasMeta = due || card.checklist || card.comments > 0 || card.attachments > 0 || (card.assignees && card.assignees.length > 0);
  return (
    <div
      className="card"
      data-dragging={isDragging}
      data-completed={card.completed}
      data-fresh={isFresh}
      draggable
      onDragStart={(e) => onDragStart(e, card.id)}
      onClick={onClick}
    >
      {card.tags && card.tags.length > 0 && (
        <div className="card-tags">
          {card.tags.map((t, i) => (
            <Tag key={i} color={t.color}>{t.label}</Tag>
          ))}
        </div>
      )}
      <h3 className="card-title">{card.title}</h3>
      {card.desc && <p className="card-desc">{card.desc}</p>}
      {hasMeta && (
        <div className="card-meta">
          {card.priority === "high" && <span className="priority-flag" data-prio="high" title="Alta prioridade" />}
          {due && (
            <span className="due" data-state={dueClass}>
              {due}
            </span>
          )}
          {card.checklist && (
            <span className="stat" title={`${card.checklist.done}/${card.checklist.total} concluídos`}>
              <Icon name="check-sm" size={10} stroke={2.25} />
              {card.checklist.done}/{card.checklist.total}
            </span>
          )}
          {card.comments > 0 && (
            <span className="stat" title={`${card.comments} comentários`}>
              <Icon name="message" size={11} />
              {card.comments}
            </span>
          )}
          {card.attachments > 0 && (
            <span className="stat" title={`${card.attachments} anexos`}>
              <Icon name="paperclip" size={11} />
              {card.attachments}
            </span>
          )}
          <span className="spacer" />
          {card.assignees && card.assignees.length > 0 && (
            <AvatarGroup names={card.assignees} max={3} size="xs" />
          )}
        </div>
      )}
    </div>
  );
};

// ============ KANBAN COLUMN ============
const KanbanColumn = ({
  column, cards, dragOver, dragOverIndex, draggingId,
  onDragOver, onDragLeave, onDrop, onCardClick, onCardDragStart, onAddCard, freshCardId,
}) => {
  const [adding, setAdding] = useState(false);
  const [draft, setDraft] = useState("");
  const inputRef = useRef(null);
  const listRef = useRef(null);

  useEffect(() => {
    if (adding && inputRef.current) inputRef.current.focus();
  }, [adding]);

  const submit = () => {
    if (draft.trim()) onAddCard(column.id, draft.trim());
    setDraft("");
    setAdding(false);
  };

  // Compute insertion index from pointer Y relative to each card's midline.
  const computeIndex = (e) => {
    const list = listRef.current;
    if (!list) return cards.length;
    const cardEls = list.querySelectorAll(".card");
    const y = e.clientY;
    for (let i = 0; i < cardEls.length; i++) {
      const rect = cardEls[i].getBoundingClientRect();
      if (y < rect.top + rect.height / 2) return i;
    }
    return cardEls.length;
  };

  return (
    <div
      className="column"
      data-drop={dragOver}
      onDragOver={(e) => { e.preventDefault(); onDragOver(column.id, computeIndex(e)); }}
      onDragLeave={onDragLeave}
      onDrop={(e) => { e.preventDefault(); onDrop(column.id, computeIndex(e)); }}
    >
      <div className="column-head">
        <span className="column-dot" style={{ background: column.dot }} />
        <span className="column-title">{column.name}</span>
        <span className="column-count">{cards.length}</span>
        <span className="column-actions">
          <button className="icon-btn" onClick={() => setAdding(true)} title="Adicionar tarefa">
            <Icon name="plus-sm" size={12} stroke={2} />
          </button>
          <button className="icon-btn" title="Opções">
            <Icon name="more-h" size={12} />
          </button>
        </span>
      </div>
      <div className="column-list" ref={listRef}>
        {cards.map((c, i) => (
          <React.Fragment key={c.id}>
            {dragOver && dragOverIndex === i && draggingId !== c.id && (
              <div className="drop-indicator" />
            )}
            <TaskCard
              card={c}
              isDragging={draggingId === c.id}
              isFresh={freshCardId === c.id}
              onClick={() => onCardClick(c.id)}
              onDragStart={onCardDragStart}
            />
          </React.Fragment>
        ))}
        {dragOver && dragOverIndex === cards.length && (
          <div className="drop-indicator" />
        )}
        {adding ? (
          <input
            ref={inputRef}
            className="column-add-input"
            placeholder="Nome da tarefa…"
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            onBlur={submit}
            onKeyDown={(e) => {
              if (e.key === "Enter") submit();
              if (e.key === "Escape") { setDraft(""); setAdding(false); }
            }}
          />
        ) : (
          <div className="column-add" onClick={() => setAdding(true)}>
            <Icon name="plus-sm" size={11} stroke={2} />
            Nova tarefa
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Sidebar, Topbar, BoardHeader, TaskCard, KanbanColumn });