"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

export type WireItem = { id: number; title: string; brief: string; ctime: number; level: string; importance: string; source: string };

const fallback: WireItem[] = [
  { id: 2443063, title: "低硫燃料油夜盘涨超3%", brief: "国内期货主力合约涨多跌少，能源化工品种表现活跃。", ctime: 1785510069, level: "C", importance: "一般", source: "财联社" },
  { id: 2443064, title: "OpenAI表示其模型覆盖超过10亿活跃用户", brief: "全球人工智能应用规模继续扩大。", ctime: 1785510361, level: "C", importance: "一般", source: "财联社" },
  { id: 2443066, title: "全国粮食和物资储备工作推进会在京召开", brief: "会议强调粮食收储调控、产业发展和应急物资保障。", ctime: 1785510671, level: "C", importance: "重要", source: "财联社" },
];

export function NewsWire({ compact = false }: { compact?: boolean }) {
  const [items, setItems] = useState<WireItem[]>(fallback);
  const [status, setStatus] = useState("正在连接财联社公开快讯…");
  useEffect(() => {
    fetch("/api/news", { cache: "no-store" })
      .then((response) => response.ok ? response.json() : Promise.reject(new Error("network")))
      .then((data) => { if (data.items?.length) setItems(data.items); setStatus(data.fallback ? "实时源暂不可用 · 显示最近缓存" : "财联社公开快讯 · 自动刷新"); })
      .catch(() => setStatus("实时源暂不可用 · 显示最近缓存"));
  }, []);
  const shown = compact ? items.slice(0, 6) : items.slice(0, 16);
  return <section className={`wire ${compact ? "wire-compact" : "wire-full"}`}>
    <div className="section-head"><div><span className="kicker">LIVE MARKET WIRE</span><h2>财经快讯</h2></div><span className="source-status"><i />{status}</span></div>
    <div className="wire-list">{shown.map((item) => <article className="wire-item" key={item.id}>
      <time>{new Date(item.ctime * 1000).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: "Asia/Shanghai" })}</time>
      <span className={`importance ${item.importance === "重要" ? "major" : ""}`}>{item.importance}</span>
      <div><Link href={`/news/${item.id}`}>{item.title || item.brief.slice(0, 34)}</Link>{!compact && <p>{item.brief}</p>}</div>
    </article>)}</div>
    {compact && <Link className="text-link" href="/news">查看全部快讯 →</Link>}
  </section>;
}