/* ===== Module ouvert : barre retour + onglets ===== */
  .modtop{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
  .back{width:42px;height:42px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-sm);
    border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .back svg{width:20px;height:20px;stroke:var(--ink);}
  .modtitle{font-size:20px;font-weight:800;letter-spacing:-.3px;}

  .tabs{display:flex;gap:8px;background:var(--card);padding:5px;border-radius:18px;box-shadow:var(--shadow-sm);margin-bottom:16px;}
  .tab{flex:1;text-align:center;padding:10px;border-radius:14px;font-size:13.5px;font-weight:700;
    color:var(--muted);cursor:pointer;transition:.15s;border:none;background:transparent;}
  .tab.active{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);}

  /* ===== Matrice ===== */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
  @media(max-width:600px){.grid{grid-template-columns:1fr;} .modules{grid-template-columns:1fr 1fr;}}
  .quad{background:var(--card);border-radius:24px;padding:16px 15px 14px;box-shadow:var(--shadow);
    display:flex;flex-direction:column;min-height:160px;border:2px solid transparent;transition:.2s;}
  .quad.drag-over{border-color:var(--accent);transform:scale(1.01);}
  .qhead{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
  .qicon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .qicon svg{width:21px;height:21px;}
  .ic-q1{background:var(--q1bg);} .ic-q2{background:var(--q2bg);}
  .ic-q3{background:var(--q3bg);} .ic-q4{background:var(--q4bg);}
  .qtitle{font-size:13.5px;font-weight:700;line-height:1.2;}
  .qsub{font-size:11px;color:var(--muted);font-weight:500;margin-top:2px;}
  .qcount{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);
    background:var(--bg);border-radius:20px;padding:3px 9px;min-width:26px;text-align:center;}
  .tasks{display:flex;flex-direction:column;gap:8px;flex:1;}
  .task{display:flex;align-items:flex-start;gap:10px;background:var(--bg);border-radius:15px;
    padding:11px 12px;font-size:14px;line-height:1.35;cursor:grab;transition:.15s;border:1.5px solid transparent;}
  .task:hover{border-color:var(--line);} .task:active{cursor:grabbing;} .task.dragging{opacity:.35;}
  .check{flex-shrink:0;width:22px;height:22px;border-radius:8px;border:2px solid #d8d0ee;margin-top:1px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;background:var(--card);}
  .check:hover{border-color:var(--accent);}
  .task-text{flex:1;word-break:break-word;font-weight:500;}
  .move{flex-shrink:0;color:var(--muted);cursor:pointer;padding:3px;border-radius:8px;font-size:15px;line-height:1;}
  .move:hover{color:var(--accent);}
  .add{display:flex;gap:8px;margin-top:12px;}
  .add input{flex:1;background:var(--bg);border:1.5px solid transparent;border-radius:14px;
    padding:11px 13px;color:var(--ink);font-size:13px;font-weight:500;}
  .add input::placeholder{color:var(--muted);}
  .add input:focus{outline:none;border-color:var(--accent);background:var(--card);}
  .add button{background:var(--accent);border:none;border-radius:14px;color:#fff;font-weight:700;
    width:42px;font-size:22px;cursor:pointer;box-shadow:var(--shadow-sm);transition:.15s;}
  .add button:active{transform:scale(.92);}
  .empty{color:var(--muted);font-size:12px;text-align:center;padding:18px 0;font-weight:500;}

  .matfoot{display:flex;align-items:center;justify-content:space-between;
    background:var(--card);border-radius:20px;padding:13px 18px;margin-top:14px;box-shadow:var(--shadow-sm);}
  .stat{font-size:13px;color:var(--muted);font-weight:600;}
  .stat b{color:var(--ink);font-size:17px;}
  .done-btn{background:var(--accent-soft);border:none;color:var(--accent);border-radius:13px;
    padding:9px 15px;font-size:12.5px;font-weight:700;cursor:pointer;}
  .done-btn:active{transform:scale(.95);}

  .sheet{position:fixed;inset:0;background:rgba(43,38,64,.35);backdrop-filter:blur(2px);
    display:none;align-items:flex-end;z-index:50;}
  .sheet.open{display:flex;}
  .sheet-inner{background:var(--card);width:100%;max-width:720px;margin:0 auto;border-radius:28px 28px 0 0;
    padding:10px 16px 30px;box-shadow:0 -10px 40px rgba(90,70,170,.2);}
  .sheet-grab{width:40px;height:5px;background:var(--line);border-radius:10px;margin:8px auto 16px;}
  .sheet h3{font-size:15px;margin-bottom:14px;font-weight:700;}
  .sheet-opt{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;margin-bottom:9px;
    font-size:14px;font-weight:600;cursor:pointer;background:var(--bg);transition:.15s;}
  .sheet-opt:active{transform:scale(.98);}
  .sheet-opt .qicon{width:36px;height:36px;border-radius:11px;}
  .sheet-opt .qicon svg{width:18px;height:18px;}
</style>
</head>
<body>
<div class="app">
  <div class="top">
    <div>
      <div class="hello">Bonjour Camille ✨</div>
      <h1 id="topTitle">Mon <span>Orga</span></h1>
    </div>
    <div class="sync"><span class="dot" id="dot"></span><span id="syncTxt">…</span></div>
  </div>

  <!-- VUE ACCUEIL -->
  <div class="view active" id="view-home">
    <div class="modules" id="modules"></div>
  </div>

  <!-- VUE MATRICE -->
  <div class="view" id="view-matrice">
    <div class="modtop">
      <button class="back" onclick="goHome()"><svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></button>
      <div class="modtitle">Matrice</div>
    </div>
    <div class="tabs">
      <button class="tab active" data-ctx="maison" onclick="setContexte('maison')">🏠 Maison</button>
      <button class="tab" data-ctx="boulot" onclick="setContexte('boulot')">💼 Boulot</button>
    </div>
    <div class="grid" id="grid"></div>
    <div class="matfoot">
      <span class="stat"><b id="totalCount">0</b> tâches actives</span>
      <button class="done-btn" id="showDone">Terminées</button>
    </div>
  </div>
</div>

<div class="sheet" id="sheet">
  <div class="sheet-inner">
    <div class="sheet-grab"></div>
    <h3>Déplacer vers…</h3>
    <div id="sheetOpts"></div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
const SB_URL = "https://unjzusvzfallnncatarw.supabase.co";
const SB_KEY = "sb_publishable_5fgVbf9E8EKHSbnTuytYXw_kjGIJxQY";
const db = supabase.createClient(SB_URL, SB_KEY);

/* ===== Modules de la page d'accueil ===== */
const MODULES = [
  {id:"matrice", titre:"Matrice", desc:"Tes priorités, maison & boulot",
   bg:"var(--accent-soft)", actif:true,
   icon:'<svg viewBox="0 0 24 24" fill="none" stroke="#8b6ff0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M12 3v18M3 12h18"/></svg>'},
  {id:"soon1", titre:"À venir", desc:"Bientôt un nouveau module",
   bg:"var(--q2bg)", actif:false,
   icon:'<svg viewBox="0 0 24 24" fill="none" stroke="#5cc6ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>'},
];

const home = document.getElementById("modules");
MODULES.forEach(m=>{
  const el = document.createElement("div");
  el.className = "module" + (m.actif?"":" soon");
  el.innerHTML = `
    ${m.actif?"":'<span class="m-badge">bientôt</span>'}
    <div class="m-icon" style="background:${m.bg}">${m.icon}</div>
    <div>
      <div class="m-title">${m.titre}</div>
      <div class="m-desc">${m.desc}</div>
    </div>`;
  if(m.actif) el.onclick = ()=> ouvrirModule(m.id);
  home.appendChild(el);
});

/* ===== Navigation entre vues ===== */
function showView(id){
  document.querySelectorAll(".view").forEach(v=> v.classList.remove("active"));
  document.getElementById("view-"+id).classList.add("active");
  window.scrollTo(0,0);
}
function ouvrirModule(id){ showView(id); if(id==="matrice") render(); }
function goHome(){ showView("home"); }

/* ===== MATRICE ===== */
const ICONS = {
  q1:'<svg viewBox="0 0 24 24" fill="none" stroke="#ff7a8a" stroke-width="2.2" stroke-linecap="round"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg>',
  q2:'<svg viewBox="0 0 24 24" fill="none" stroke="#5cc6ff" stroke-width="2.2" stroke-linecap="round"><rect x="3" y="4" width="18" height="18" rx="3"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>',
  q3:'<svg viewBox="0 0 24 24" fill="none" stroke="#ffb24d" stroke-width="2.2" stroke-linecap="round"><path d="M16 11a4 4 0 1 0-4-4M2 21a8 8 0 0 1 10.4-7.6"/><circle cx="17" cy="17" r="4"/><path d="M17 15.5V17l1 1"/></svg>',
  q4:'<svg viewBox="0 0 24 24" fill="none" stroke="#b6aee0" stroke-width="2.2" stroke-linecap="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>'
};
const QUADS = [
  {id:"q1", titre:"Urgent & Important", sous:"À faire maintenant", ic:"ic-q1"},
  {id:"q2", titre:"Important",          sous:"À planifier",        ic:"ic-q2"},
  {id:"q3", titre:"Urgent seulement",   sous:"À déléguer",         ic:"ic-q3"},
  {id:"q4", titre:"Ni l'un ni l'autre", sous:"À éliminer",         ic:"ic-q4"},
];

let taches = [];
let showDone = false;
let contexte = "maison";
let moveTargetId = null;

const dot = document.getElementById("dot");
const syncTxt = document.getElementById("syncTxt");
function setSync(s,t){ dot.className="dot "+s; syncTxt.textContent=t; }

const grid = document.getElementById("grid");
QUADS.forEach(q=>{
  const el = document.createElement("div");
  el.className="quad"; el.dataset.quad=q.id;
  el.innerHTML = `
    <div class="qhead">
      <div class="qicon ${q.ic}">${ICONS[q.id]}</div>
      <div><div class="qtitle">${q.titre}</div><div class="qsub">${q.sous}</div></div>
      <span class="qcount" data-count="${q.id}">0</span>
    </div>
    <div class="tasks" data-tasks="${q.id}"></div>
    <div class="add">
      <input type="text" placeholder="Nouvelle tâche…" data-input="${q.id}">
      <button data-addbtn="${q.id}">+</button>
    </div>`;
  grid.appendChild(el);
  const input = el.querySelector(`[data-input="${q.id}"]`);
  const doAdd = ()=>{ const v=input.value.trim(); if(v){ ajouter(v,q.id); input.value=""; } };
  el.querySelector(`[data-addbtn="${q.id}"]`).onclick = doAdd;
  input.addEventListener("keydown", e=>{ if(e.key==="Enter") doAdd(); });
  el.addEventListener("dragover", e=>{ e.preventDefault(); el.classList.add("drag-over"); });
  el.addEventListener("dragleave", ()=> el.classList.remove("drag-over"));
  el.addEventListener("drop", e=>{ e.preventDefault(); el.classList.remove("drag-over");
    const id=e.dataTransfer.getData("text/plain"); if(id) deplacer(id,q.id); });
});

function setContexte(c){
  contexte = c;
  document.querySelectorAll(".tab").forEach(t=> t.classList.toggle("active", t.dataset.ctx===c));
  showDone = false;
  render();
}

function render(){
  let total = 0;
  QUADS.forEach(q=>{
    const cont = document.querySelector(`[data-tasks="${q.id}"]`);
    const countEl = document.querySelector(`[data-count="${q.id}"]`);
    cont.innerHTML = "";
    const list = taches
      .filter(t=> t.quadrant===q.id && t.contexte===contexte && (showDone?t.faite:!t.faite))
      .sort((a,b)=> a.position-b.position);
    countEl.textContent = list.length;
    if(!showDone) total += list.length;
    if(list.length===0){
      cont.innerHTML = `<div class="empty">${showDone?"Rien de terminé":"C'est vide ici"}</div>`;
      return;
    }
    list.forEach(t=>{
      const row = document.createElement("div");
      row.className="task"; row.draggable=true; row.dataset.id=t.id;
      row.innerHTML = `
        <div class="check" style="${t.faite?'background:var(--accent);border-color:var(--accent)':''}">
          ${t.faite?'<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 7"/></svg>':''}
        </div>
        <div class="task-text">${escapeHtml(t.texte)}</div>
        <div class="move">⇄</div>`;
      row.querySelector(".check").onclick = ()=> cocher(t.id,!t.faite);
      row.querySelector(".move").onclick = ()=> ouvrirSheet(t.id);
      row.addEventListener("dragstart", e=>{ e.dataTransfer.setData("text/plain",t.id); row.classList.add("dragging"); });
      row.addEventListener("dragend", ()=> row.classList.remove("dragging"));
      cont.appendChild(row);
    });
  });
  document.getElementById("totalCount").textContent = total;
  document.getElementById("showDone").textContent = showDone ? "Actives" : "Terminées";
}
function escapeHtml(s){ return s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c])); }

