/* ================================================================
   Khronus — Rotina (tarefas diárias, semanais e mensais)
   Uma linha por rotina no banco (não por ocorrência): o campo
   ultima_conclusao guarda só a última data marcada. "Concluída no
   ciclo atual" é calculado aqui no front comparando essa data com
   hoje (dia / semana ISO / mês) — o check volta sozinho assim que
   o ciclo vira, sem precisar de nenhum job de reset.
   Tudo dentro de uma IIFE: os .jsx do Khronus são carregados como
   script global no navegador (sem bundler), então isolar aqui evita
   qualquer colisão de nome de topo com outro arquivo.
   ================================================================ */
(function () {
  const { useState, useEffect } = React;
  const { LucideIcon, Btn, TopBar, IniciaisAvatar, EmpresaDot } = window;

  const FREQUENCIAS = [
    { id: 'diaria',  label: 'Diárias',  labelSingular: 'Diária'  },
    { id: 'semanal', label: 'Semanais', labelSingular: 'Semanal' },
    { id: 'mensal',  label: 'Mensais',  labelSingular: 'Mensal'  },
  ];

  /* ── Cálculo de ciclo (dia / semana ISO / mês) ──────────────────*/
  function ymd(d) {
    const p = n => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
  }
  function dataStrParaDate(s) {
    const [y, m, dd] = s.split('-').map(Number);
    return new Date(y, m - 1, dd);
  }
  function isoWeekToken(d) {
    const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
    const dayNum = (date.getUTCDay() + 6) % 7; // 0 = segunda
    date.setUTCDate(date.getUTCDate() - dayNum + 3);
    const firstThursday = new Date(Date.UTC(date.getUTCFullYear(), 0, 4));
    const week = 1 + Math.round(
      ((date - firstThursday) / 86400000 - 3 + ((firstThursday.getUTCDay() + 6) % 7)) / 7
    );
    return `${date.getUTCFullYear()}-W${String(week).padStart(2, '0')}`;
  }
  function monthToken(d) {
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
  }
  function cicloToken(frequencia, d) {
    if (frequencia === 'semanal') return isoWeekToken(d);
    if (frequencia === 'mensal') return monthToken(d);
    return ymd(d);
  }
  function estaConcluidaNoCiclo(tarefa) {
    if (!tarefa.ultima_conclusao) return false;
    return cicloToken(tarefa.frequencia, dataStrParaDate(tarefa.ultima_conclusao))
      === cicloToken(tarefa.frequencia, new Date());
  }

  /* ── Linha de tarefa ─────────────────────────────────────────────*/
  function RotinaRow({ tarefa, empresaTags, onToggle, onEdit }) {
    const [hov, setHov] = useState(false);
    const feita = estaConcluidaNoCiclo(tarefa);
    const empresa = (empresaTags || []).find(t => t.id === tarefa.company_tag_id);
    return (
      <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
        onClick={() => onEdit(tarefa)}
        style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px',
          borderRadius: 'var(--r-sm)', background: 'var(--app-surface-2)', border: '1px solid var(--app-border)',
          cursor: 'pointer', transition: 'all 130ms' }}>
        <button onClick={e => { e.stopPropagation(); onToggle(tarefa); }}
          style={{ width: 20, height: 20, borderRadius: 'var(--r-sm)', flexShrink: 0, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 130ms',
            background: feita ? 'var(--clr-pos)' : 'var(--overlay-08)',
            border: `1.5px solid ${feita ? 'var(--clr-pos)' : 'var(--app-border-2)'}` }}>
          {feita && <LucideIcon icon="check" size={13} color="#0f1013" />}
        </button>

        {empresa && <EmpresaDot cor={empresa.cor} nome={empresa.nome} size={9} />}

        <span style={{ flex: 1, fontSize: 'var(--fs-lg)', fontFamily: 'Roboto, sans-serif', fontWeight: 600,
          color: feita ? 'var(--text-3)' : 'var(--text-1)',
          textDecoration: feita ? 'line-through' : 'none' }}>
          {tarefa.titulo}
        </span>

        <IniciaisAvatar nome={tarefa.responsavel_nome} cor={tarefa.responsavel_cor} size={20} />
      </div>
    );
  }

  /* ── Seção por frequência ──────────────────────────────────────*/
  function RotinaSection({ freq, tarefas, empresaTags, onToggle, onEdit, onAddNew }) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 'var(--fs-md)', fontFamily: 'Roboto, sans-serif', fontWeight: 900,
            letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-2)' }}>
            {freq.label}
          </span>
          <button onClick={() => onAddNew(freq.id)}
            style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer',
              background: 'none', border: 'none', color: 'var(--text-3)',
              fontFamily: 'Roboto, sans-serif', fontSize: 'var(--fs-sm)', fontWeight: 700 }}>
            <LucideIcon icon="plus" size={12} />Adicionar
          </button>
        </div>

        {tarefas.length === 0 ? (
          <div style={{ padding: '12px 12px', textAlign: 'center', color: 'var(--text-3)',
            fontSize: 'var(--fs-md)', fontFamily: 'Roboto, sans-serif', border: '1px dashed var(--app-border)',
            borderRadius: 'var(--r-sm)' }}>
            Nenhuma tarefa {freq.labelSingular.toLowerCase()} ainda
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {tarefas.map(t => (
              <RotinaRow key={t.id} tarefa={t} empresaTags={empresaTags} onToggle={onToggle} onEdit={onEdit} />
            ))}
          </div>
        )}
      </div>
    );
  }

  /* ── Modal de criar/editar ───────────────────────────────────────*/
  function RotinaModal({ item, frequenciaInicial, membros, empresaTags, onClose, onSaved, onExcluir }) {
    const [titulo, setTitulo] = useState(item?.titulo || '');
    const [frequencia, setFrequencia] = useState(item?.frequencia || frequenciaInicial || 'diaria');
    const [responsavelId, setResponsavelId] = useState(item?.responsavel_id || '');
    const [companyTagId, setCompanyTagId] = useState(item?.company_tag_id || null);
    const [salvando, setSalvando] = useState(false);
    const [erro, setErro] = useState('');

    const inputStyle = {
      width: '100%', boxSizing: 'border-box', padding: '8px 12px', borderRadius: 'var(--r-sm)',
      background: 'var(--app-surface-2)', border: '1px solid var(--app-border)',
      color: 'var(--text-1)', fontFamily: 'Roboto, sans-serif', fontSize: 'var(--fs-lg)', outline: 'none',
    };
    const lblStyle = { fontSize: 'var(--fs-xs)', fontFamily: 'Roboto, sans-serif', fontWeight: 700,
      letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)',
      marginBottom: 6, display: 'block' };

    function pillStyle(active) {
      return { padding: '6px 12px', borderRadius: 'var(--r-full)', cursor: 'pointer',
        fontFamily: 'Roboto, sans-serif', fontWeight: 700, fontSize: 'var(--fs-md)', transition: 'all 150ms',
        display: 'flex', alignItems: 'center', gap: 6,
        background: active ? 'var(--overlay-15)' : 'var(--overlay-08)',
        border: `1px solid ${active ? 'var(--app-border-2)' : 'var(--app-border)'}`,
        color: active ? 'var(--text-1)' : 'var(--text-3)' };
    }

    async function salvar() {
      if (!titulo.trim()) { setErro('Dê um título.'); return; }
      setSalvando(true); setErro('');
      try {
        const payload = {
          titulo: titulo.trim(), frequencia,
          responsavel_id: responsavelId || null,
          company_tag_id: companyTagId || null,
        };
        if (item?.id) {
          const { error } = await window.db.from('crm_routine_tasks').update(payload).eq('id', item.id);
          if (error) throw error;
        } else {
          const { error } = await window.db.from('crm_routine_tasks').insert(payload);
          if (error) throw error;
        }
        onSaved();
      } catch (e) {
        setErro(e.message || String(e));
      } finally {
        setSalvando(false);
      }
    }

    return (
      <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.55)', zIndex: 1000,
        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
        onClick={onClose}>
        <div style={{ width: '100%', maxWidth: 420, background: 'var(--app-surface)',
          border: '1px solid var(--app-border)', borderRadius: 'var(--r-xl)', padding: 22,
          display: 'flex', flexDirection: 'column', gap: 12, maxHeight: '90vh', overflowY: 'auto' }}
          onClick={e => e.stopPropagation()}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ fontFamily: 'Roboto, sans-serif', fontWeight: 900, fontSize: 'var(--fs-xl)', color: 'var(--text-1)' }}>
              {item?.id ? 'Editar rotina' : 'Nova rotina'}
            </span>
            <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)' }}>
              <LucideIcon icon="x" size={18} />
            </button>
          </div>

          <div>
            <span style={lblStyle}>Título</span>
            <input style={inputStyle} value={titulo} onChange={e => setTitulo(e.target.value)}
              placeholder="Ex.: Responder mensagens do WhatsApp" />
          </div>

          <div>
            <span style={lblStyle}>Frequência</span>
            <div style={{ display: 'flex', gap: 6 }}>
              {FREQUENCIAS.map(f => (
                <button key={f.id} onClick={() => setFrequencia(f.id)} style={pillStyle(frequencia === f.id)}>
                  {f.labelSingular}
                </button>
              ))}
            </div>
          </div>

          <div>
            <span style={lblStyle}>Responsável</span>
            <select style={inputStyle} value={responsavelId} onChange={e => setResponsavelId(e.target.value)}>
              <option value="">Comum (de todos)</option>
              {(membros || []).map(m => <option key={m.id} value={m.id}>{m.nome}</option>)}
            </select>
          </div>

          <div>
            <span style={lblStyle}>Empresa</span>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <button onClick={() => setCompanyTagId(null)} style={pillStyle(!companyTagId)}>Nenhuma</button>
              {(empresaTags || []).map(t => (
                <button key={t.id} onClick={() => setCompanyTagId(t.id)} style={pillStyle(companyTagId === t.id)}>
                  <EmpresaDot cor={t.cor} size={10} />{t.nome}
                </button>
              ))}
            </div>
          </div>

          {erro && (
            <div style={{ padding: '8px 12px', borderRadius: 'var(--r-sm)', background: 'rgba(248,113,113,.1)',
              border: '1px solid rgba(248,113,113,.25)', color: 'var(--clr-neg)', fontSize: 'var(--fs-md)' }}>{erro}</div>
          )}

          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
            {item?.id ? <Btn variant="danger" icon="trash-2" onClick={() => onExcluir(item)}>Excluir</Btn> : <span />}
            <div style={{ display: 'flex', gap: 8 }}>
              <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
              <Btn variant="primary" onClick={salvar} disabled={salvando} icon={salvando ? undefined : 'check'}>
                {salvando ? 'Salvando…' : 'Salvar'}
              </Btn>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ── Tela ─────────────────────────────────────────────────────*/
  // embutido=true: usado dentro de Agenda > Tarefas > Ver: Rotina, sem TopBar
  // própria (a Agenda já tem a sua) e ocupando a largura toda em vez do
  // max-width de tela isolada.
  function RotinaScreen({ embutido = false }) {
    const [tarefas, setTarefas] = useState([]);
    const [membros, setMembros] = useState([]);
    const [empresaTags, setEmpresaTags] = useState([]);
    const [loading, setLoading] = useState(true);
    const [modal, setModal] = useState(null); // { item, frequenciaInicial } | null

    async function load() {
      setLoading(true);
      const [{ data: t }, { data: m }, { data: e }] = await Promise.all([
        window.db.from('crm_routine_tasks').select('*').eq('ativo', true).order('ordem'),
        window.db.from('crm_team_members').select('*').eq('ativo', true).order('ordem'),
        window.db.from('crm_company_tags').select('*').eq('ativo', true).order('ordem'),
      ]);
      // Lookup client-side (mesmo padrão do resto do app, ver agenda.jsx),
      // em vez de embed do PostgREST — evita depender do nome da FK detectada.
      setTarefas((t || []).map(r => {
        const mem = (m || []).find(x => x.id === r.responsavel_id);
        return { ...r, responsavel_nome: mem?.nome || null, responsavel_cor: mem?.cor || null };
      }));
      setMembros(m || []);
      setEmpresaTags(e || []);
      setLoading(false);
    }
    useEffect(() => { load(); }, []);

    async function toggle(tarefa) {
      const feita = estaConcluidaNoCiclo(tarefa);
      const novaData = feita ? null : ymd(new Date());
      // Otimista: atualiza na tela antes da resposta do banco, pra marcar sem travar.
      setTarefas(prev => prev.map(t => t.id === tarefa.id ? { ...t, ultima_conclusao: novaData } : t));
      await window.db.from('crm_routine_tasks').update({ ultima_conclusao: novaData }).eq('id', tarefa.id);
    }

    async function excluir(item) {
      if (!confirm(`Remover a rotina "${item.titulo}"?`)) return;
      await window.db.from('crm_routine_tasks').update({ ativo: false }).eq('id', item.id);
      setModal(null);
      load();
    }

    const conteudo = (
      <>
        <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: embutido ? '16px 20px' : '18px 24px 24px',
          display: 'flex', flexDirection: 'column', gap: 20, maxWidth: embutido ? 'none' : 640 }}>
          {loading ? (
            <div style={{ padding: 16, textAlign: 'center', color: 'var(--text-3)', fontSize: 'var(--fs-lg)' }}>Carregando…</div>
          ) : (
            FREQUENCIAS.map(freq => (
              <RotinaSection key={freq.id} freq={freq}
                tarefas={tarefas.filter(t => t.frequencia === freq.id)}
                empresaTags={empresaTags}
                onToggle={toggle}
                onEdit={item => setModal({ item })}
                onAddNew={frequenciaInicial => setModal({ item: null, frequenciaInicial })}
              />
            ))
          )}
        </div>

        {modal && (
          <RotinaModal item={modal.item} frequenciaInicial={modal.frequenciaInicial}
            membros={membros} empresaTags={empresaTags}
            onClose={() => setModal(null)}
            onSaved={() => { setModal(null); load(); }}
            onExcluir={excluir} />
        )}
      </>
    );

    if (embutido) return conteudo;

    return (
      <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, overflow: 'hidden' }}>
        <TopBar title="Rotina" />
        {conteudo}
      </div>
    );
  }

  window.RotinaScreen = RotinaScreen;
})();