const express = require('express');
const multer = require('multer');
const sharp = require('sharp');
const path = require('path');
const fs = require('fs');
const { exec } = require('child_process');
const os = require('os');
const cors = require('cors');

const app = express();
const PORT = 3001;

// CORS für den öffentlichen Gästebuch-Endpunkt
app.use(cors({
  origin: function(origin, callback) {
    callback(null, true);
  },
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// --- BASIC AUTH CONFIG ---
const ADMIN_USER = 'admin';
const ADMIN_PASS = 'emy2026'; // Empfehlung: Ändern!

const IMAGES_DIR = path.join(__dirname, 'static/gallery/images');
const HERO_DIR = path.join(__dirname, 'static/hero');
const UEBERMICH_IMG_DIR = path.join(__dirname, 'static/uebermich');
const DATA_FILE = path.join(__dirname, 'data/gallery.json');
const HOMEPAGE_FILE = path.join(__dirname, 'data/homepage.json');
const CATEGORIES_FILE = path.join(__dirname, 'data/categories.json');
const UEBERMICH_FILE = path.join(__dirname, 'data/uebermich.json');
const ERFOLGE_FILE = path.join(__dirname, 'data/erfolge.json');
const ERFOLGE_IMG_DIR = path.join(__dirname, 'static/erfolge-img');
const GALERIE_PAGE_FILE = path.join(__dirname, 'data/galerie.json');
const GAESTEBUCH_FILE = path.join(__dirname, 'data/gaestebuch.json');
const GLOBAL_FILE = path.join(__dirname, 'data/global.json');
const GAESTEBUCH_IMG_DIR = path.join(__dirname, 'static/gaestebuch-img');
const ERFOLGE_INTERACTIONS_FILE = path.join(__dirname, 'data/erfolge_interactions.json');

if (!fs.existsSync(UEBERMICH_IMG_DIR)) fs.mkdirSync(UEBERMICH_IMG_DIR, { recursive: true });
if (!fs.existsSync(HERO_DIR)) fs.mkdirSync(HERO_DIR, { recursive: true });
if (!fs.existsSync(ERFOLGE_IMG_DIR)) fs.mkdirSync(ERFOLGE_IMG_DIR, { recursive: true });
if (!fs.existsSync(GAESTEBUCH_IMG_DIR)) fs.mkdirSync(GAESTEBUCH_IMG_DIR, { recursive: true });

// Basic Auth Middleware
app.use((req, res, next) => {
  // Öffentliche Pfade (Bilder & Gast-API) ausnehmen
  const publicPaths = [
    '/api/gaestebuch/public',
    '/api/erfolge/interactions',
    '/images/',
    '/hero/',
    '/uebermich-img/',
    '/erfolge-img/',
    '/gaestebuch-img/'
  ];

  if (publicPaths.some(p => req.path.startsWith(p))) {
    return next();
  }

  const auth = { login: ADMIN_USER, password: ADMIN_PASS };
  const b64auth = (req.headers.authorization || '').split(' ')[1] || '';
  const [login, password] = Buffer.from(b64auth, 'base64').toString().split(':');

  if (login && password && login === auth.login && password === auth.password) {
    return next();
  }

  res.set('WWW-Authenticate', 'Basic realm="MiyaKarate Admin"');
  res.status(401).send('Authentication required.');
});

app.use(express.json());
app.use('/images', express.static(IMAGES_DIR));

// Multer: temporärer Speicher, dann sharp übernimmt
const upload = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 100 * 1024 * 1024 }, // 100MB limit für Videos
  fileFilter: (req, file, cb) => {
    if (file.mimetype.startsWith('image/') || file.mimetype.startsWith('video/')) cb(null, true);
    else cb(new Error('Nur Bilder und Videos erlaubt!'));
  }
});

function readGallery() {
  return JSON.parse(fs.readFileSync(DATA_FILE, 'utf8'));
}
function writeGallery(data) {
  fs.writeFileSync(DATA_FILE, JSON.stringify(data, null, 2));
}

// Upload
app.post('/api/upload', upload.array('photos', 20), async (req, res) => {
  try {
    const gallery = readGallery();
    const added = [];

    for (const file of req.files) {
      const id = Date.now() + '-' + Math.random().toString(36).slice(2, 7);
      const filename = id + '.webp';
      const thumbname = id + '-thumb.webp';

      // Vollbild (max 1200px)
      await sharp(file.buffer)
        .resize(1200, 1200, { fit: 'inside', withoutEnlargement: true })
        .webp({ quality: 85 })
        .toFile(path.join(IMAGES_DIR, filename));

      // Thumbnail (400px)
      await sharp(file.buffer)
        .resize(400, 400, { fit: 'cover' })
        .webp({ quality: 80 })
        .toFile(path.join(IMAGES_DIR, thumbname));

      const photo = {
        id,
        filename,
        thumb: thumbname,
        title: req.body.title || file.originalname.replace(/\.[^.]+$/, ''),
        kategorie: req.body.kategorie || 'Training',
        datum: new Date().toISOString().slice(0, 10)
      };
      gallery.photos.unshift(photo);
      added.push(photo);
    }

    writeGallery(gallery);
    res.json({ ok: true, added });
  } catch (e) {
    res.status(500).json({ ok: false, error: e.message });
  }
});

