import { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";
import { ArrowUpCircle, ArrowDownCircle, RefreshCw } from "lucide-react";
import { motion } from "framer-motion";

export default function CryptoSentimentDashboard() {
  const [sentimentData, setSentimentData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [history, setHistory] = useState([]);

  useEffect(() => {
    fetchSentiment();
    const interval = setInterval(fetchSentiment, 60000); // Auto-refresh every 60 sec
    return () => clearInterval(interval);
  }, []);

  const fetchSentiment = async () => {
    try {
      const response = await fetch("https://www.dgtechnologies.co.za/news-sentiment.php");
      const data = await response.json();
      setSentimentData(data);
      setLoading(false);
      setHistory((prev) => [...prev.slice(-10), { time: new Date().toLocaleTimeString(), bullish: data.bullish_votes, bearish: data.bearish_votes }]);
    } catch (error) {
      console.error("Error fetching sentiment:", error);
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
      <motion.h1
        className="text-4xl font-bold text-blue-400 mb-6"
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        Crypto Sentiment Dashboard
      </motion.h1>

      <Card className="bg-gray-800 text-white p-6 w-full max-w-lg shadow-xl rounded-xl">
        <CardContent>
          <motion.h2
            className="text-2xl font-semibold text-center mb-4"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.3 }}
          >
            XRP Sentiment
          </motion.h2>

          {loading ? (
            <p className="text-center text-gray-400">Loading...</p>
          ) : (
            <div className="flex flex-col items-center">
              <div className="flex items-center gap-4 mb-4">
                <ArrowUpCircle className="text-green-400" size={32} />
                <span className="text-xl font-bold">{sentimentData?.bullish_votes} Bullish</span>
              </div>
              <div className="flex items-center gap-4 mb-4">
                <ArrowDownCircle className="text-red-400" size={32} />
                <span className="text-xl font-bold">{sentimentData?.bearish_votes} Bearish</span>
              </div>
              <motion.p
                className={`text-lg font-semibold ${sentimentData?.sentiment === "Bullish" ? "text-green-400" : "text-red-400"}`}
                initial={{ scale: 0.8 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.3 }}
              >
                Overall Sentiment: {sentimentData?.sentiment}
              </motion.p>
            </div>
          )}
          <Button className="mt-6 bg-blue-500 hover:bg-blue-600 w-full flex items-center justify-center gap-2" onClick={fetchSentiment}>
            <RefreshCw size={18} />
            Refresh Data
          </Button>
        </CardContent>
      </Card>

      {/* Sentiment Over Time Chart */}
      <div className="mt-10 w-full max-w-2xl">
        <h2 className="text-xl font-semibold text-center mb-4">Sentiment Over Time</h2>
        <LineChart width={500} height={300} data={history} className="bg-gray-800 p-4 rounded-lg shadow-xl">
          <CartesianGrid strokeDasharray="3 3" stroke="gray" />
          <XAxis dataKey="time" stroke="white" />
          <YAxis stroke="white" />
          <Tooltip />
          <Line type="monotone" dataKey="bullish" stroke="green" strokeWidth={2} />
          <Line type="monotone" dataKey="bearish" stroke="red" strokeWidth={2} />
        </LineChart>
      </div>
    </div>
  );
}