"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { api } from "@/lib/api";
import { useAuth } from "@/lib/auth";
import { useI18n } from "@/lib/i18n";
import type { NotificationItem } from "@/lib/types";

export default function NotificationsClient() {
  const { token } = useAuth();
  const { t } = useI18n();
  const [items, setItems] = useState<NotificationItem[]>([]);

  useEffect(() => {
    if (!token) return;
    api.getNotifications(token).then(setItems).catch(() => setItems([]));
  }, [token]);

  const markAll = async () => {
    if (!token) return;
    await api.markNotificationsRead(token);
    setItems((list) => list.map((n) => ({ ...n, read: true })));
  };

  if (!token) {
    return (
      <div className="chat-page"><div className="container">
        <Link href="/login?next=/notifications" className="btn btn-primary">{t.nav.login}</Link>
      </div></div>
    );
  }

  return (
    <div className="chat-page">
      <div className="container">
        <div className="section-header reveal">
          <h1>{t.notifications.title}</h1>
          <div className="notif-toolbar">
            <button type="button" className="btn btn-sm" onClick={markAll}>{t.notifications.markRead}</button>
            <Link href="/settings/notifications" className="btn btn-sm">{t.notifSettings.title}</Link>
          </div>
        </div>
        <div className="chat-list">
          {items.map((n) => (
            <div key={n.id} className={`chat-list-item reveal${n.read ? "" : " unread"}`}>
              <div><strong>{n.title}</strong><p>{n.body}</p><small>{n.created_at}</small></div>
              {n.link && <Link href={n.link}>{t.common.open}</Link>}
            </div>
          ))}
          {items.length === 0 && <p className="dest-empty">{t.notifications.empty}</p>}
        </div>
      </div>
    </div>
  );
}