// panel.jsx — Dashboard interno (Gantt + checklist de objetivos)
// Ruta oculta /panel, requiere auth Supabase.
// Diseño alineado al lenguaje visual del sitio público: dark editorial,
// cobre como acento, tipografía Barlow, animaciones Reveal.

function PanelApp() {
  const supa = window.supabaseClient;
  const [session, setSession] = React.useState(undefined);

  React.useEffect(() => {
    supa.auth.getSession().then(({ data }) => setSession(data.session));
    const { data: sub } = supa.auth.onAuthStateChange((_e, sess) => setSession(sess));
    return () => sub.subscription.unsubscribe();
  }, []);

  if (session === undefined) return <div className="pn-loading"><span>Cargando…</span></div>;
  if (!session) return <PanelLogin />;
  return <PanelDashboard session={session} />;
}

// ============================================================
// Login
// ============================================================
function PanelLogin() {
  const supa = window.supabaseClient;
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [err, setErr] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault(); setErr(''); setLoading(true);
    const { error } = await supa.auth.signInWithPassword({ email, password: pw });
    if (error) setErr(error.message);
    setLoading(false);
  };

  return (
    <div className="pn-login-shell">
      <div className="pn-login-grad"></div>
      <Reveal className="pn-login-card">
        <div className="eyebrow on-dark" style={{ color: 'var(--pt-copper-light)' }}>Acceso restringido</div>
        <h1 className="pn-login-title">Panel de objetivos</h1>
        <p className="pn-login-lead">Coordinación interna. Ingrese con sus credenciales PERTEC.</p>
        <form onSubmit={submit} className="pn-login-form">
          <label>
            <span>Email corporativo</span>
            <input type="email" required autoFocus value={email} onChange={e=>setEmail(e.target.value)} placeholder="nombre@pertec.cl" />
          </label>
          <label>
            <span>Contraseña</span>
            <input type="password" required value={pw} onChange={e=>setPw(e.target.value)} placeholder="••••••••" />
          </label>
          {err && <div className="pn-err">{err}</div>}
          <button type="submit" className="btn primary" disabled={loading}>
            {loading ? 'Verificando…' : 'Entrar'}
            <i data-lucide="arrow-right" className="arrow"></i>
          </button>
        </form>
        <a href="/" className="pn-login-back">← Volver al sitio</a>
      </Reveal>
    </div>
  );
}

