// Main App — auth, routing, Supabase data, modals

const { useState: useStateApp, useEffect: useEffectApp, useCallback } = React;

// ── Login Screen ─────────────────────────────────────────────
function LoginScreen({ onLogin }) {
  const [email, setEmail] = useStateApp('');
  const [password, setPassword] = useStateApp('');
  const [error, setError] = useStateApp('');
  const [loading, setLoading] = useStateApp(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email.trim() || !password) { setError('Bitte E-Mail und Passwort eingeben.'); return; }
    setLoading(true);
    setError('');
    try {
      const { data: authData, error: authErr } = await window.sb.auth.signInWithPassword({ email: email.trim(), password });
      if (authErr) throw authErr;

      const { data: fhData, error: fhErr } = await window.sb.from('funeral_homes')
        .select('*').eq('user_id', authData.user.id).eq('active', true).single();
      if (fhErr || !fhData) {
        await window.sb.auth.signOut();
        throw new Error('Kein aktives Trauerhilfe-Konto gefunden.');
      }
      onLogin(fhData);
    } catch (err) {
      const msg = err.message || '';
      if (msg.toLowerCase().includes('invalid') || msg.toLowerCase().includes('credentials')) {
        setError('E-Mail oder Passwort ist falsch.');
      } else if (msg.includes('aktives Trauerhilfe')) {
        setError(msg);
      } else {
        setError('Anmeldung fehlgeschlagen. Bitte erneut versuchen.');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-wrap">
      <div className="login-card">
        <div className="login-brand">
          <div className="login-brand-name">Erinnerungsportal</div>
          <div className="login-brand-sub">Trauerhilfe-Zugang</div>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>E-Mail-Adresse</label>
            <input className="form-input" type="email" placeholder="ihre@email.de"
              value={email} onChange={e => setEmail(e.target.value)} autoFocus />
          </div>
          <div className="form-group">
            <label>Passwort</label>
            <input className="form-input" type="password" placeholder="••••••••"
              value={password} onChange={e => setPassword(e.target.value)} />
          </div>
          {error && <div className="login-error">{error}</div>}
          <button type="submit" className="btn btn-primary login-btn" disabled={loading}>
            {loading ? 'Wird angemeldet …' : 'Anmelden'}
          </button>
        </form>
      </div>
      <footer className="footer" style={{position:'fixed',bottom:0,left:0,right:0}}>
        <a href="/impressum">Impressum</a> &nbsp;·&nbsp; <a href="/datenschutz">Datenschutz</a>
      </footer>
    </div>
  );
}

// ── Header ───────────────────────────────────────────────────
function Header({ homeName, onNewOrder, onHome }) {
  const handleLogout = async () => {
    await window.sb.auth.signOut();
    window.location.reload();
  };
  return (
    <header className="portal-header">
      <div className="brand" style={{ cursor: 'pointer' }} onClick={onHome}>
        <div className="brand-text">
          <span className="brand-name">{homeName || 'Erinnerungsportal'}</span>
          <span className="brand-sub">Erinnerungsportal</span>
        </div>
      </div>
      <div className="portal-header-actions">
        <button className="btn btn-primary" onClick={onNewOrder}>
          <window.Icon.Plus /> Neuer Auftrag
        </button>
        <button className="btn btn-ghost" onClick={handleLogout} title="Abmelden">
          <window.Icon.Logout /> Abmelden
        </button>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <a href="/impressum">Impressum</a> &nbsp;·&nbsp; <a href="/datenschutz">Datenschutz</a>
    </footer>
  );
}

function Toasts({ items }) {
  if (!items.length) return null;
  return (
    <div className="toast-wrap">
      {items.map(t => (
        <div key={t.id} className="toast"><window.Icon.Check /> {t.message}</div>
      ))}
    </div>
  );
}

// ── App ──────────────────────────────────────────────────────
function App() {
  const [authState, setAuthState] = useStateApp('loading'); // 'loading' | 'login' | 'portal'
  const [funeralHome, setFuneralHome] = useStateApp(null);
  const [orders, setOrders] = useStateApp([]);
  const [ordersLoading, setOrdersLoading] = useStateApp(false);
  const [route, setRoute] = useStateApp({ name: 'dashboard' });
  const [newOrderOpen, setNewOrderOpen] = useStateApp(false);
  const [qrOrder, setQrOrder] = useStateApp(null);
  const [confirmState, setConfirmState] = useStateApp(null);
  const [toasts, setToasts] = useStateApp([]);

  const toast = useCallback((message) => {
    const id = Math.random().toString(36).slice(2);
    setToasts(t => [...t, { id, message }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2700);
  }, []);

  // ── Auth check on mount ──
  useEffectApp(() => {
    window.sb.auth.getSession().then(async ({ data: { session } }) => {
      if (!session) { setAuthState('login'); return; }
      try {
        const { data, error } = await window.sb.from('funeral_homes')
          .select('*').eq('user_id', session.user.id).eq('active', true).single();
        if (error || !data) { await window.sb.auth.signOut(); setAuthState('login'); return; }
        setFuneralHome(data);
        setAuthState('portal');
      } catch (_) { setAuthState('login'); }
    });
  }, []);

  // ── Load orders when portal ready ──
  useEffectApp(() => {
    if (authState === 'portal' && funeralHome) loadOrders();
  }, [authState, funeralHome]);

  const loadOrders = async () => {
    setOrdersLoading(true);
    const { data, error } = await window.sb.from('funeral_orders')
      .select('*')
      .eq('funeral_home_id', funeralHome.id)
      .order('created_at', { ascending: false });
    setOrdersLoading(false);
    if (!error && data) setOrders(data.map(window.mapOrder));
  };

  // ── Create order ──
  const createOrder = async (form) => {
    const token = window.generateToken();
    const { data: inserted, error: insertErr } = await window.sb.from('funeral_orders').insert({
      funeral_home_id: funeralHome.id,
      token,
      customer_name: form.customerName.trim(),
      customer_email: form.email.trim(),
      customer_phone: form.phone.trim() || null,
      deceased_name: form.deceased.trim() || null,
      internal_note: form.note.trim() || null,
    }).select().single();

    if (insertErr) { toast('Fehler beim Erstellen des Auftrags.'); return; }

    let emailSent = false;
    let emailError = null;
    try {
      await portalApi('/api/send-email', { token }, { auth: true });
      emailSent = true;
    } catch (err) { emailError = err; }

    setNewOrderOpen(false);
    toast(emailSent
      ? 'Auftrag erstellt · E-Mail wurde zuverlässig zum Versand eingeplant'
      : `Auftrag erstellt · E-Mail nicht versendet${emailError?.requestId ? ` (${emailError.requestId})` : ''}`);
    await loadOrders();
    setQrOrder({ token, email: form.email.trim(), customerName: form.customerName.trim() });
  };

  // ── Delete order ──
  const deleteOrder = (order) => {
    setConfirmState({
      title: 'Auftrag wirklich löschen?',
      message: `Der Auftrag für "${order.customerName}" wird dauerhaft entfernt. Diese Aktion kann nicht rückgängig gemacht werden.`,
      confirmLabel: 'Endgültig löschen',
      danger: true,
      onConfirm: async () => {
        try {
          await portalApi('/api/delete-order', { token: order.token }, { auth: true });
          setConfirmState(null);
          setRoute({ name: 'dashboard' });
          toast('Auftrag und Dateien wurden gelöscht');
          await loadOrders();
        } catch (err) {
          setConfirmState(null);
          if (err.code === 'pipeline_active') {
            toast('Löschen nicht möglich: Der Auftrag wird gerade verarbeitet.');
          } else if (err.code === 'session_missing') {
            toast('Löschen nicht möglich: Dem Auftrag fehlt eine Upload-Sitzung.');
          } else {
            toast(`Löschen fehlgeschlagen${err.requestId ? ` (${err.requestId})` : ''}.`);
          }
        }
      },
    });
  };

  // ── Resend email ──
  const resendEmail = async (order) => {
    try {
      await portalApi('/api/send-email', { token: order.token }, { auth: true });
      toast('E-Mail ist versendet oder zuverlässig zum Versand eingeplant.');
    } catch (err) {
      toast(`E-Mail konnte nicht gesendet werden${err.requestId ? ` (${err.requestId})` : ''}.`);
    }
  };

  // ── Video download ──
  const downloadVideo = async (order) => {
    if (!order.sessionId) { toast('Kein Video verfügbar.'); return; }
    try {
      const data = await portalApi('/api/portal-storage', { action: 'final_video', token: order.token }, { auth: true });
      window.open(data.url, '_blank', 'noopener,noreferrer');
    } catch (_) { toast('Video konnte nicht geladen werden.'); }
  };

  // ── Refresh single order status ──
  const refreshOrder = async (orderId) => {
    const { data } = await window.sb.from('funeral_orders').select('*').eq('id', orderId).single();
    if (data) {
      setOrders(prev => prev.map(o => o.id === orderId ? window.mapOrder(data) : o));
    }
  };

  // ── Render states ──
  if (authState === 'loading') {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', color: 'var(--a-muted)', fontFamily: 'Playfair Display, serif', fontStyle: 'italic' }}>
        Wird geladen …
      </div>
    );
  }

  if (authState === 'login') {
    return <LoginScreen onLogin={(home) => { setFuneralHome(home); setAuthState('portal'); }} />;
  }

  const currentOrder = route.name === 'detail'
    ? orders.find(o => o.id === route.id)
    : null;

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <Header
        homeName={funeralHome?.name}
        onNewOrder={() => setNewOrderOpen(true)}
        onHome={() => setRoute({ name: 'dashboard' })}
      />

      {route.name === 'dashboard' && (
        <window.Dashboard
          orders={orders}
          loading={ordersLoading}
          onOpenOrder={(id) => setRoute({ name: 'detail', id })}
          onNewOrder={() => setNewOrderOpen(true)}
          onShowQR={(order) => setQrOrder(order)}
        />
      )}

      {route.name === 'detail' && currentOrder && (
        <window.OrderDetail
          order={currentOrder}
          onBack={() => setRoute({ name: 'dashboard' })}
          onShowQR={(order) => setQrOrder(order)}
          onResendEmail={resendEmail}
          onDelete={deleteOrder}
          onDownload={downloadVideo}
          onRefreshOrder={refreshOrder}
        />
      )}

      <Footer />

      <window.NewOrderModal
        open={newOrderOpen}
        onClose={() => setNewOrderOpen(false)}
        onCreate={createOrder}
      />

      <window.QRModal
        open={!!qrOrder}
        order={qrOrder}
        onClose={() => setQrOrder(null)}
        onCopy={(url) => { navigator.clipboard?.writeText(url); toast('Link kopiert'); }}
      />

      {confirmState && (
        <window.ConfirmModal
          open={true}
          title={confirmState.title}
          message={confirmState.message}
          confirmLabel={confirmState.confirmLabel}
          danger={confirmState.danger}
          onClose={() => setConfirmState(null)}
          onConfirm={confirmState.onConfirm}
        />
      )}

      <Toasts items={toasts} />
    </div>
  );
}

window.App = App;