<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>may-not.com(e) – Verfügbarkeitskalender</title>

<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f4f4f4;
}

header {
  background: #4a90e2;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 24px;
}

main {
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

.hidden { display: none; }

label { display: block; margin-top: 10px; }

input, select {
  padding: 6px;
  margin-top: 5px;
  width: 240px;
}

button {
  margin-top: 20px;
  padding: 10px 24px;
  background: #4a90e2;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover { background: #357ABD; }

#calendar {
  margin-top: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

#calendarContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.month {
  min-height: 320px; /* alle Monate gleich hoch */
}


table {
  border-collapse: collapse;
  width: 100%;
}

caption {
  font-weight: bold;
  margin-bottom: 5px;
}

th, td {
  border: 1px solid #ccc;
  padding: 6px;
  text-align: center;
}

th { background: #f0f0f0; }

td.available {
  cursor: pointer;
  user-select: none;
}

td.holiday {
  background:
    repeating-linear-gradient(
      45deg,
      #f0f0f0,
      #f0f0f0 4px,
      #e0e0e0 4px,
      #e0e0e0 8px
    );
}

#legend {
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

#calendarHint {
  font-weight: bold;
  color: #c00;
  text-align: center;
  margin: 10px 0 20px 0;
  font-size: 16px;
}

</style>
</head>

<body>
<header>may-not.com(e)</header>

<main>

<form id="createForm">
  <h2>Neuen Kalender erstellen</h2>
  
  <label>Kalendertitel
    <input type="text" id="title" placeholder="z.B. Vatertag" required>
  </label>


  <label>Email (Ersteller)
    <input type="email" id="creator" required>
  </label>

  <label>Teilnehmer (Komma getrennt)
    <input type="text" id="participants">
  </label>

  <label>Jahr
    <input type="number" id="year">
  </label>

  <label>Startmonat
    <select id="startMonth"></select>
  </label>

  <label>Endmonat
    <select id="endMonth"></select>
  </label>

  <label>Abstimmung offen bis
    <input type="date" id="deadline">
  </label>

  <button type="submit">Kalender erstellen</button>
</form>

<div id="calendar" class="hidden">
  <h2 id="calendarTitle"></h2>
  
  <!-- Hinweis über allen Monaten -->
  <p id="calendarHint">
    Markiere alle Tage, an denen du <strong>NICHT</strong> kannst!
  </p>

  <p id="calendarInfo"></p>

  <div id="legend"></div>
  <div id="calendarContainer"></div>

  <button id="saveBtn">Termine gespeichert ✔</button>
</div>


</main>

<script>
const months = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
const holidays = [{d:1,m:0},{d:1,m:4},{d:25,m:11},{d:26,m:11}];

let calendarId, userEmail;
let calendarData = null;

// Drag-State
let mouseDown = false;
let dragVisited = new Set();

const today = new Date();
year.value = today.getFullYear();

months.forEach((m,i)=>{
  startMonth.add(new Option(m,i+1));
  endMonth.add(new Option(m,i+1));
});

startMonth.value = today.getMonth()+1;
endMonth.value = today.getMonth()+1;

// ---------- Farben ----------
function colorFor(email){

  const people = [calendarData.creator, ...calendarData.participants];

  const index = people.indexOf(email);
  const total = people.length;

  const hue = (index * 360 / total) % 360;

  return `hsl(${hue}, 70%, 55%)`;
}



// ---------- Create ----------
createForm.addEventListener('submit', async e=>{
  e.preventDefault();

  const creatorEmail = creator.value;
  const participantList = participants.value
    .split(',')
    .map(s => s.trim())
    .filter(Boolean);

  const res = await fetch('/api/calendar/create',{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
	  title: title.value,
      creator: creatorEmail,
      participants: participantList,
      year: +year.value,
      startMonth: +startMonth.value,
      endMonth: +endMonth.value,
      deadline: deadline.value
    })
  });

  const data = await res.json();
  if(data.id){
    location.href = `/?id=${data.id}&user=${encodeURIComponent(creatorEmail)}`;
  }
});