// ============================================================
// Dashboard
// ============================================================
function PanelDashboard({ session }) {
  const supa = window.supabaseClient;
  const [objetivos, setObjetivos] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editing, setEditing] = React.useState(null);
  const [view, setView] = React.useState(() => localStorage.getItem('panel-view') || 'gantt');

  React.useEffect(() => { localStorage.setItem('panel-view', view); }, [view]);

  const load = async () => {
    setLoading(true);
    const { data } = await supa.from('objetivos')
      .select('*')
      .order('fecha_inicio', { ascending: true })
      .order('orden', { ascending: true });
    setObjetivos(data || []);
    setLoading(false);
  };
  React.useEffect(() => { load(); }, []);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [view, objetivos, editing, loading]);

  const toggleHecho = async (o) => {
    setObjetivos(prev => prev.map(x => x.id === o.id ? { ...x, hecho: !o.hecho } : x));
    const { error } = await supa.from('objetivos').update({ hecho: !o.hecho }).eq('id', o.id);
    if (error) { console.error(error); load(); }
  };
  const onDelete = async (o) => {
    if (!confirm(`¿Eliminar "${o.titulo}"?`)) return;
    const { error } = await supa.from('objetivos').delete().eq('id', o.id);
    if (error) { alert('Error: ' + error.message); return; }
    load();
  };

  const total = objetivos.length;
  const hechos = objetivos.filter(o => o.hecho).length;
  const activos = total - hechos;
  const pct = total > 0 ? Math.round((hechos / total) * 100) : 0;
  const today = new Date(); today.setHours(0,0,0,0);
  const vencen = objetivos.filter(o => {
    if (o.hecho) return false;
    const e = parseDate(o.fecha_fin); e.setHours(0,0,0,0);
    const diff = (e - today) / (1000*60*60*24);
    return diff >= 0 && diff <= 7;
  }).length;

  return (
    <div className="pn-shell">
      {/* ============ TOP STRIP ============ */}
      <div className="pn-strip">
        <div className="pn-strip-inner">
          <div className="pn-brand-row">
            <span className="pn-brand-mark"></span>
            <span className="pn-brand-name">PERTEC · PANEL</span>
          </div>
          <div className="pn-strip-r">
            <span className="pn-user">{session.user.email}</span>
            <a href="/" className="pn-strip-link">Ver sitio</a>
            <a href="/admin" className="pn-strip-link">Admin</a>
            <button className="pn-strip-link as-btn" onClick={() => supa.auth.signOut()}>Cerrar sesión</button>
          </div>
        </div>
      </div>

      {/* ============ HERO — split asimétrico ============ */}
      <section className="pn-hero">
        <div className="pn-hero-bg"></div>
        <div className="pn-hero-grid"></div>
        <div className="pn-hero-inner pn-hero-split">
          {/* LEFT — editorial */}
          <div className="pn-hero-l">
            <Reveal><div className="eyebrow hero-eyebrow">Coordinación interna · {monthYear()}</div></Reveal>
            <Reveal delay={1}><h1 className="pn-hero-title">Objetivos<br/><span className="pn-hero-italic">para la</span> continuidad.</h1></Reveal>
            <Reveal delay={2}><p className="pn-hero-lead">Carta Gantt operativa para alinear entregables del equipo PERTEC. Programa por días, marca avances en tiempo real y mantén foco en lo que viene.</p></Reveal>
            <Reveal delay={3} className="pn-hero-cta-row">
              <button className="btn primary" onClick={() => setEditing({})}>
                <i data-lucide="plus"></i> Nuevo objetivo
                <i data-lucide="arrow-right" className="arrow"></i>
              </button>
              <a className="pn-hero-anchor" onClick={() => document.getElementById('pn-plan')?.scrollIntoView({behavior:'smooth'})}>
                Ver planificación <i data-lucide="arrow-down"></i>
              </a>
            </Reveal>
          </div>

          {/* RIGHT — metric panel */}
          <Reveal delay={2} className="pn-hero-r">
            <div className="pn-hero-card">
              <div className="pn-hero-card-h">
                <span className="eyebrow">Progreso global</span>
                <span className="pn-hero-card-meta">{hechos}/{total}</span>
              </div>
              <div className="pn-hero-ring">
                <ProgressRing pct={pct} />
                <div className="pn-hero-ring-c">
                  <span className="pn-hero-ring-pct">{pct}<i>%</i></span>
                  <span className="pn-hero-ring-lbl">completado</span>
                </div>
              </div>
              <div className="pn-hero-minis">
                <Mini lbl="Activos"     val={activos} tone="copper" />
                <Mini lbl="Completados" val={hechos}  tone="teal" />
                <Mini lbl="Vencen ≤ 7d" val={vencen}  tone="warn" />
              </div>
            </div>
            <div className="pn-hero-side">
              <div className="pn-hero-side-l">PERTEC</div>
              <div className="pn-hero-side-t">{`${String(now().getDate()).padStart(2,'0')} · ${monthYear()}`}</div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ============ ZONA PLANIFICACIÓN (bg distinto al hero) ============ */}
      <div className="pn-plan-zone" id="pn-plan">
        <section className="pn-plan-head wrap minimal">
          <Reveal className="pn-plan-head-l">
            <div className="eyebrow">Planificación</div>
            <span className="pn-plan-hint">{total} objetivo{total === 1 ? '' : 's'} · {activos} activo{activos === 1 ? '' : 's'} · {hechos} completado{hechos === 1 ? '' : 's'}</span>
          </Reveal>
          <Reveal delay={1} className="pn-tabs">
            <button className={`pn-tab ${view==='gantt'?'on':''}`} onClick={()=>setView('gantt')}>
              <i data-lucide="bar-chart-horizontal"></i><span>Gantt</span>
            </button>
            <button className={`pn-tab ${view==='checklist'?'on':''}`} onClick={()=>setView('checklist')}>
              <i data-lucide="check-square"></i><span>Checklist</span>
            </button>
          </Reveal>
        </section>

        {/* ============ CONTENT ============ */}
        <section className="pn-content wrap">
        {loading ? (
          <div className="pn-empty"><span>Cargando…</span></div>
        ) : objetivos.length === 0 ? (
          <Reveal className="pn-empty">
            <div className="eyebrow">Empieza el plan</div>
            <h3>Aún no hay objetivos cargados.</h3>
            <p>Define el primer entregable y empieza a programar la carta Gantt del equipo.</p>
            <button className="btn primary" onClick={() => setEditing({})}>
              Crear el primero <i data-lucide="arrow-right" className="arrow"></i>
            </button>
          </Reveal>
        ) : view === 'gantt' ? (
          <GanttChart objetivos={objetivos} onToggle={toggleHecho} onEdit={setEditing} />
        ) : (
          <ChecklistView objetivos={objetivos} onToggle={toggleHecho} onEdit={setEditing} onDelete={onDelete} />
        )}
        </section>
      </div>

      <div style={{ height: 60 }}></div>

      {editing && (
        <ObjetivoForm
          objetivo={editing}
          onClose={() => setEditing(null)}
          onSaved={() => { setEditing(null); load(); }}
          onDelete={editing.id ? () => { onDelete(editing); setEditing(null); } : null}
        />
      )}
    </div>
  );
}