// Foto-Metadaten updaten
app.put('/api/photo/:id', (req, res) => {
  const gallery = readGallery();
  const photo = gallery.photos.find(p => p.id === req.params.id);
  if (!photo) return res.status(404).json({ ok: false });
  if (req.body.title !== undefined) photo.title = req.body.title;
  if (req.body.kategorie !== undefined) photo.kategorie = req.body.kategorie;
  writeGallery(gallery);
  res.json({ ok: true, photo });
});

// Foto löschen
app.delete('/api/photo/:id', (req, res) => {
  const gallery = readGallery();
  const idx = gallery.photos.findIndex(p => p.id === req.params.id);
  if (idx === -1) return res.status(404).json({ ok: false });
  const [photo] = gallery.photos.splice(idx, 1);
  [photo.filename, photo.thumb].forEach(f => {
    const fp = path.join(IMAGES_DIR, f);
    if (fs.existsSync(fp)) fs.unlinkSync(fp);
  });
  writeGallery(gallery);
  res.json({ ok: true });
});

// Alle Fotos
app.get('/api/photos', (req, res) => {
  res.json(readGallery());
});

// ── Kategorien API ────────────────────────────────────────────
function readCategories() {
  if (!fs.existsSync(CATEGORIES_FILE)) return ['Training', 'Wettkämpfe', 'Gürtelprüfungen'];
  return JSON.parse(fs.readFileSync(CATEGORIES_FILE, 'utf8'));
}
function writeCategories(cats) {
  fs.writeFileSync(CATEGORIES_FILE, JSON.stringify(cats, null, 2));
}

app.get('/api/categories', (req, res) => {
  res.json(readCategories());
});

app.post('/api/categories', (req, res) => {
  const name = (req.body.name || '').trim();
  if (!name) return res.status(400).json({ ok: false, error: 'Name fehlt' });
  const cats = readCategories();
  if (cats.includes(name)) return res.status(409).json({ ok: false, error: 'Existiert bereits' });
  cats.push(name);
  writeCategories(cats);
  res.json({ ok: true, categories: cats });
  rebuildAndDeploy();
});

app.delete('/api/categories/:name', (req, res) => {
  const cats = readCategories().filter(c => c !== req.params.name);
  writeCategories(cats);
  res.json({ ok: true, categories: cats });
  rebuildAndDeploy();
});

// ── Homepage API ──────────────────────────────────────────────
function readHomepage() {
  return JSON.parse(fs.readFileSync(HOMEPAGE_FILE, 'utf8'));
}
function writeHomepage(data) {
  fs.writeFileSync(HOMEPAGE_FILE, JSON.stringify(data, null, 2));
}

app.get('/api/homepage', (req, res) => {
  res.json(readHomepage());
});

function rebuildAndDeploy() {
  const isServer = os.platform() === 'linux';
  let cmd;

  if (isServer) {
    // Auf dem Server: Hugo bauen und lokal nach /var/www/ kopieren
    cmd = `cd ${__dirname} && /usr/local/bin/hugo --minify && cp -r public/* /var/www/emy.bonzeipunk.de/`;
  } else {
    // Lokal: Hugo bauen und per SSH/Rsync auf Server schieben
    const SSH_KEY = '/Users/jessi/.ssh/vpsserver/vpsserver';
    cmd = `cd ${__dirname} && hugo --minify && SSH_ASKPASS_REQUIRE=never ssh-add ${SSH_KEY} <<< "bonzeikiller" 2>/dev/null; rsync -az --delete -e "ssh -o StrictHostKeyChecking=no -i ${SSH_KEY}" ${__dirname}/public/ root@217.160.212.198:/var/www/emy.bonzeipunk.de/`;
  }

  console.log('Starte Rebuild/Deploy...');
  exec(cmd, { shell: '/bin/bash' }, (err, stdout, stderr) => {
    if (err) {
      console.error('Deploy-Fehler:', err.message);
      console.error('Stderr:', stderr);
    } else {
      console.log('✓ Deploy erfolgreich');
      if (stdout) console.log('Stdout:', stdout);
    }
  });
}

app.put('/api/homepage', (req, res) => {
  const hp = readHomepage();
  if (req.body.siteTitle !== undefined) hp.siteTitle = req.body.siteTitle;
  if (req.body.badge !== undefined) hp.hero.badge = req.body.badge;
  if (req.body.description !== undefined) hp.hero.description = req.body.description;
  if (req.body.stats !== undefined) hp.stats = req.body.stats;
  if (req.body.hero_karte !== undefined) hp.hero_karte = req.body.hero_karte;
  if (req.body.pruefung_karte !== undefined) hp.pruefung_karte = req.body.pruefung_karte;
  if (req.body.dojo_karte !== undefined) hp.dojo_karte = req.body.dojo_karte;
  if (req.body.cta !== undefined) hp.cta = req.body.cta;
  writeHomepage(hp);
  res.json({ ok: true });
  rebuildAndDeploy();
});

