import { useEffect, useState } from 'react';
import { supabase } from './supabase.js';
import { api } from './api.js';

const SECTIONS = ['buerofuehrung', 'software', 'theorie'];
const LAYOUTS = ['', 'text', 'image'];

const EMPTY = {
  section: 'software',
  slug: '',
  title: '',
  date: new Date().toISOString().slice(0, 10),
  weight: '',
  tags: '',
  summary: '',
  cover_image: '',
  layout: 'text',
  external: '',
  color: '',
  body: '',
};

export default function App() {
  const [session, setSession] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => {
      setSession(data.session);
      setLoading(false);
    });
    const { data: sub } = supabase.auth.onAuthStateChange((_e, s) => setSession(s));
    return () => sub.subscription.unsubscribe();
  }, []);

  if (loading) return <div className="center">…</div>;
  if (!session) return <Login />;
  return <Dashboard email={session.user.email} />;
}

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [err, setErr] = useState(null);

  async function submit(e) {
    e.preventDefault();
    setErr(null);
    const { error } = await supabase.auth.signInWithPassword({ email, password });
    if (error) setErr(error.message);
  }

  return (
    <div className="center">
      <form className="card login" onSubmit={submit}>
        <h1>OPENBUREAU CMS</h1>
        <input type="email" placeholder="E-Mail" value={email}
          onChange={(e) => setEmail(e.target.value)} autoFocus />
        <input type="password" placeholder="Passwort" value={password}
          onChange={(e) => setPassword(e.target.value)} />
        <button type="submit">Einloggen</button>
        {err && <p className="err">{err}</p>}
      </form>
    </div>
  );
}

function Dashboard({ email }) {
  const [posts, setPosts] = useState([]);
  const [current, setCurrent] = useState(null); // post-Objekt oder null
  const [msg, setMsg] = useState(null);

  async function refresh() {
    try {
      setPosts(await api.listPosts());
    } catch (e) {
      setMsg({ type: 'err', text: e.message });
    }
  }
  useEffect(() => { refresh(); }, []);

  return (
    <div className="app">
      <header>
        <strong>OPENBUREAU CMS</strong>
        <span className="spacer" />
        <span className="muted">{email}</span>
        <button onClick={() => supabase.auth.signOut()}>Logout</button>
      </header>

      <div className="body">
        <aside>
          <button className="new" onClick={() => setCurrent({ ...EMPTY })}>+ Neuer Post</button>
          <ul className="list">
            {posts.map((p) => (
              <li key={p.id} className={current?.id === p.id ? 'active' : ''}
                onClick={() => setCurrent(fromRow(p))}>
                <span className={`dot ${p.status}`} />
                <span className="t">{p.title || '(ohne Titel)'}</span>
                <span className="s">{p.section}</span>
              </li>
            ))}
          </ul>
        </aside>

        <main>
          {current
            ? <Editor key={current.id || 'new'} initial={current}
                onSaved={(row) => { setCurrent(fromRow(row)); refresh(); }}
                onMsg={setMsg} />
            : <p className="muted pad">Wähle links einen Post oder leg einen neuen an.</p>}
        </main>
      </div>

      {msg && <div className={`toast ${msg.type}`} onClick={() => setMsg(null)}>{msg.text}</div>}
    </div>
  );
}