function Mini({ lbl, val, tone }) {
  return (
    <div className={`pn-mini ${tone ? 'tone-'+tone : ''}`}>
      <span className="pn-mini-lbl">{lbl}</span>
      <span className="pn-mini-val">{val}</span>
    </div>
  );
}

function ProgressRing({ pct }) {
  const size = 168, stroke = 10;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c - (Math.max(0, Math.min(100, pct)) / 100) * c;
  return (
    <svg className="pn-ring" width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
      <defs>
        <linearGradient id="pn-ring-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#C85217" />
          <stop offset="60%" stopColor="#E67E3F" />
          <stop offset="100%" stopColor="#00A080" />
        </linearGradient>
      </defs>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(23,20,17,.08)" strokeWidth={stroke} />
      <circle
        cx={size/2} cy={size/2} r={r} fill="none"
        stroke="url(#pn-ring-grad)" strokeWidth={stroke}
        strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off}
        transform={`rotate(-90 ${size/2} ${size/2})`}
        style={{ transition: 'stroke-dashoffset .8s cubic-bezier(.22,.61,.36,1)' }}
      />
    </svg>
  );
}

function now() { return new Date(); }
function monthYear() {
  return new Date().toLocaleDateString('es-CL', { month: 'long', year: 'numeric' }).toUpperCase();
}

// ============================================================
// Gantt
// ============================================================
const COLORS = {
  cobre:    { bg: '#C85217', soft: 'rgba(200,82,23,.18)',  edge: 'rgba(200,82,23,.55)',  txt: '#fff' },
  teal:     { bg: '#00A080', soft: 'rgba(0,160,128,.18)',  edge: 'rgba(0,160,128,.55)',  txt: '#fff' },
  acero:    { bg: '#4A6FA5', soft: 'rgba(74,111,165,.18)', edge: 'rgba(74,111,165,.55)', txt: '#fff' },
  amarillo: { bg: '#D4A017', soft: 'rgba(212,160,23,.18)', edge: 'rgba(212,160,23,.55)', txt: '#1a1714' },
  violeta:  { bg: '#7A5BAD', soft: 'rgba(122,91,173,.18)', edge: 'rgba(122,91,173,.55)', txt: '#fff' },
};
const COLOR_OPTS = ['cobre','teal','acero','amarillo','violeta'];

function parseDate(s) {
  if (!s) return null;
  const [y, m, d] = String(s).split('-').map(Number);
  return new Date(y, (m||1) - 1, d || 1);
}
function isoDate(d) {
  const y = d.getFullYear(), m = String(d.getMonth()+1).padStart(2,'0'), dd = String(d.getDate()).padStart(2,'0');
  return `${y}-${m}-${dd}`;
}
function daysBetween(a, b) { return Math.round((b - a) / (1000*60*60*24)); }
function addDays(d, n) { const c = new Date(d); c.setDate(c.getDate() + n); return c; }
function fmtMonth(d) { return d.toLocaleDateString('es-CL', { month: 'long' }).toUpperCase(); }

