"use client";

import { useEffect, useState } from "react";

import AppShell from "@/components/AppShell";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { api } from "@/lib/api";
import { useTranslation } from "@/lib/i18n";
import { useNotification } from "@/lib/notification-context";

type Notification = {
  id: string;
  triggerAt: string;
  status: string;
  channel: string;
  readAt?: string | null;
};

const NotificationsPage = () => {
  const t = useTranslation();
  const [notifications, setNotifications] = useState<Notification[]>([]);
  const { refreshUnreadCount } = useNotification();

  const load = async () => {
    const data = (await api.getNotifications()) as Notification[];
    setNotifications(data);
  };

  useEffect(() => {
    load().catch(() => null);
  }, []);

  const markRead = async (id: string) => {
    await api.markNotificationRead(id);
    await load();
    await refreshUnreadCount();
  };

  const markAllRead = async () => {
    await api.markAllNotificationsRead();
    await load();
    await refreshUnreadCount();
  };

  return (
    <AppShell>
      <Card>
        <CardHeader className="flex-row items-center justify-between space-y-0">
          <div>
            <CardTitle className="text-xl">{t("notifications")}</CardTitle>
            <CardDescription>{t("notificationsDesc")}</CardDescription>
          </div>
          <div className="flex items-center gap-2">
            <Input className="max-w-xs" placeholder={t("searchNotifications")} />
            {notifications.length > 0 && (
              <Button variant="outline" size="sm" onClick={markAllRead}>
                {t("markAllRead")}
              </Button>
            )}
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid gap-3">
            {notifications.map((item) => (
              <div
                key={item.id}
                className="flex items-center justify-between rounded-xl bg-muted/50 px-4 py-3 transition-colors hover:bg-muted"
              >
                <div>
                  <div className="text-sm font-semibold text-foreground">
                    {t("triggerTime")}：{new Date(item.triggerAt).toLocaleString()}
                  </div>
                  <div className="text-xs text-muted-foreground">{t("channel")}：{item.channel}</div>
                </div>
                <Button variant="outline" size="sm" onClick={() => markRead(item.id)}>
                  {t("markRead")}
                </Button>
              </div>
            ))}
            {notifications.length === 0 && (
              <div className="rounded-xl bg-muted/50 p-6 text-center text-sm text-muted-foreground">
                {t("noNotification")}
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </AppShell>
  );
};

export default NotificationsPage;
