/* global React, Icon, Avatar, fmtBRL, daysLabel */
const { useState: useStateK, useRef: useRefK, useEffect: useEffectK } = React;

/* =========================================================================
   Kanban Card
   ========================================================================= */
function Card({ deal, onClick, onDragStart, onDragEnd, dragging, density }) {
  return (
    <div
      className={'card' + (dragging ? ' dragging' : '')}
      draggable
      onDragStart={(e) => onDragStart(e, deal)}
      onDragEnd={onDragEnd}
      onClick={onClick}
    >
      <div className="card-row">
        <Avatar size="sm" initials={deal.initials} bg={deal.avatarBg} fg={deal.avatarFg} name={deal.name}/>
        <div className="card-name">{deal.name}</div>
        {deal.hot && <div className="card-hot" title="Hot lead"/>}
      </div>

      {density !== 'compact' && (
        <div className="card-foot" style={{ color: 'var(--ink-3)', fontSize: 11 }}>
          <span style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{deal.company}</span>
        </div>
      )}

      <div className="card-row" style={{ justifyContent: 'space-between' }}>
        <div className="card-value">
          <span className="currency">R$</span>{fmtBRL(deal.value)}
        </div>
        {deal.tag && (
          <span className="card-tag" style={{
            color: deal.tag[1],
            background: 'color-mix(in srgb, ' + deal.tag[1] + ' 10%, transparent)',
          }}>{deal.tag[0]}</span>
        )}
      </div>

      {density === 'rich' && deal.nextAction && (
        <div className="card-action">
          <Icon name="arrow-right" size={12}/>
          <span style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{deal.nextAction}</span>
        </div>
      )}
      {density === 'rich' && (
        <div className="card-foot">
          <span>{deal.owner}</span>
          <span className="sep"/>
          <span>{daysLabel(deal.days)}</span>
          {deal.destination && <><span className="sep"/><span>{deal.destination}</span></>}
        </div>
      )}
    </div>
  );
}

/* =========================================================================
   Column
   ========================================================================= */
function Column({ stage, deals, onCardClick, onDragStart, onDragEnd, draggingId,
                  onDrop, onDragOver, onDragLeave, isOver,
                  onRenameStage, onDeleteStage, onAddCard, editing, density }) {
  const total = deals.reduce((s, d) => s + d.value, 0);
  const [renaming, setRenaming] = useStateK(false);
  const [name, setName] = useStateK(stage.name);
  useEffectK(() => setName(stage.name), [stage.name]);

  return (
    <div className="column">
      <div className="column-head">
        <div className="column-head-row">
          <div className="column-name">
            <span className="column-dot" style={{ background: stage.accent }}/>
            {renaming ? (
              <input
                autoFocus
                value={name}
                onChange={(e) => setName(e.target.value)}
                onBlur={() => { setRenaming(false); if (name.trim()) onRenameStage(stage.id, name.trim()); else setName(stage.name); }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') { e.target.blur(); }
                  if (e.key === 'Escape') { setName(stage.name); setRenaming(false); }
                }}
              />
            ) : (
              <span
                onDoubleClick={() => editing && setRenaming(true)}
                style={{ cursor: editing ? 'text' : 'default', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}
              >{stage.name}</span>
            )}
          </div>
          <span className="column-count">{deals.length}</span>
          {editing && (
            <button className="column-menu" title="Renomear"
                    onClick={() => setRenaming(true)}>
              <Icon name="edit" size={13}/>
            </button>
          )}
          {editing && (
            <button className="column-menu" title="Remover etapa"
                    onClick={() => onDeleteStage(stage.id)}>
              <Icon name="trash" size={13}/>
            </button>
          )}
        </div>
        <div className="column-stats">
          <span className="value tabular"><span style={{ fontFamily: 'var(--font-ui)', fontSize: 10, color: 'var(--ink-3)', marginRight: 3 }}>R$</span>{fmtBRL(total, { compact: true })}</span>
          <span className="label">em pipeline</span>
        </div>
      </div>

      <div
        className={'column-body' + (isOver ? ' drag-over' : '')}
        onDragOver={(e) => { e.preventDefault(); onDragOver(stage.id); }}
        onDragLeave={onDragLeave}
        onDrop={(e) => { e.preventDefault(); onDrop(stage.id); }}
      >
        {deals.map(d => (
          <Card key={d.id} deal={d} density={density}
                onClick={() => onCardClick(d)}
                onDragStart={onDragStart}
                onDragEnd={onDragEnd}
                dragging={draggingId === d.id}/>
        ))}
        {deals.length === 0 && (
          <div style={{ color: 'var(--ink-4)', fontSize: 11.5, padding: '14px 4px', textAlign: 'center' }}>
            Solte um cartão aqui
          </div>
        )}
      </div>

      <div className="column-add">
        <button className="add-card-btn" onClick={() => onAddCard(stage.id)}>
          <Icon name="plus" size={13}/> Novo negócio
        </button>
      </div>
    </div>
  );
}

/* =========================================================================
   Kanban Board
   ========================================================================= */