app.post('/api/homepage/image', upload.single('image'), async (req, res) => {
  try {
    const filename = 'hero.webp';
    await sharp(req.file.buffer)
      .resize(1200, 1200, { fit: 'inside', withoutEnlargement: true })
      .webp({ quality: 88 })
      .toFile(path.join(HERO_DIR, filename));
    const hp = readHomepage();
    hp.hero.image = filename;
    writeHomepage(hp);
    res.json({ ok: true, image: filename });
    rebuildAndDeploy();
  } catch (e) {
    res.status(500).json({ ok: false, error: e.message });
  }
});

app.use('/hero', express.static(HERO_DIR));
app.use('/uebermich-img', express.static(UEBERMICH_IMG_DIR));
app.use('/erfolge-img', express.static(ERFOLGE_IMG_DIR));
app.use('/gaestebuch-img', express.static(GAESTEBUCH_IMG_DIR));

// Über mich API
function readUebermich() {
  return JSON.parse(fs.readFileSync(UEBERMICH_FILE, 'utf8'));
}
function writeUebermich(data) {
  fs.writeFileSync(UEBERMICH_FILE, JSON.stringify(data, null, 2));
}

app.get('/api/uebermich', (req, res) => {
  res.json(readUebermich());
});

app.put('/api/uebermich', (req, res) => {
  const data = req.body;
  writeUebermich(data);
  res.json({ ok: true });
  rebuildAndDeploy();
});

app.post('/api/uebermich/image', upload.single('image'), async (req, res) => {
  try {
    const filename = 'portrait.webp';
    await sharp(req.file.buffer)
      .resize(800, 1000, { fit: 'cover', position: 'top' })
      .webp({ quality: 88 })
      .toFile(path.join(UEBERMICH_IMG_DIR, filename));
    const data = readUebermich();
    data.hero.image = filename;
    writeUebermich(data);
    res.json({ ok: true, image: filename });
    rebuildAndDeploy();
  } catch (e) {
    res.status(500).json({ ok: false, error: e.message });
  }
});

// ── Erfolge API ───────────────────────────────────────────────
function readErfolge() {
  return JSON.parse(fs.readFileSync(ERFOLGE_FILE, 'utf8'));
}
function writeErfolge(data) {
  fs.writeFileSync(ERFOLGE_FILE, JSON.stringify(data, null, 2));
}

app.get('/api/erfolge', (req, res) => {
  res.json(readErfolge());
});

app.put('/api/erfolge', (req, res) => {
  writeErfolge(req.body);
  res.json({ ok: true });
  rebuildAndDeploy();
});

app.post('/api/erfolge/image', upload.single('image'), async (req, res) => {
  try {
    const filename = 'hero.webp';
    await sharp(req.file.buffer)
      .resize(1200, 1500, { fit: 'inside', withoutEnlargement: true })
      .webp({ quality: 88 })
      .toFile(path.join(ERFOLGE_IMG_DIR, filename));
    const data = readErfolge();
    data.hero.image = filename;
    writeErfolge(data);
    res.json({ ok: true, image: filename });
    rebuildAndDeploy();
  } catch (e) {
    res.status(500).json({ ok: false, error: e.message });
  }
});

// ── Einzelerfolge (Markdown) API ──────────────────────────────
const ERFOLGE_CONTENT_DIR = path.join(__dirname, 'content/erfolge');

function parseFM(content) {
  const match = content.match(/^---\r?\n([\s\S]+?)\r?\n---\r?\n([\s\S]*)$/);
  if (!match) return { data: {}, content };
  const fm = match[1];
  const body = match[2];
  const data = {};
  fm.split('\n').forEach(line => {
    const [key, ...rest] = line.split(':');
    if (key && rest.length) data[key.trim()] = rest.join(':').trim().replace(/^"|"$/g, '');
  });
  return { data, content: body };
}

app.get('/api/individual-successes', (req, res) => {
  const files = fs.readdirSync(ERFOLGE_CONTENT_DIR).filter(f => f.endsWith('.md') && f !== '_index.md');
  const list = files.map(f => {
    const c = fs.readFileSync(path.join(ERFOLGE_CONTENT_DIR, f), 'utf8');
    const { data } = parseFM(c);
    return { fileName: f, title: data.title || f, rang: data.rang, image: data.image, weight: parseInt(data.weight) || 999 };
  });
  list.sort((a, b) => a.weight - b.weight);
  res.json(list);
});

