// Wall Street Watchdog AI - React Frontend
// Uses TailwindCSS, TradingView widget, and fetches from backend every 5 min

import React, { useEffect, useState } from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ReloadIcon } from "lucide-react";
import axios from 'axios';

const API_ENDPOINT = "/api/alerts"; // Your backend API route

export default function WatchdogApp() {
  const [alerts, setAlerts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [countdown, setCountdown] = useState(300);

  const fetchAlerts = async () => {
    setLoading(true);
    try {
      const res = await axios.get(API_ENDPOINT);
      setAlerts(res.data.alerts);
    } catch (err) {
      console.error("Error fetching alerts:", err);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchAlerts();
    const interval = setInterval(fetchAlerts, 300000); // Every 5 minutes
    const countdownInterval = setInterval(() => setCountdown((c) => (c > 0 ? c - 1 : 300)), 1000);
    return () => {
      clearInterval(interval);
      clearInterval(countdownInterval);
    };
  }, []);

  return (
    <div className="p-6 bg-black text-white min-h-screen">
      <h1 className="text-3xl font-bold mb-4">Wall Street Watchdog AI</h1>
      <div className="flex justify-between items-center mb-2">
        <p className="text-sm">Auto-refresh in {countdown}s</p>
        <Button onClick={fetchAlerts} disabled={loading}>
          {loading ? <ReloadIcon className="animate-spin" /> : "Refresh Now"}
        </Button>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        {alerts.map((alert, idx) => (
          <Card key={idx} className="bg-gray-900 border border-gray-700 rounded-2xl shadow-xl">
            <CardContent className="p-4">
              <p className="text-xl font-semibold">{alert.ticker} — {alert.action}</p>
              <p className="text-sm text-gray-400">{alert.source}</p>
              <p className="text-base mt-2">{alert.summary}</p>
              <div className="mt-4">
                <iframe
                  src={`https://s.tradingview.com/embed-widget/mini-symbol-overview/?symbol=${alert.ticker}&locale=en`}
                  width="100%"
                  height="100"
                  frameBorder="0"
                  allowTransparency
                  scrolling="no"
                />
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}