"use client";

import React, { useEffect, useRef } from "react";
import { t } from "@/content/locales"; // Import der Locales

export interface LogEntry {
  id: string;
  message: string;
  type: "info" | "success" | "danger" | "warning";
  timestamp: string;
}

interface EventLogProps {
  logs: LogEntry[];
}

export default function EventLog({ logs }: EventLogProps) {
  const scrollRef = useRef<HTMLDivElement>(null);

  // Auto-Scroll nach unten bei neuen Einträgen
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [logs]);

  const getTypeStyles = (type: LogEntry["type"]) => {
    switch (type) {
      case "success":
        return "text-green-400";
      case "danger":
        return "text-red-500 font-bold animate-pulse";
      case "warning":
        return "text-orange-400";
      default:
        return "text-yellow-500/80";
    }
  };

  return (
    <div className="fixed bottom-6 right-6 w-full max-w-md h-48 bg-black/80 border border-yellow-500/30 rounded-lg shadow-2xl overflow-hidden flex flex-col backdrop-blur-md z-40">
      {/* Header */}
      <div className="bg-yellow-500/10 px-4 py-1 border-b border-yellow-500/20 flex justify-between items-center">
        <span className="text-[10px] font-mono text-yellow-500 uppercase tracking-widest">
          {t.EVENT_LOG.TITLE}
        </span>
      </div>

      {/* Scrollable Content */}
      <div
        ref={scrollRef}
        className="flex-1 overflow-y-auto p-4 font-mono text-sm scrollbar-thin scrollbar-thumb-yellow-500/20"
      >
        {logs.length === 0 && (
          <p className="text-yellow-500/20 italic text-xs">
            {t.EVENT_LOG.EMPTY_STATE}
          </p>
        )}
        {logs.map((log) => (
          <div
            key={log.id}
            className="mb-2 flex gap-3 border-l border-yellow-500/10 pl-2"
          >
            <span className="text-[10px] opacity-80 mt-1 shrink-0 text-white">
              {log.timestamp}
            </span>
            <span className={`${getTypeStyles(log.type)} leading-tight`}>
              {log.type === "danger" && "⚠ "}
              {log.message}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}