'use client'

import React, { useState, useEffect } from 'react'
import { RegulatoryNewsCard, RegulatoryNewsItemData } from './RegulatoryNewsCard'

interface RegulatoryNewsFeedProps {
  businessModel?: string
  maxItems?: number
}

export function RegulatoryNewsFeed({ businessModel, maxItems = 3 }: RegulatoryNewsFeedProps) {
  const [items, setItems] = useState<RegulatoryNewsItemData[]>([])
  const [loading, setLoading] = useState(true)
  const [showAll, setShowAll] = useState(false)

  useEffect(() => {
    const params = new URLSearchParams({ limit: '10', horizon_days: '365' })
    if (businessModel) params.set('business_model', businessModel)

    fetch(`/api/sdk/v1/regulatory-news?${params}`)
      .then(r => r.ok ? r.json() : { items: [] })
      .then(data => setItems(data.items || []))
      .catch(() => setItems([]))
      .finally(() => setLoading(false))
  }, [businessModel])

  if (loading) return null
  if (items.length === 0) return null

  const visible = showAll ? items : items.slice(0, maxItems)

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
          <span>📢</span> Regulatorische Neuigkeiten
        </h2>
        {items.length > maxItems && (
          <button
            onClick={() => setShowAll(!showAll)}
            className="text-sm text-blue-600 hover:underline"
          >
            {showAll ? 'Weniger' : `Alle ${items.length} anzeigen`}
          </button>
        )}
      </div>
      <div className="space-y-2">
        {visible.map(item => (
          <RegulatoryNewsCard key={item.id} item={item} />
        ))}
      </div>
    </div>
  )
}