function GanttChart({ objetivos, onToggle, onEdit }) {
  const starts = objetivos.map(o => parseDate(o.fecha_inicio).getTime());
  const ends = objetivos.map(o => parseDate(o.fecha_fin).getTime());
  const today = new Date(); today.setHours(0,0,0,0);
  const minTs = Math.min(today.getTime(), ...starts);
  const maxTs = Math.max(today.getTime(), ...ends);
  const start = addDays(new Date(minTs), -3);
  const end = addDays(new Date(maxTs), 3);
  const totalDays = daysBetween(start, end) + 1;
  const dayW = 38;

  const days = [];
  for (let i = 0; i < totalDays; i++) days.push(addDays(start, i));

  const monthGroups = [];
  let curMonth = null, runLen = 0, runStart = 0;
  days.forEach((d, i) => {
    const key = `${d.getFullYear()}-${d.getMonth()}`;
    if (key !== curMonth) {
      if (curMonth !== null) monthGroups.push({ start: runStart, len: runLen, label: fmtMonth(days[runStart]), year: days[runStart].getFullYear() });
      curMonth = key; runStart = i; runLen = 1;
    } else { runLen++; }
  });
  monthGroups.push({ start: runStart, len: runLen, label: fmtMonth(days[runStart]), year: days[runStart].getFullYear() });

  const todayCol = daysBetween(start, today);

  return (
    <Reveal className="pn-gantt">
      <div className="pn-gantt-scroll">
        <div className="pn-gantt-grid" style={{ gridTemplateColumns: `280px repeat(${totalDays}, ${dayW}px)` }}>
          {/* Months */}
          <div className="pn-gantt-corner top"></div>
          {monthGroups.map((g, i) => (
            <div key={'m'+i} className="pn-gantt-month" style={{ gridColumn: `${g.start + 2} / span ${g.len}` }}>
              <span>{g.label}</span><span className="pn-gantt-year">{g.year}</span>
            </div>
          ))}
          {/* Days */}
          <div className="pn-gantt-corner sub">
            <div className="eyebrow">Objetivo</div>
          </div>
          {days.map((d, i) => {
            const isToday = d.getTime() === today.getTime();
            const isWeekend = d.getDay() === 0 || d.getDay() === 6;
            return (
              <div key={'d'+i} className={`pn-gantt-day ${isToday?'today':''} ${isWeekend?'weekend':''}`}>
                <span className="pn-gantt-day-num">{d.getDate()}</span>
                <span className="pn-gantt-day-dow">{['D','L','M','M','J','V','S'][d.getDay()]}</span>
              </div>
            );
          })}

          {/* Rows */}
          {objetivos.map((o, idx) => {
            const s = parseDate(o.fecha_inicio);
            const e = parseDate(o.fecha_fin);
            const startCol = daysBetween(start, s);
            const span = daysBetween(s, e) + 1;
            const color = COLORS[o.color] || COLORS.cobre;
            // Fila explícita: la fila 1 son los meses, la 2 los días,
            // la 3 + idx es el objetivo idx. Sin esto la barra cae a la
            // siguiente fila implícita y queda desalineada del label.
            const row = 3 + idx;
            return (
              <React.Fragment key={o.id}>
                <div className="pn-gantt-label" style={{ gridRow: row }}>
                  <label className="pn-check">
                    <input type="checkbox" checked={!!o.hecho} onChange={() => onToggle(o)} />
                    <span className="pn-check-box"></span>
                  </label>
                  <button className="pn-gantt-title" onClick={() => onEdit(o)}>
                    <span className={`pn-dot dot-${o.color}`}></span>
                    <span className={o.hecho ? 'pn-strike' : ''}>{o.titulo}</span>
                  </button>
                </div>
                {days.map((d, i) => {
                  const isToday = d.getTime() === today.getTime();
                  const isWeekend = d.getDay() === 0 || d.getDay() === 6;
                  return <div key={`c${o.id}_${i}`} className={`pn-gantt-cell ${isToday?'today':''} ${isWeekend?'weekend':''}`} style={{ gridRow: row, gridColumn: i + 2 }}></div>;
                })}
                <div
                  className={`pn-gantt-bar ${o.hecho ? 'done' : ''}`}
                  style={{
                    gridRow: row,
                    gridColumn: `${startCol + 2} / span ${span}`,
                    background: o.hecho ? color.soft : `linear-gradient(135deg, ${color.bg} 0%, ${color.bg} 60%, rgba(0,0,0,.18) 100%)`,
                    borderColor: color.edge,
                    color: color.txt,
                  }}
                  onClick={() => onEdit(o)}
                  title={`${o.titulo} · ${o.fecha_inicio} → ${o.fecha_fin}`}
                >
                  <span className="pn-bar-lbl">{o.titulo}</span>
                  {o.hecho && <i data-lucide="check" style={{flexShrink:0}}></i>}
                </div>
              </React.Fragment>
            );
          })}

          {todayCol >= 0 && todayCol < totalDays && (
            <div className="pn-gantt-today-line" style={{
              gridColumn: `${todayCol + 2}`,
              gridRow: `3 / span ${objetivos.length}`,
            }}></div>
          )}
        </div>
      </div>
      <div className="pn-gantt-legend">
        <span><span className="pn-legend-dot today"></span>Hoy</span>
        <span><span className="pn-legend-dot weekend"></span>Fin de semana</span>
        <span><span className="pn-legend-dot done"></span>Completado</span>
      </div>
    </Reveal>
  );
}