// ---------- Load ----------
document.addEventListener('DOMContentLoaded', async ()=>{
  const p=new URLSearchParams(location.search);
  calendarId=p.get('id');
  userEmail=p.get('user');

  if(!calendarId||!userEmail) return;

  createForm.classList.add('hidden');
  calendar.classList.remove('hidden');

  const res = await fetch(`/api/calendar/${calendarId}`);
  if(!res.ok) return alert('Kalender nicht gefunden');

  calendarData = await res.json();

  calendarTitle.textContent = calendarData.title;
  calendarTitle.title = `Erstellt von ${calendarData.creator}`;
  calendarInfo.textContent =
    `Teilnehmer: ${calendarData.participants.join(', ')} | Abstimmung offen bis: ${formatDateDE(calendarData.deadline)}`;

  renderLegend();
  renderCalendar();
});

// ---------- Legend ----------
function renderLegend(){
  legend.innerHTML='';
  calendarData.participants.concat(calendarData.creator).forEach(email=>{
    const div=document.createElement('div');
    div.className='legend-item';
    div.innerHTML=`<div class="legend-color" style="background:${colorFor(email)}"></div>${email}`;
    legend.appendChild(div);
  });
}

// ---------- Calendar ----------
function renderCalendar(){
  calendarContainer.innerHTML='';
  const entries = calendarData.entries || {};

  for(let m=calendarData.startMonth-1;m<=calendarData.endMonth-1;m++){
    const div=document.createElement('div');
    div.className='month';
    const table=document.createElement('table');

    table.innerHTML=`<caption>${months[m]} ${calendarData.year}</caption>
    <tr><th>Mo</th><th>Di</th><th>Mi</th><th>Do</th><th>Fr</th><th>Sa</th><th>So</th></tr>`;

    let d=new Date(calendarData.year,m,1);
    let row=document.createElement('tr');
    let off=(d.getDay()+6)%7;
    for(let i=0;i<off;i++) row.appendChild(document.createElement('td'));

    while(d.getMonth()===m){
      const td=document.createElement('td');
      td.textContent=d.getDate();
      td.className='available';

      const iso=d.toISOString().slice(0,10);

      if(holidays.some(h=>h.d===d.getDate()&&h.m===d.getMonth()))
        td.classList.add('holiday');
		
      const users = Object.keys(entries).filter(u => entries[u]?.includes(iso));
      
      if(users.length){
      
        const bar = document.createElement('div');
        bar.style.display = 'flex';
        bar.style.position = 'absolute';
        bar.style.bottom = '0';
        bar.style.left = '0';
        bar.style.width = '100%';
        bar.style.height = '10px';
      
        users.forEach(u => {
          const c = document.createElement('div');
          c.style.flex = '1';
          c.style.background = colorFor(u);
          bar.appendChild(c);
        });
      
        td.style.position = 'relative';
        td.appendChild(bar);
      }


      td.addEventListener('mousedown', e=>{
        e.preventDefault();
        dragVisited.clear();
        mouseDown=true;
        toggleLocal(iso);
      });

      td.addEventListener('mouseenter', ()=>{
        if(mouseDown && !dragVisited.has(iso)){
          toggleLocal(iso);
        }
      });

      row.appendChild(td);
      if((d.getDay()+6)%7===6){
        table.appendChild(row);
        row=document.createElement('tr');
      }
      d.setDate(d.getDate()+1);
    }

    table.appendChild(row);
    div.appendChild(table);
    calendarContainer.appendChild(div);
  }
}

// ---------- Interaction ----------
document.addEventListener('mouseup', ()=>{
  mouseDown=false;
  dragVisited.clear();
});

function toggleLocal(date){
  dragVisited.add(date);

  if(!calendarData.entries[userEmail]){
    calendarData.entries[userEmail]=[];
  }

  const arr=calendarData.entries[userEmail];
  const add=!arr.includes(date);

  if(add) arr.push(date);
  else calendarData.entries[userEmail]=arr.filter(d=>d!==date);

  renderCalendar();
  syncServer(date, add?'add':'remove');
}

async function syncServer(date, action){
  try{
    await fetch(`/api/calendar/${calendarId}/entry`,{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({user:userEmail,date,action})
    });
  }catch(e){
    console.error('Sync fehlgeschlagen',e);
  }
}

// ---------- Utils ----------
function formatDateDE(d){
  if(!d) return 'keine';
  const dt=new Date(d);
  return `${dt.getDate()}. ${months[dt.getMonth()]} ${dt.getFullYear()}`;
}
</script>
</body>
</html>