app.put('/api/individual-successes/reorder', (req, res) => {
  const { order } = req.body;
  if (!Array.isArray(order)) return res.status(400).json({ ok: false });
  
  order.forEach((fileName, index) => {
    const filePath = path.join(ERFOLGE_CONTENT_DIR, fileName);
    if (!fs.existsSync(filePath)) return;
    
    const content = fs.readFileSync(filePath, 'utf8');
    const { data, content: body } = parseFM(content);
    
    data.weight = index + 1;
    
    let fmStr = '---\n';
    for (const k in data) {
      if (data[k] !== undefined && data[k] !== null) {
        if (k === 'weight') {
          fmStr += `${k}: ${data[k]}\n`;
        } else {
          fmStr += `${k}: "${data[k]}"\n`;
        }
      }
    }
    fmStr += '---\n';
    fs.writeFileSync(filePath, fmStr + '\n' + body);
  });
  
  res.json({ ok: true });
  rebuildAndDeploy();
});

app.get('/api/individual-success/:file', (req, res) => {
  const c = fs.readFileSync(path.join(ERFOLGE_CONTENT_DIR, req.params.file), 'utf8');
  const { data, content } = parseFM(c);
  res.json({ ...data, content });
});

app.put('/api/individual-success/:file', (req, res) => {
  const filePath = path.join(ERFOLGE_CONTENT_DIR, req.params.file);
  const oldContent = fs.readFileSync(filePath, 'utf8');
  const { data: oldData } = parseFM(oldContent);
  const { title, rang, summary, content, ort, datum, kategorie, is_weitere_auszeichnung, image, images } = req.body;
  
  const newData = { ...oldData, title, rang, summary, ort, datum, kategorie, is_weitere_auszeichnung };
  if (image !== undefined) newData.image = image;
  if (images !== undefined) newData.images = images;
  let fmStr = '---\n';
  for (const k in newData) {
    if (newData[k]) {
      if (k === 'weight') {
        fmStr += `${k}: ${newData[k]}\n`;
      } else {
        fmStr += `${k}: "${newData[k]}"\n`;
      }
    }
  }
  fmStr += '---\n';
  fs.writeFileSync(filePath, fmStr + '\n' + content);
  res.json({ ok: true });
  rebuildAndDeploy();
});

app.post('/api/individual-success/:file/images', upload.array('images', 5), async (req, res) => {
  try {
    const baseName = req.params.file.replace('.md', '');
    const filenames = [];
    
    for (const file of req.files) {
      const isVideo = file.mimetype.startsWith('video/');
      const origExt = path.extname(file.originalname).toLowerCase();
      const ext = isVideo ? origExt : '.webp';
      const filename = `success-${baseName}-${Date.now()}-${Math.random().toString(36).slice(2,7)}${ext}`;
      
      if (isVideo) {
        fs.writeFileSync(path.join(ERFOLGE_IMG_DIR, filename), file.buffer);
      } else {
        await sharp(file.buffer)
          .resize(1000, 1000, { fit: 'inside', withoutEnlargement: true })
          .webp({ quality: 85 })
          .toFile(path.join(ERFOLGE_IMG_DIR, filename));
      }
      filenames.push(filename);
    }
    
    // In Markdown Datei schreiben
    const filePath = path.join(ERFOLGE_CONTENT_DIR, req.params.file);
    const c = fs.readFileSync(filePath, 'utf8');
    const { data, content } = parseFM(c);
    
    let existingImages = [];
    try { existingImages = JSON.parse(req.body.existingImages || '[]'); } catch(e){}
    const allImages = [...existingImages, ...filenames];
    
    let mainIdx = parseInt(req.body.mainImageIndex) || 0;
    if (mainIdx < 0 || mainIdx >= allImages.length) mainIdx = 0;
    
    if (allImages.length > 0) {
      data.image = allImages[mainIdx]; // Vom User gewähltes Hauptbild
      data.images = allImages.join(',');
    } else {
      delete data.image;
      delete data.images;
    }
    
    let fmStr = '---\n';
    for (const k in data) {
      if (data[k]) fmStr += `${k}: "${data[k]}"\n`;
    }
    fmStr += '---\n';
    fs.writeFileSync(filePath, fmStr + '\n' + content);
    
    res.json({ ok: true, images: filenames });
    rebuildAndDeploy();
  } catch (e) {
    res.status(500).json({ ok: false, error: e.message });
  }
});

// ── Galerie Seiten-Texte API ──────────────────────────────────
app.get('/api/galerie', (req, res) => {
  res.json(JSON.parse(fs.readFileSync(GALERIE_PAGE_FILE, 'utf8')));
});
app.put('/api/galerie', (req, res) => {
  fs.writeFileSync(GALERIE_PAGE_FILE, JSON.stringify(req.body, null, 2));
  res.json({ ok: true });
  rebuildAndDeploy();
});

// ── Gästebuch API ─────────────────────────────────────────────
function readGaestebuch() {
  return JSON.parse(fs.readFileSync(GAESTEBUCH_FILE, 'utf8'));
}
function writeGaestebuch(data) {
  fs.writeFileSync(GAESTEBUCH_FILE, JSON.stringify(data, null, 2));
}