// ============================================================
// Checklist
// ============================================================
function ChecklistView({ objetivos, onToggle, onEdit, onDelete }) {
  const pendientes = objetivos.filter(o => !o.hecho);
  const completados = objetivos.filter(o => o.hecho);
  return (
    <div className="pn-kanban">
      <ChecklistColumn variant="pendientes" title="Pendientes"  items={pendientes}  onToggle={onToggle} onEdit={onEdit} onDelete={onDelete} />
      <ChecklistColumn variant="completados" title="Completados" items={completados} onToggle={onToggle} onEdit={onEdit} onDelete={onDelete} done />
    </div>
  );
}

function ChecklistColumn({ variant, title, items, onToggle, onEdit, onDelete, done }) {
  return (
    <Reveal className={`pn-col pn-col-${variant}`}>
      <div className="pn-col-h">
        <h3 className="pn-col-title">{title}</h3>
        <span className="pn-col-count">{items.length}</span>
      </div>
      {items.length === 0 ? (
        <div className="pn-col-empty">
          <p>{done ? 'Aún no hay objetivos cerrados.' : 'Sin pendientes — buen ritmo.'}</p>
        </div>
      ) : (
        <ul className="pn-col-list">
          {items.map(o => {
            const s = parseDate(o.fecha_inicio), e = parseDate(o.fecha_fin);
            const range = s.toLocaleDateString('es-CL',{day:'2-digit',month:'short'}) + ' → ' + e.toLocaleDateString('es-CL',{day:'2-digit',month:'short'});
            const today = new Date(); today.setHours(0,0,0,0);
            const diff = (e - today) / (1000*60*60*24);
            const urgente = !done && diff >= 0 && diff <= 3;
            const vencido = !done && diff < 0;
            const totalDays = daysBetween(s, e) + 1;
            return (
              <li key={o.id} className={`pn-card ${done?'done':''} ${urgente?'urgent':''} ${vencido?'late':''}`}>
                <span className={`pn-card-stripe stripe-${o.color}`}></span>
                <div className="pn-card-top">
                  <label className="pn-check">
                    <input type="checkbox" checked={!!o.hecho} onChange={() => onToggle(o)} />
                    <span className="pn-check-box"></span>
                  </label>
                  <div className="pn-card-body" onClick={() => onEdit(o)}>
                    <h4 className={`pn-card-title ${done?'pn-strike':''}`}>{o.titulo}</h4>
                    {o.descripcion && <p className="pn-card-desc">{o.descripcion}</p>}
                  </div>
                  <div className="pn-card-actions">
                    <button className="pn-icon-btn" onClick={() => onEdit(o)}><i data-lucide="pencil"></i></button>
                    <button className="pn-icon-btn danger" onClick={() => onDelete(o)}><i data-lucide="trash-2"></i></button>
                  </div>
                </div>
                <div className="pn-card-foot">
                  <span className="pn-card-range"><i data-lucide="calendar"></i> {range}</span>
                  <span className="pn-card-len">{totalDays}d</span>
                  {urgente && <span className="pn-tag urgent">Urgente</span>}
                  {vencido && <span className="pn-tag late">Vencido</span>}
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </Reveal>
  );
}

// ============================================================
// Form modal
// ============================================================
function ObjetivoForm({ objetivo, onClose, onSaved, onDelete }) {
  const supa = window.supabaseClient;
  const isNew = !objetivo.id;
  const today = isoDate(new Date());
  const [f, setF] = React.useState({
    titulo:       objetivo.titulo       || '',
    descripcion:  objetivo.descripcion  || '',
    fecha_inicio: objetivo.fecha_inicio || today,
    fecha_fin:    objetivo.fecha_fin    || today,
    color:        objetivo.color        || 'cobre',
    hecho:        !!objetivo.hecho,
  });
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState('');
  const initialRef = React.useRef(null);
  if (initialRef.current === null) initialRef.current = JSON.stringify(f);
  const isDirty = JSON.stringify(f) !== initialRef.current;
  const requestClose = () => {
    if (isDirty && !confirm('Tienes cambios sin guardar. ¿Cerrar de todos modos?')) return;
    onClose();
  };
  const upd = (k, v) => setF(s => ({ ...s, [k]: v }));

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, []);

  const save = async (e) => {
    e.preventDefault(); setErr(''); setSaving(true);
    if (f.fecha_fin < f.fecha_inicio) {
      setErr('La fecha de fin no puede ser anterior al inicio.');
      setSaving(false); return;
    }
    const payload = {
      titulo: f.titulo.trim(),
      descripcion: f.descripcion.trim() || null,
      fecha_inicio: f.fecha_inicio,
      fecha_fin: f.fecha_fin,
      color: f.color,
      hecho: !!f.hecho,
    };
    const op = isNew
      ? supa.from('objetivos').insert(payload)
      : supa.from('objetivos').update(payload).eq('id', objetivo.id);
    const { error } = await op;
    if (error) { setErr(error.message); setSaving(false); return; }
    onSaved();
  };

  return (
    <div className="pn-modal">
      <div className="pn-modal-card">
        <header className="pn-modal-head">
          <div>
            <div className="eyebrow">{isNew ? 'Nuevo' : 'Editar'}</div>
            <h3>{isNew ? 'Objetivo nuevo' : objetivo.titulo}</h3>
          </div>
          <button className="pn-modal-close" onClick={requestClose} aria-label="Cerrar">×</button>
        </header>
        <form onSubmit={save} className="pn-modal-form">
          <label className="full">
            <span>Título</span>
            <input value={f.titulo} onChange={e=>upd('titulo', e.target.value)} required autoFocus placeholder="Lanzar catálogo Q3" />
          </label>
          <label className="full">
            <span>Descripción</span>
            <textarea rows="3" value={f.descripcion} onChange={e=>upd('descripcion', e.target.value)} placeholder="Detalle opcional…" />
          </label>
          <label>
            <span>Inicio</span>
            <input type="date" value={f.fecha_inicio} onChange={e=>upd('fecha_inicio', e.target.value)} required />
          </label>
          <label>
            <span>Fin</span>
            <input type="date" value={f.fecha_fin} onChange={e=>upd('fecha_fin', e.target.value)} required />
          </label>
          <label className="full">
            <span>Color</span>
            <div className="pn-color-row">
              {COLOR_OPTS.map(c => (
                <button type="button" key={c}
                  className={`pn-color-chip dot-${c} ${f.color===c?'sel':''}`}
                  onClick={()=>upd('color', c)} aria-label={c}>
                </button>
              ))}
            </div>
          </label>
          <label className="full pn-check-row">
            <input type="checkbox" checked={f.hecho} onChange={e=>upd('hecho', e.target.checked)} />
            <span>Marcar como completado</span>
          </label>
          {err && <div className="pn-err">{err}</div>}
          <div className="pn-modal-actions">
            {onDelete && <button type="button" className="btn ghost-light danger-text" onClick={onDelete} disabled={saving}><i data-lucide="trash-2"></i> Eliminar</button>}
            <div style={{flex:1}}></div>
            <button type="button" className="btn ghost-light" onClick={requestClose}>Cancelar</button>
            <button type="submit" className="btn primary" disabled={saving}>
              {saving ? 'Guardando…' : (isNew ? 'Crear objetivo' : 'Guardar')}
              <i data-lucide="arrow-right" className="arrow"></i>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

window.PanelApp = PanelApp;