"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { ADMIN_REFRESH_EVENT } from '@/components/admin-nav';

interface ErrorLogRow {
  id: number;
  created_at: string;
  source: string;
  message: string;
  context: string | null;
  url: string | null;
  user_agent: string | null;
  session_code: string | null;
}

type SourceFilter = 'all' | 'client' | 'server';

const PAGE_SIZE = 50;

function formatTimestamp(iso: string): string {
  return new Date(iso + 'Z').toLocaleString('de-DE', { dateStyle: 'short', timeStyle: 'medium' });
}

export default function AdminErrorsPage() {
  const router = useRouter();
  const [errors, setErrors] = useState<ErrorLogRow[]>([]);
  const [total, setTotal] = useState(0);
  const [totals, setTotals] = useState<{ all: number; client: number; server: number }>({ all: 0, client: 0, server: 0 });
  const [source, setSource] = useState<SourceFilter>('all');
  const [loading, setLoading] = useState(true);
  const [expandedId, setExpandedId] = useState<number | null>(null);
  const [clearing, setClearing] = useState(false);

  async function loadErrors(append: boolean, nextSource: SourceFilter = source) {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      if (nextSource !== 'all') params.set('source', nextSource);
      params.set('limit', String(PAGE_SIZE));
      params.set('offset', append ? String(errors.length) : '0');
      const res = await fetch(`/api/admin/errors?${params.toString()}`);
      if (res.status === 401) {
        router.push('/admin');
        return;
      }
      if (!res.ok) return;
      const data = await res.json();
      setErrors((prev) => (append ? [...prev, ...data.errors] : data.errors));
      setTotal(data.total ?? 0);
      setTotals(data.totals ?? { all: 0, client: 0, server: 0 });
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => { loadErrors(false, source); }, [source]);

  useEffect(() => {
    const handleRefresh = () => loadErrors(false);
    window.addEventListener(ADMIN_REFRESH_EVENT, handleRefresh);
    return () => window.removeEventListener(ADMIN_REFRESH_EVENT, handleRefresh);
  }, [source]);

  async function handleClearAll() {
    if (!confirm('Wirklich ALLE Fehler-Einträge unwiderruflich löschen?')) return;
    setClearing(true);
    try {
      await fetch('/api/admin/errors', { method: 'DELETE' });
      setErrors([]);
      setTotal(0);
      setTotals({ all: 0, client: 0, server: 0 });
    } finally {
      setClearing(false);
    }
  }

  const filterCount = source === 'all' ? totals.all : source === 'client' ? totals.client : totals.server;
  const hasMore = errors.length < total;

  return (
    <div className="p-6 lg:p-8 pb-24">
      <div className="max-w-4xl mx-auto">
        <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
          <p className="text-adminmuted text-sm max-w-2xl">
            Fehler, die bei echten Nutzer:innen im Browser aufgetreten sind (letzte 30 Tage).
            Hilft, echte Probleme zu entdecken, die sonst nur in der Konsole des jeweiligen Geräts verschwinden würden.
          </p>
          <button
            onClick={handleClearAll}
            disabled={clearing || totals.all === 0}
            className="shrink-0 text-sm font-semibold text-admindanger border border-admindanger/30 bg-admindanger/5 hover:bg-admindanger/10 rounded-lg px-4 py-2 transition-colors disabled:opacity-40"
          >
            {clearing ? 'Lösche...' : 'Alle löschen'}
          </button>
        </div>

        <div className="flex gap-3 mb-6">
          <div className="glass px-4 py-3 flex-1">
            <p className="text-xs text-adminmuted uppercase tracking-wide font-bold">Gesamt</p>
            <p className="text-2xl font-bold text-admintext mt-1">{totals.all}</p>
          </div>
          <div className="glass px-4 py-3 flex-1">
            <p className="text-xs text-adminmuted uppercase tracking-wide font-bold">Client</p>
            <p className="text-2xl font-bold text-yumder-pink mt-1">{totals.client}</p>
          </div>
          <div className="glass px-4 py-3 flex-1">
            <p className="text-xs text-adminmuted uppercase tracking-wide font-bold">Server</p>
            <p className="text-2xl font-bold text-[#4dabf7] mt-1">{totals.server}</p>
          </div>
        </div>

        <div className="flex items-center gap-2 mb-4">
          {(['all', 'client', 'server'] as const).map((option) => (
            <button
              key={option}
              onClick={() => setSource(option)}
              className={`text-xs font-semibold px-3 py-1.5 rounded-full border transition-colors ${
                source === option
                  ? 'bg-yumder-pink text-white border-yumder-pink'
                  : 'text-adminmuted border-adminborder hover:text-admintext'
              }`}
            >
              {option === 'all' ? 'Alle' : option === 'client' ? 'Client' : 'Server'}
            </button>
          ))}
          <span className="text-xs text-adminmuted ml-auto">
            {errors.length} von {filterCount} Einträgen
          </span>
        </div>

        {loading && errors.length === 0 ? (
          <p className="text-adminmuted text-sm">Lade Fehler-Log...</p>
        ) : errors.length === 0 ? (
          <div className="glass p-8 text-center">
            <p className="text-adminmuted text-sm">Keine Fehler protokolliert.</p>
          </div>
        ) : (
          <>
            <div className="glass p-0 overflow-hidden">
              <ul className="list-none p-0 m-0 divide-y divide-adminborder">
                {errors.map((err) => {
                  const isExpanded = expandedId === err.id;
                  return (
                    <li key={err.id}>
                      <button
                        onClick={() => setExpandedId(isExpanded ? null : err.id)}
                        className="w-full text-left px-5 py-3.5 hover:bg-adminbg/60 transition-colors"
                      >
                        <div className="flex items-center gap-2 mb-1 flex-wrap">
                          <span
                            className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded-full ${
                              err.source === 'client'
                                ? 'bg-yumder-pink/10 text-yumder-pink'
                                : 'bg-[#4dabf7]/10 text-[#4dabf7]'
                            }`}
                          >
                            {err.source}
                          </span>
                          <span className="text-xs text-adminmuted">{formatTimestamp(err.created_at)}</span>
                          {err.session_code && (
                            <span className="text-xs text-adminmuted font-mono">· {err.session_code}</span>
                          )}
                        </div>
                        <p className="text-sm text-admintext font-medium truncate">{err.message}</p>
                      </button>
                      {isExpanded && (
                        <div className="px-5 pb-4 -mt-1">
                          {err.url && (
                            <p className="text-xs text-adminmuted mb-1 break-all">URL: {err.url}</p>
                          )}
                          {err.user_agent && (
                            <p className="text-xs text-adminmuted mb-1 break-all">Browser: {err.user_agent}</p>
                          )}
                          {err.context && (
                            <pre className="text-xs bg-adminbg rounded-lg p-3 mt-2 overflow-x-auto whitespace-pre-wrap text-admintext">
                              {err.context}
                            </pre>
                          )}
                        </div>
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>
            {hasMore && (
              <button
                onClick={() => loadErrors(true)}
                disabled={loading}
                className="mt-4 w-full text-sm font-semibold text-admintext border border-adminborder rounded-lg px-4 py-2.5 hover:bg-adminbg transition-colors disabled:opacity-40"
              >
                {loading ? 'Lade...' : 'Mehr laden'}
              </button>
            )}
          </>
        )}
      </div>
    </div>
  );
}