async function charger(){
  setSync("busy","…");
  const {data,error} = await db.from("eisenhower_taches").select("*");
  if(error){ setSync("err","hors ligne"); console.error(error); return; }
  taches = data; render(); setSync("ok","à jour");
}
async function ajouter(texte,quadrant){
  const pos = Date.now();
  const tmp = {id:"tmp-"+pos,texte,quadrant,contexte,faite:false,position:pos};
  taches.push(tmp); render(); setSync("busy","…");
  const {data,error} = await db.from("eisenhower_taches")
    .insert({texte,quadrant,contexte,position:pos}).select().single();
  if(error){ setSync("err","erreur"); return; }
  Object.assign(tmp,data); setSync("ok","à jour");
}
async function cocher(id,faite){
  const t=taches.find(x=>x.id===id); if(t){ t.faite=faite; render(); }
  setSync("busy","…");
  const {error}=await db.from("eisenhower_taches").update({faite}).eq("id",id);
  setSync(error?"err":"ok",error?"erreur":"à jour");
}
async function deplacer(id,quadrant){
  const t=taches.find(x=>x.id===id); if(t){ t.quadrant=quadrant; render(); }
  setSync("busy","…");
  const {error}=await db.from("eisenhower_taches").update({quadrant}).eq("id",id);
  setSync(error?"err":"ok",error?"erreur":"à jour");
}

const sheet=document.getElementById("sheet");
const sheetOpts=document.getElementById("sheetOpts");
function ouvrirSheet(id){
  moveTargetId=id;
  const t=taches.find(x=>x.id===id);
  sheetOpts.innerHTML="";
  QUADS.forEach(q=>{
    const o=document.createElement("div");
    o.className="sheet-opt";
    o.innerHTML=`<div class="qicon ${q.ic}">${ICONS[q.id]}</div> ${q.titre} ${t.quadrant===q.id?'✓':''}`;
    o.onclick=()=>{ deplacer(moveTargetId,q.id); fermerSheet(); };
    sheetOpts.appendChild(o);
  });
  sheet.classList.add("open");
}
function fermerSheet(){ sheet.classList.remove("open"); moveTargetId=null; }
sheet.addEventListener("click", e=>{ if(e.target===sheet) fermerSheet(); });
document.getElementById("showDone").onclick=()=>{ showDone=!showDone; render(); };

db.channel("matrice").on("postgres_changes",{event:"*",schema:"public",table:"eisenhower_taches"},charger).subscribe();
charger();
</script>
</body>
</html>