function Kanban({ stages, deals, onCardClick, onRenameStage, onDeleteStage, onAddStage, onAddCard, onMoveDeal, editing, density, filterOwner, filterHot }) {
  const [draggingId, setDraggingId] = useStateK(null);
  const [overStage, setOverStage] = useStateK(null);

  const onDragStart = (e, deal) => {
    setDraggingId(deal.id);
    try { e.dataTransfer.setData('text/plain', deal.id); e.dataTransfer.effectAllowed = 'move'; } catch (_) {}
  };
  const onDragEnd = () => { setDraggingId(null); setOverStage(null); };
  const onDragOver = (stageId) => setOverStage(stageId);
  const onDragLeave = () => {};
  const onDrop = (stageId) => {
    if (!draggingId) return;
    onMoveDeal(draggingId, stageId);
    setDraggingId(null);
    setOverStage(null);
  };

  const filterDeal = (d) => {
    if (filterOwner && filterOwner !== 'all' && d.owner !== filterOwner) return false;
    if (filterHot && !d.hot) return false;
    return true;
  };

  return (
    <div className="kanban-wrap">
      <div className="kanban">
        {stages.map(stage => (
          <Column
            key={stage.id}
            stage={stage}
            deals={deals.filter(d => d.stage === stage.id && filterDeal(d))}
            density={density}
            editing={editing}
            onCardClick={onCardClick}
            onDragStart={onDragStart}
            onDragEnd={onDragEnd}
            draggingId={draggingId}
            onDrop={onDrop}
            onDragOver={onDragOver}
            onDragLeave={onDragLeave}
            isOver={overStage === stage.id && draggingId}
            onRenameStage={onRenameStage}
            onDeleteStage={onDeleteStage}
            onAddCard={onAddCard}
          />
        ))}
        {editing && (
          <button className="column-add-stage" onClick={onAddStage}>
            <span><Icon name="plus" size={14}/> Adicionar etapa</span>
          </button>
        )}
      </div>
    </div>
  );
}

window.Kanban = Kanban;

/* =========================================================================
   Drawer (detalhe do negócio)
   ========================================================================= */
function DealDrawer({ deal, stages, open, onClose, onChangeStage, activities = [] }) {
  const stageIdx = deal ? stages.findIndex(s => s.id === deal.stage) : -1;
  const dealActivities = deal
    ? activities.filter((a) => a.entityType === 'deal' && a.entityId === deal.id).slice(0, 8)
    : [];

  return (
    <>
      <div className={'drawer-overlay' + (open ? ' open' : '')} onClick={onClose}/>
      <div className={'drawer' + (open ? ' open' : '')}>
        {deal && (
          <>
            <div className="drawer-head">
              <div className="drawer-head-row">
                <Avatar size="lg" initials={deal.initials} bg={deal.avatarBg} fg={deal.avatarFg} name={deal.name}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                    <div className="serif" style={{ fontSize: 22, color: 'var(--ink)', letterSpacing: '-0.015em' }}>{deal.name}</div>
                    {deal.hot && <span style={{ fontSize: 10, color: 'var(--hot)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>· hot</span>}
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{deal.company} · {deal.city}</div>
                </div>
                <button className="drawer-close" onClick={onClose}><Icon name="close" size={16}/></button>
              </div>

              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <div>
                  <div style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-4)' }}>Valor</div>
                  <div className="serif" style={{ fontSize: 24, color: 'var(--ink)', letterSpacing: '-0.02em' }}>
                    <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11, color: 'var(--ink-3)', marginRight: 3, letterSpacing: '0.04em' }}>R$</span>
                    {fmtBRL(deal.value)}
                  </div>
                </div>
                <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--line)' }}/>
                <div>
                  <div style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-4)' }}>Responsável</div>
                  <div style={{ fontSize: 14, color: 'var(--ink)', display: 'flex', alignItems: 'center', gap: 8, marginTop: 2 }}>
                    <Avatar size="sm" initials={deal.owner || '--'} bg="#3b4a42" fg="#e8efe9"/>
                    {deal.ownerName || 'Não definido'}
                  </div>
                </div>
                <div style={{ flex: 1 }}/>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="btn icon" title="Ligar"><Icon name="phone" size={14}/></button>
                  <button className="btn icon" title="WhatsApp"><Icon name="whatsapp" size={14}/></button>
                  <button className="btn icon" title="E-mail"><Icon name="mail" size={14}/></button>
                </div>
              </div>

              <div className="drawer-stage-bar">
                {stages.map((s, i) => (
                  <div
                    key={s.id}
                    className={'step ' + (i < stageIdx ? 'done' : '') + (i === stageIdx ? ' active' : '')}
                    onClick={() => onChangeStage(deal.id, s.id)}
                    title={s.name}
                  >{s.name}</div>
                ))}
              </div>
            </div>

            <div className="drawer-body">
              <div>
                <div className="drawer-section-title">Detalhes</div>
                <dl className="kv">
                  <dt>Empresa</dt><dd>{deal.company}</dd>
                  <dt>Cidade</dt><dd>{deal.city}</dd>
                  {deal.destination && (<><dt>Destino</dt><dd>{deal.destination}</dd></>)}
                  {deal.tag && (<><dt>Origem</dt><dd>{deal.tag[0]}</dd></>)}
                  <dt>Última atividade</dt><dd>{daysLabel(deal.days)}</dd>
                  {deal.nextAction && (<><dt>Próxima ação</dt><dd>{deal.nextAction}</dd></>)}
                </dl>
              </div>

              <div>
                <div className="drawer-section-title">Diagnóstico</div>
                <div className="note-box">{deal.notes}</div>
              </div>

              <div>
                <div className="drawer-section-title">Atividade</div>
                <div className="timeline">
                  {dealActivities.map((activity, idx) => (
                    <div key={activity.id} className={'timeline-item' + (idx === 0 ? ' accent' : '')}>
                      <div className="timeline-when">{new Date(activity.createdAt).toLocaleString('pt-BR')}</div>
                      <div className="timeline-what">{activity.description}</div>
                      <div className="timeline-who">{activity.action}</div>
                    </div>
                  ))}
                  {dealActivities.length === 0 && (
                    <div className="timeline-item">
                      <div className="timeline-when">Sem histórico</div>
                      <div className="timeline-what">As movimentações e atualizações deste negócio aparecerão aqui.</div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </>
        )}
      </div>
    </>
  );
}

window.DealDrawer = DealDrawer;