app.get('/api/gaestebuch', (req, res) => {
  res.json(readGaestebuch());
});

app.put('/api/gaestebuch', (req, res) => {
  writeGaestebuch(req.body);
  res.json({ ok: true });
  rebuildAndDeploy();
});

// Öffentlicher Endpunkt für neue Einträge
app.post('/api/gaestebuch/public', (req, res) => {
  try {
    const { name, text, email, subject } = req.body;
    if (!name || !text) return res.status(400).json({ ok: false, error: 'Name und Text fehlen' });

    const data = readGaestebuch();
    const newEntry = {
      id: Date.now().toString(),
      name: name.trim(),
      rolle: subject || 'Besucher',
      text: text.trim(),
      farbe: 'default',
      breit: false,
      datum: new Date().toISOString()
    };

    data.eintraege.unshift(newEntry); // Oben anfügen
    writeGaestebuch(data);
    res.json({ ok: true });
    
    // Nach kurzem Delay bauen, damit der User nicht warten muss
    setTimeout(() => rebuildAndDeploy(), 500);
  } catch (e) {
    res.status(500).json({ ok: false, error: e.message });
  }
});

app.post('/api/gaestebuch/image', upload.single('image'), async (req, res) => {
  try {
    const filename = 'hero.webp';
    await sharp(req.file.buffer)
      .resize(1400, 600, { fit: 'cover', position: 'center' })
      .webp({ quality: 88 })
      .toFile(path.join(GAESTEBUCH_IMG_DIR, filename));
    const data = JSON.parse(fs.readFileSync(GAESTEBUCH_FILE, 'utf8'));
    data.hero.image = filename;
    fs.writeFileSync(GAESTEBUCH_FILE, JSON.stringify(data, null, 2));
    res.json({ ok: true, image: filename });
    rebuildAndDeploy();
  } catch (e) {
    res.status(500).json({ ok: false, error: e.message });
  }
});

// ── Global (Social Links) API ─────────────────────────────────
app.get('/api/global', (req, res) => {
  res.json(JSON.parse(fs.readFileSync(GLOBAL_FILE, 'utf8')));
});
app.put('/api/global', (req, res) => {
  const current = JSON.parse(fs.readFileSync(GLOBAL_FILE, 'utf8'));
  const updated = { ...current, ...req.body };
  fs.writeFileSync(GLOBAL_FILE, JSON.stringify(updated, null, 2));
  res.json({ ok: true });
  rebuildAndDeploy();
});

// ── Erfolge Interactions (Likes/Comments) API ─────────────────
function readErfolgeInteractions() {
  if (!fs.existsSync(ERFOLGE_INTERACTIONS_FILE)) {
    return {};
  }
  try {
    return JSON.parse(fs.readFileSync(ERFOLGE_INTERACTIONS_FILE, 'utf8'));
  } catch (e) {
    return {};
  }
}

function writeErfolgeInteractions(data) {
  fs.writeFileSync(ERFOLGE_INTERACTIONS_FILE, JSON.stringify(data, null, 2));
}

app.get('/api/erfolge/interactions', (req, res) => {
  res.json(readErfolgeInteractions());
});

app.post('/api/erfolge/interactions/like', (req, res) => {
  try {
    const { id } = req.body;
    if (!id) return res.status(400).json({ ok: false, error: 'ID fehlt' });
    
    const interactions = readErfolgeInteractions();
    if (!interactions[id]) {
      interactions[id] = { likes: 0, comments: [] };
    }
    interactions[id].likes = (interactions[id].likes || 0) + 1;
    writeErfolgeInteractions(interactions);
    
    res.json({ ok: true, data: interactions[id] });
  } catch (e) {
    res.status(500).json({ ok: false, error: e.message });
  }
});

app.post('/api/erfolge/interactions/comment', (req, res) => {
  try {
    const { id, name, text } = req.body;
    if (!id || !name || !text) return res.status(400).json({ ok: false, error: 'ID, Name oder Text fehlt' });
    
    const interactions = readErfolgeInteractions();
    if (!interactions[id]) {
      interactions[id] = { likes: 0, comments: [] };
    }
    
    const newComment = {
      id: Date.now().toString() + '-' + Math.random().toString(36).slice(2, 7),
      name: name.trim(),
      text: text.trim(),
      date: new Date().toISOString()
    };
    
    if (!interactions[id].comments) {
      interactions[id].comments = [];
    }
    interactions[id].comments.push(newComment);
    writeErfolgeInteractions(interactions);
    
    res.json({ ok: true, data: interactions[id], comment: newComment });
  } catch (e) {
    res.status(500).json({ ok: false, error: e.message });
  }
});

// Admin-UI
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'admin.html'));
});

