/* global React, Card, Badge, Button, Avatar, Icon, ICONS, Field, sb */
const { useState: useStateNT, useEffect: useEffectNT } = React;

function NewTask({ onClose, onCreate, defaultProject }) {
  const [title, setTitle] = useStateNT('');
  const [desc, setDesc] = useStateNT('');
  const [project, setProject] = useStateNT(defaultProject || '');
  const [priority, setPriority] = useStateNT('média');
  const [status, setStatus] = useStateNT('a fazer');
  const [due, setDue] = useStateNT('');
  const [estimate, setEstimate] = useStateNT('');
  const [assignee, setAssignee] = useStateNT('');
  const [tags, setTags] = useStateNT([]);
  const [projects, setProjects] = useStateNT([]);

  // Carregar projetos reais do Supabase
  useEffectNT(() => {
    if (typeof sb === 'undefined') return;
    sb.from('projects').select('name').order('name').then(({ data }) => {
      if (data && data.length) {
        const names = data.map(r => r.name);
        setProjects(names);
        if (!defaultProject && names.length) setProject(names[0]);
      }
    });
  }, []);

  const priorities = [
    { v:'baixa',  c:'#64748B', label:'Baixa' },
    { v:'média',  c:'#1890FF', label:'Média' },
    { v:'alta',   c:'#FA541C', label:'Alta' },
    { v:'urgente',c:'#EF4444', label:'Urgente' },
  ];
  const statuses = ['a fazer','em andamento','em revisão','concluído'];
  const tagBank = ['Design','Branding','Web','Conteúdo','Apresentação','Cliente','Revisão','Bug'];

  const toggleTag = (t) => setTags(tags.includes(t) ? tags.filter(x=>x!==t) : [...tags, t]);

  const canCreate = title.trim().length > 1;

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(7,11,28,0.72)', backdropFilter:'blur(6px)',
      display:'grid', placeItems:'center', zIndex:9999, padding:24,
    }}>
      <div onClick={(e)=>e.stopPropagation()} style={{
        width:'min(720px, 100%)', maxHeight:'90vh', display:'flex', flexDirection:'column',
        background:'var(--bg-surface)', border:'1px solid var(--border-strong)',
        borderRadius:18, boxShadow:'0 30px 80px rgba(0,0,0,0.55)', overflow:'hidden',
      }}>
        {/* Header */}
        <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap:16 }}>
          <div style={{ flex:1 }}>
            <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--geek-blue-300)' }}>Nova tarefa</div>
            <h2 style={{ margin:'4px 0 0', fontSize:18, fontWeight:700 }}>O que precisa ser feito?</h2>
          </div>
          <button onClick={onClose} style={{ background:'transparent', border:'1px solid var(--border-subtle)', color:'var(--fg-secondary)', width:34, height:34, borderRadius:8, cursor:'pointer', fontSize:18 }}>×</button>
        </div>

        {/* Body */}
        <div style={{ padding:'22px 24px', overflow:'auto', flex:1, display:'flex', flexDirection:'column', gap:16 }}>
          <div>
            <input
              autoFocus
              placeholder="Título da tarefa"
              value={title}
              onChange={(e)=>setTitle(e.target.value)}
              style={{
                width:'100%', background:'transparent', border:'none', outline:'none',
                color:'var(--fg-primary)', fontFamily:'var(--font-display)',
                fontSize:22, fontWeight:700, letterSpacing:'-0.01em',
              }}
            />
            <textarea
              placeholder="Adicione uma descrição (opcional)…"
              value={desc}
              onChange={(e)=>setDesc(e.target.value)}
              rows={2}
              style={{
                marginTop:6, width:'100%', background:'transparent', border:'none', outline:'none',
                color:'var(--fg-secondary)', fontFamily:'inherit', fontSize:14, resize:'vertical',
              }}
            />
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            <div>
              <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', display:'block', marginBottom:8 }}>Projeto</span>
              <select value={project} onChange={(e)=>setProject(e.target.value)} style={{
                width:'100%', background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)',
                color:'var(--fg-primary)', borderRadius:8, padding:'10px 12px', fontSize:13, fontFamily:'inherit', outline:'none',
              }}>
                {projects.map(p => <option key={p}>{p}</option>)}
              </select>
            </div>
            <div>
              <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', display:'block', marginBottom:8 }}>Status</span>
              <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
                {statuses.map(s => (
                  <button key={s} onClick={()=>setStatus(s)} style={{
                    padding:'7px 11px', borderRadius:999, fontSize:11, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
                    background: status===s ? 'var(--primary-soft)' : 'var(--bg-elevated)',
                    color: status===s ? 'var(--geek-blue-200)' : 'var(--fg-secondary)',
                    border:'1px solid', borderColor: status===s ? 'var(--geek-blue-a40)' : 'var(--border-subtle)',
                    textTransform:'capitalize',
                  }}>{s}</button>
                ))}
              </div>
            </div>
          </div>

          <div>
            <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', display:'block', marginBottom:8 }}>Prioridade</span>
            <div style={{ display:'flex', gap:8 }}>
              {priorities.map(p => (
                <button key={p.v} onClick={()=>setPriority(p.v)} style={{
                  display:'inline-flex', alignItems:'center', gap:8,
                  padding:'8px 14px', borderRadius:8, fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
                  background: priority===p.v ? 'var(--bg-elevated)' : 'transparent',
                  color: priority===p.v ? 'var(--fg-primary)' : 'var(--fg-secondary)',
                  border:'1.5px solid', borderColor: priority===p.v ? p.c : 'var(--border-subtle)',
                }}>
                  <span style={{ width:8, height:8, borderRadius:'50%', background:p.c }}/>
                  {p.label}
                </button>
              ))}
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            <Field icon="cal" label="Vencimento" placeholder="dd/mm/aaaa" value={due} onChange={(e)=>setDue(e.target.value)}/>
            <Field icon="chart" label="Estimativa (h)" placeholder="Ex.: 4" value={estimate} onChange={(e)=>setEstimate(e.target.value)}/>
          </div>

          <div>
            <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', display:'block', marginBottom:8 }}>Responsável</span>
            <input
              placeholder="Nome do responsável…"
              value={assignee}
              onChange={e => setAssignee(e.target.value)}
              style={{
                width:'100%', background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)',
                color:'var(--fg-primary)', borderRadius:8, padding:'10px 12px', fontSize:13, fontFamily:'inherit',
                outline:'none', boxSizing:'border-box',
              }}
            />
          </div>

          <div>
            <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', display:'block', marginBottom:8 }}>Tags</span>
            <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
              {tagBank.map(t => (
                <button key={t} onClick={()=>toggleTag(t)} style={{
                  padding:'5px 10px', borderRadius:6, fontSize:11, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
                  background: tags.includes(t) ? 'var(--primary-soft)' : 'transparent',
                  color: tags.includes(t) ? 'var(--geek-blue-200)' : 'var(--fg-muted)',
                  border:'1px dashed', borderColor: tags.includes(t) ? 'var(--geek-blue-a40)' : 'var(--border-subtle)',
                }}>#{t}</button>
              ))}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div style={{ padding:'14px 24px', borderTop:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap:10, background:'var(--bg-elevated)' }}>
          <span style={{ fontSize:11, color:'var(--fg-muted)' }}>
            <span style={{ fontFamily:'var(--font-mono)', background:'var(--bg-surface)', padding:'2px 6px', borderRadius:4, border:'1px solid var(--border-subtle)' }}>Esc</span> para cancelar · <span style={{ fontFamily:'var(--font-mono)', background:'var(--bg-surface)', padding:'2px 6px', borderRadius:4, border:'1px solid var(--border-subtle)' }}>⌘ ↵</span> para criar
          </span>
          <div style={{ flex:1 }}/>
          <Button variant="ghost" onClick={onClose}>Cancelar</Button>
          <Button
            icon="check"
            onClick={() => canCreate && onCreate?.({ title, desc, project, priority, status, due, estimate, assignee, tags })}
            style={{ opacity: canCreate ? 1 : 0.5, pointerEvents: canCreate ? 'auto' : 'none' }}
          >Criar tarefa</Button>
        </div>
      </div>
    </div>
  );
}
window.NewTask = NewTask;