function Editor({ initial, onSaved, onMsg }) {
  const [post, setPost] = useState(initial);
  const [previewUrl, setPreviewUrl] = useState(null);
  const [busy, setBusy] = useState(false);
  const set = (k) => (e) => setPost({ ...post, [k]: e.target.value });

  async function uploadCover(e) {
    const file = e.target.files?.[0];
    if (!file) return;
    setBusy(true);
    try {
      const res = await api.upload(file);
      setPost((p) => ({ ...p, cover_image: res.url }));
      onMsg({ type: 'ok', text: `Hochgeladen: ${res.url}` });
    } catch (err) {
      onMsg({ type: 'err', text: err.message });
    } finally {
      setBusy(false);
    }
  }

  async function save() {
    setBusy(true);
    try {
      const payload = toRow(post);
      const row = post.id
        ? await api.updatePost(post.id, payload)
        : await api.createPost(payload);
      onSaved(row);
      onMsg({ type: 'ok', text: 'Gespeichert.' });
      return row;
    } catch (e) {
      onMsg({ type: 'err', text: e.message });
    } finally {
      setBusy(false);
    }
  }

  async function preview() {
    const row = await save();
    if (!row) return;
    setBusy(true);
    try {
      const res = await api.preview(row.id);
      // Cache-Buster, damit der frische Build geladen wird.
      setPreviewUrl(`${res.url}?t=${Date.now()}`);
    } catch (e) {
      onMsg({ type: 'err', text: e.message });
    } finally {
      setBusy(false);
    }
  }

  async function publish() {
    const row = await save();
    if (!row) return;
    if (!confirm('Diesen Post live publizieren?')) return;
    setBusy(true);
    try {
      const res = await api.publish(row.id);
      onMsg({ type: 'ok', text: `Live: ${res.url}` });
    } catch (e) {
      onMsg({ type: 'err', text: e.message });
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="editor">
      <div className="fields">
        <div className="row">
          <label>Titel<input value={post.title} onChange={set('title')} /></label>
          <label className="sm">Section
            <select value={post.section} onChange={set('section')}>
              {SECTIONS.map((s) => <option key={s}>{s}</option>)}
            </select>
          </label>
        </div>
        <div className="row">
          <label>Slug<input value={post.slug} onChange={set('slug')} placeholder="a-z0-9-" /></label>
          <label className="sm">Datum<input type="date" value={post.date} onChange={set('date')} /></label>
          <label className="xs">Weight<input type="number" value={post.weight} onChange={set('weight')} /></label>
        </div>
        <div className="row">
          <label className="sm">Layout
            <select value={post.layout} onChange={set('layout')}>
              {LAYOUTS.map((l) => <option key={l} value={l}>{l || '(default)'}</option>)}
            </select>
          </label>
          <label className="sm">Color<input value={post.color} onChange={set('color')} placeholder="kusa / yuyake" /></label>
          <label>Tags<input value={post.tags} onChange={set('tags')} placeholder="komma, getrennt" /></label>
        </div>
        <label>Summary<input value={post.summary} onChange={set('summary')} /></label>
        <div className="row">
          <label>Cover-Bild
            <input value={post.cover_image} onChange={set('cover_image')} placeholder="/images/...jpg" />
          </label>
          <label className="sm">Hochladen
            <input type="file" accept="image/*" onChange={uploadCover} disabled={busy} />
          </label>
          <label>Externer Link<input value={post.external} onChange={set('external')} placeholder="https://…" /></label>
        </div>
        <label className="grow">Inhalt (Markdown)
          <textarea value={post.body} onChange={set('body')} spellCheck={false} />
        </label>
        <div className="actions">
          <button onClick={save} disabled={busy}>Speichern</button>
          <button onClick={preview} disabled={busy}>Vorschau</button>
          <button className="primary" onClick={publish} disabled={busy}>Publizieren</button>
        </div>
      </div>

      <div className="preview">
        {previewUrl
          ? <iframe title="Vorschau" src={previewUrl} />
          : <p className="muted pad">Vorschau erscheint hier nach Klick auf „Vorschau".</p>}
      </div>
    </div>
  );
}

// --- DB-Zeile <-> Formular ---
function fromRow(row) {
  return {
    ...EMPTY, ...row,
    weight: row.weight ?? '',
    tags: Array.isArray(row.tags) ? row.tags.join(', ') : '',
    date: row.date ? String(row.date).slice(0, 10) : EMPTY.date,
  };
}
function toRow(post) {
  return {
    section: post.section,
    slug: post.slug,
    title: post.title,
    date: post.date,
    weight: post.weight === '' ? null : Number(post.weight),
    tags: post.tags ? post.tags.split(',').map((t) => t.trim()).filter(Boolean) : [],
    summary: post.summary || null,
    cover_image: post.cover_image || null,
    layout: post.layout || null,
    external: post.external || null,
    color: post.color || null,
    body: post.body || '',
  };
}