app.get('/__old', (req, res) => {
  res.send(`<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Galerie verwalten 📸</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  * { font-family: 'Segoe UI', system-ui, sans-serif; }
  .drop-zone { border: 3px dashed #e879a0; transition: all .2s; }
  .drop-zone.drag-over { background: #fdf2f8; border-color: #b30065; transform: scale(1.01); }
  .photo-card { transition: transform .2s, box-shadow .2s; }
  .photo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(179,0,101,.15); }
  .kategorie-btn.active { background: #8930b0; color: white; }
  .progress-bar { transition: width .3s; }
</style>
</head>
<body class="bg-pink-50 min-h-screen">

<!-- Header -->
<header class="bg-white shadow-md shadow-pink-100 sticky top-0 z-50">
  <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-black text-pink-600 italic uppercase tracking-tight">MiyaKarate</h1>
      <p class="text-xs text-gray-400 font-medium">Galerie verwalten</p>
    </div>
    <a href="http://localhost:1313/galerie/" target="_blank"
      class="flex items-center gap-2 bg-pink-600 text-white px-5 py-2.5 rounded-full font-bold text-sm hover:bg-pink-700 transition-colors">
      🌐 Website ansehen
    </a>
  </div>
</header>

<main class="max-w-5xl mx-auto px-6 py-10 space-y-10">

  <!-- Upload-Bereich -->
  <section class="bg-white rounded-3xl p-8 shadow-sm">
    <h2 class="text-xl font-black text-gray-800 mb-6 flex items-center gap-2">
      <span class="text-3xl">📤</span> Fotos hochladen
    </h2>

    <!-- Drop-Zone -->
    <div id="dropZone"
      class="drop-zone rounded-2xl p-12 text-center cursor-pointer mb-6"
      onclick="document.getElementById('fileInput').click()">
      <div class="text-6xl mb-4">🖼️</div>
      <p class="text-xl font-bold text-pink-600 mb-2">Fotos hier reinziehen</p>
      <p class="text-gray-400 text-sm">oder hier klicken zum Auswählen</p>
      <p class="text-gray-300 text-xs mt-2">JPG, PNG, HEIC • bis zu 20 MB</p>
    </div>
    <input type="file" id="fileInput" multiple accept="image/*" class="hidden"/>

    <!-- Metadaten -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
      <div>
        <label class="block text-sm font-bold text-gray-600 mb-2">📝 Titel (optional)</label>
        <input id="uploadTitle" type="text" placeholder="z.B. Landesmeisterschaft 2024"
          class="w-full border-2 border-pink-100 rounded-xl px-4 py-3 focus:outline-none focus:border-pink-400 text-gray-700"/>
      </div>
      <div>
        <label class="block text-sm font-bold text-gray-600 mb-2">🏷️ Kategorie</label>
        <div class="flex gap-2 flex-wrap pt-1">
          <button onclick="setKat(this,'Training')" class="kategorie-btn active px-4 py-2 rounded-full border-2 border-purple-200 text-sm font-bold transition-colors">Training</button>
          <button onclick="setKat(this,'Wettkämpfe')" class="kategorie-btn px-4 py-2 rounded-full border-2 border-purple-200 text-sm font-bold transition-colors bg-white text-gray-600">Wettkämpfe</button>
          <button onclick="setKat(this,'Gürtelprüfungen')" class="kategorie-btn px-4 py-2 rounded-full border-2 border-purple-200 text-sm font-bold transition-colors bg-white text-gray-600">Gürtelprüfungen</button>
        </div>
      </div>
    </div>

    <!-- Vorschau der gewählten Dateien -->
    <div id="previewList" class="grid grid-cols-3 sm:grid-cols-5 gap-3 mb-6 hidden"></div>

    <!-- Fortschrittsbalken -->
    <div id="progressWrap" class="hidden mb-4">
      <div class="h-3 bg-pink-100 rounded-full overflow-hidden">
        <div id="progressBar" class="progress-bar h-full bg-gradient-to-r from-pink-500 to-purple-500 rounded-full" style="width:0%"></div>
      </div>
      <p id="progressText" class="text-sm text-gray-500 mt-2 text-center">Wird hochgeladen…</p>
    </div>

    <button id="uploadBtn" onclick="startUpload()" disabled
      class="w-full py-4 rounded-2xl font-black text-xl bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg shadow-pink-200 disabled:opacity-40 disabled:cursor-not-allowed hover:scale-[1.01] active:scale-95 transition-transform">
      ✨ Hochladen!
    </button>
  </section>

  <!-- Meine Fotos -->
  <section class="bg-white rounded-3xl p-8 shadow-sm">
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-xl font-black text-gray-800 flex items-center gap-2">
        <span class="text-3xl">🗂️</span> Meine Fotos
        <span id="photoCount" class="text-sm font-bold text-pink-500 bg-pink-50 px-3 py-1 rounded-full"></span>
      </h2>
      <div class="flex gap-2">
        <button onclick="filterPhotos('Alle')" class="filter-btn active text-xs font-bold px-3 py-1.5 rounded-full bg-pink-600 text-white">Alle</button>
        <button onclick="filterPhotos('Training')" class="filter-btn text-xs font-bold px-3 py-1.5 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">Training</button>
        <button onclick="filterPhotos('Wettkämpfe')" class="filter-btn text-xs font-bold px-3 py-1.5 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">Wettkämpfe</button>
        <button onclick="filterPhotos('Gürtelprüfungen')" class="filter-btn text-xs font-bold px-3 py-1.5 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">Gürtel</button>
      </div>
    </div>
    <div id="photoGrid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
      <div class="col-span-full text-center py-16 text-gray-300">
        <div class="text-5xl mb-3">📭</div>
        <p class="font-bold">Noch keine Fotos</p>
        <p class="text-sm">Lad dein erstes Foto hoch!</p>
      </div>
    </div>
  </section>
</main>

<!-- Edit Modal -->
<div id="editModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
  <div class="bg-white rounded-3xl p-8 w-full max-w-md shadow-2xl">
    <h3 class="text-xl font-black text-gray-800 mb-6">✏️ Foto bearbeiten</h3>
    <input type="hidden" id="editId"/>
    <div class="space-y-4">
      <div>
        <label class="block text-sm font-bold text-gray-600 mb-2">Titel</label>
        <input id="editTitle" type="text"
          class="w-full border-2 border-pink-100 rounded-xl px-4 py-3 focus:outline-none focus:border-pink-400 text-gray-700"/>
      </div>
      <div>
        <label class="block text-sm font-bold text-gray-600 mb-2">Kategorie</label>
        <select id="editKat"
          class="w-full border-2 border-pink-100 rounded-xl px-4 py-3 focus:outline-none focus:border-pink-400 text-gray-700">
          <option>Training</option>
          <option>Wettkämpfe</option>
          <option>Gürtelprüfungen</option>
        </select>
      </div>
    </div>
    <div class="flex gap-3 mt-8">
      <button onclick="saveEdit()" class="flex-1 py-3 rounded-xl font-black bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:scale-[1.02] active:scale-95 transition-transform">💾 Speichern</button>
      <button onclick="closeModal()" class="px-6 py-3 rounded-xl font-bold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">Abbrechen</button>
    </div>
  </div>
</div>

<!-- Toast -->
<div id="toast" class="hidden fixed bottom-6 left-1/2 -translate-x-1/2 bg-gray-900 text-white px-6 py-3 rounded-full font-bold text-sm shadow-xl z-50"></div>

<script>
  let selectedKat = 'Training';
  let allPhotos = [];
  let currentFilter = 'Alle';
  let pendingFiles = [];  // speichert Dateien aus Drag&Drop UND file input

  function setKat(btn, kat) {
    selectedKat = kat;
    document.querySelectorAll('.kategorie-btn').forEach(b => {
      b.classList.remove('active');
      b.classList.add('bg-white', 'text-gray-600');
    });
    btn.classList.add('active');
    btn.classList.remove('bg-white', 'text-gray-600');
  }

  // Drop-Zone
  const dz = document.getElementById('dropZone');
  const fi = document.getElementById('fileInput');
  dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag-over'); });
  dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
  dz.addEventListener('drop', e => {
    e.preventDefault();
    dz.classList.remove('drag-over');
    pendingFiles = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
    showPreviews(pendingFiles);
  });
  fi.addEventListener('change', () => {
    pendingFiles = Array.from(fi.files);
    showPreviews(pendingFiles);
  });

  function showPreviews(files) {
    const list = document.getElementById('previewList');
    list.innerHTML = '';
    if (!files.length) { list.classList.add('hidden'); document.getElementById('uploadBtn').disabled = true; return; }
    list.classList.remove('hidden');
    document.getElementById('uploadBtn').disabled = false;
    files.forEach(f => {
      const url = URL.createObjectURL(f);
      const div = document.createElement('div');
      div.className = 'aspect-square rounded-xl overflow-hidden bg-gray-100 relative';
      div.innerHTML = \`<img src="\${url}" class="w-full h-full object-cover"/>\`;
      list.appendChild(div);
    });
  }

  async function startUpload() {
    const files = pendingFiles;
    if (!files.length) return;

    const btn = document.getElementById('uploadBtn');
    const wrap = document.getElementById('progressWrap');
    const bar = document.getElementById('progressBar');
    const txt = document.getElementById('progressText');

    btn.disabled = true;
    wrap.classList.remove('hidden');

    const fd = new FormData();
    Array.from(files).forEach(f => fd.append('photos', f));
    fd.append('title', document.getElementById('uploadTitle').value);
    fd.append('kategorie', selectedKat);

    // Simulate progress during upload
    let prog = 0;
    const ticker = setInterval(() => {
      prog = Math.min(prog + 3, 90);
      bar.style.width = prog + '%';
    }, 100);

    try {
      const r = await fetch('/api/upload', { method: 'POST', body: fd });
      clearInterval(ticker);
      bar.style.width = '100%';
      txt.textContent = 'Fertig! ✨';

      if (r.ok) {
        showToast('✅ ' + files.length + ' Foto(s) hochgeladen!');
        fi.value = '';
        pendingFiles = [];
        document.getElementById('previewList').innerHTML = '';
        document.getElementById('previewList').classList.add('hidden');
        document.getElementById('uploadTitle').value = '';
        setTimeout(() => { wrap.classList.add('hidden'); bar.style.width = '0%'; btn.disabled = false; }, 1500);
        loadPhotos();
      } else {
        showToast('❌ Fehler beim Hochladen');
        btn.disabled = false;
      }
    } catch(e) {
      clearInterval(ticker);
      showToast('❌ Verbindungsfehler');
      btn.disabled = false;
    }
  }

  async function loadPhotos() {
    const r = await fetch('/api/photos');
    const data = await r.json();
    allPhotos = data.photos || [];
    renderPhotos();
  }

  function renderPhotos() {
    const grid = document.getElementById('photoGrid');
    const count = document.getElementById('photoCount');
    const filtered = currentFilter === 'Alle' ? allPhotos : allPhotos.filter(p => p.kategorie === currentFilter);

    count.textContent = allPhotos.length + ' Fotos';

    if (!filtered.length) {
      grid.innerHTML = \`<div class="col-span-full text-center py-16 text-gray-300">
        <div class="text-5xl mb-3">\${currentFilter === 'Alle' ? '📭' : '🔍'}</div>
        <p class="font-bold">\${currentFilter === 'Alle' ? 'Noch keine Fotos' : 'Keine Fotos in dieser Kategorie'}</p>
        \${currentFilter === 'Alle' ? '<p class="text-sm">Lad dein erstes Foto hoch!</p>' : ''}
      </div>\`;
      return;
    }

    const katColors = { 'Training': 'bg-pink-100 text-pink-700', 'Wettkämpfe': 'bg-purple-100 text-purple-700', 'Gürtelprüfungen': 'bg-amber-100 text-amber-700' };

    grid.innerHTML = filtered.map(p => \`
      <div class="photo-card group relative bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100" data-id="\${p.id}" data-kat="\${p.kategorie}">
        <div class="aspect-square overflow-hidden">
          <img src="/images/\${p.thumb}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" alt="\${p.title}"/>
        </div>
        <div class="p-3">
          <p class="font-bold text-gray-800 text-sm truncate mb-1">\${p.title}</p>
          <span class="text-[10px] font-bold px-2 py-0.5 rounded-full \${katColors[p.kategorie] || 'bg-gray-100 text-gray-600'}">\${p.kategorie}</span>
        </div>
        <div class="absolute top-2 right-2 flex gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
          <button onclick="openEdit('\${p.id}',\`\${p.title}\`,'\${p.kategorie}')"
            class="w-8 h-8 bg-white rounded-full shadow-md flex items-center justify-center text-base hover:scale-110 transition-transform">✏️</button>
          <button onclick="deletePhoto('\${p.id}')"
            class="w-8 h-8 bg-red-500 rounded-full shadow-md flex items-center justify-center text-base hover:scale-110 transition-transform">🗑️</button>
        </div>
      </div>
    \`).join('');
  }

  function filterPhotos(kat) {
    currentFilter = kat;
    document.querySelectorAll('.filter-btn').forEach(b => {
      b.classList.remove('bg-pink-600', 'text-white');
      b.classList.add('bg-gray-100', 'text-gray-600');
    });
    event.target.classList.add('bg-pink-600', 'text-white');
    event.target.classList.remove('bg-gray-100', 'text-gray-600');
    renderPhotos();
  }

  function openEdit(id, title, kat) {
    document.getElementById('editId').value = id;
    document.getElementById('editTitle').value = title;
    document.getElementById('editKat').value = kat;
    document.getElementById('editModal').classList.remove('hidden');
  }

  function closeModal() {
    document.getElementById('editModal').classList.add('hidden');
  }

  async function saveEdit() {
    const id = document.getElementById('editId').value;
    const r = await fetch('/api/photo/' + id, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: document.getElementById('editTitle').value,
        kategorie: document.getElementById('editKat').value
      })
    });
    if (r.ok) {
      closeModal();
      showToast('✅ Gespeichert!');
      loadPhotos();
    }
  }

  async function deletePhoto(id) {
    if (!confirm('Foto wirklich löschen? Das kann nicht rückgängig gemacht werden.')) return;
    const r = await fetch('/api/photo/' + id, { method: 'DELETE' });
    if (r.ok) {
      showToast('🗑️ Foto gelöscht');
      loadPhotos();
    }
  }

  function showToast(msg) {
    const t = document.getElementById('toast');
    t.textContent = msg;
    t.classList.remove('hidden');
    setTimeout(() => t.classList.add('hidden'), 3000);
  }

  // Enter in Edit-Modal
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape') closeModal();
    if (e.key === 'Enter' && !document.getElementById('editModal').classList.contains('hidden')) saveEdit();
  });

  loadPhotos();
</script>
</body>
</html>`);
});

app.listen(PORT, () => {
  console.log(`\n✨ MiyaKarate Admin läuft auf http://localhost:${PORT}\n`);
});