// src/components/StatsPanel.jsx
import React, { useState, useEffect } from 'react';
// ถ้าจะใช้ Chart.js สำหรับกราฟ ให้ติดตั้งและ import:
// npm install react-chartjs-2 chart.js
// import { Line } from 'react-chartjs-2';
// import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
// ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

export default function StatsPanel({ title, data, isActive, youtubeVideoId }) {
    const [fetchedData, setFetchedData] = useState(data); // ใช้ state เพื่อเก็บข้อมูลที่อาจจะ fetch มา
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    const panelClasses = `
        card w-80 shadow-2xl z-10 p-6
        transition-all duration-500 ease-in-out transform
        ${isActive ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-full pointer-events-none'}
        ${isActive ? 'glass bg-base-200 text-base-content' : ''}
    `;

    // useEffect สำหรับดึงข้อมูลจาก API
    useEffect(() => {
        const fetchDataFromAPI = async () => {
            setLoading(true);
            setError(null);
            if (title === 'NEXT DOLLAR CURRENCIES') {
                try {
                    // ตัวอย่าง API สำหรับอัตราแลกเปลี่ยน (อาจมีการเปลี่ยนแปลงหรือข้อจำกัด)
                    // base = USD, symbols = EUR, JPY, GBP, CNY, INR
                    const response = await fetch('https://api.exchangerate.host/latest?base=USD&symbols=EUR,JPY,GBP,CNY,INR');
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    const result = await response.json();
                    if (result.rates) {
                        const newCurrencies = [
                            { label: 'USD/EUR', value: result.rates.EUR ? result.rates.EUR.toFixed(4) : 'N/A', trend: 'same' }, // ไม่มีข้อมูล trend จาก API โดยตรง
                            { label: 'USD/JPY', value: result.rates.JPY ? result.rates.JPY.toFixed(2) : 'N/A', trend: 'same' },
                            { label: 'USD/GBP', value: result.rates.GBP ? result.rates.GBP.toFixed(4) : 'N/A', trend: 'same' },
                            { label: 'USD/CNY', value: result.rates.CNY ? result.rates.CNY.toFixed(3) : 'N/A', trend: 'same' },
                            { label: 'USD/INR', value: result.rates.INR ? result.rates.INR.toFixed(2) : 'N/A', trend: 'same' },
                        ];
                        setFetchedData(newCurrencies);
                    } else {
                        setError("No rates data found in API response.");
                        setFetchedData(data); // Fallback to original mock data
                    }
                } catch (e) {
                    console.error("Failed to fetch currency data:", e);
                    setError("Failed to load currency data. Please try again later.");
                    setFetchedData(data); // Fallback to original mock data
                } finally {
                    setLoading(false);
                }
            }
                // สำหรับ Title อื่นๆ เช่น 'MARKET REVIEW' ที่ไม่มี API ที่ง่ายและเสถียร
            // อาจจะใช้ข้อมูล mock data ที่ส่งมาใน prop 'data' หรือ fetch จาก API อื่นๆ ที่มี Key ของคุณ
            else {
                setFetchedData(data); // ใช้ข้อมูลที่ส่งมาใน prop 'data' เป็นค่าเริ่มต้น
                setLoading(false);
            }
        };

        if (isActive) { // ดึงข้อมูลเฉพาะเมื่อ Panel Active เพื่อประหยัดทรัพยากร
            fetchDataFromAPI();
            // อาจจะตั้ง interval เพื่ออัปเดตข้อมูลทุกๆ X วินาที
            const interval = setInterval(fetchDataFromAPI, 60000); // อัปเดตทุก 60 วินาที
            return () => clearInterval(interval);
        }
    }, [title, isActive, data]); // เพิ่ม data ใน dependency array เพื่อให้ effect ทำงานเมื่อ data เปลี่ยน

    return (
        <div className={panelClasses}>
            <h3 className="card-title text-lg font-bold mb-4 uppercase tracking-wide">{title}</h3>

            {/* แสดงข้อมูลที่ fetch มา หรือข้อมูล mock */}
            {loading ? (
                <div className="flex justify-center items-center h-24">
                    <span className="loading loading-spinner text-primary"></span>
                    <p className="ml-2">Loading data...</p>
                </div>
            ) : error ? (
                <div className="text-error text-center h-24 flex items-center justify-center">
                    <p>{error}</p>
                </div>
            ) : (
                <>
                    {fetchedData && fetchedData.map && fetchedData.map((item, index) => (
                        <div key={index} className="flex justify-between items-center text-sm border-b border-base-content/20 pb-2 last:border-b-0 last:pb-0">
                            <span>{item.label}</span>
                            <div className="flex items-center space-x-2">
                                <span className="font-semibold text-white">{item.value}</span>
                                {item.trend === 'up' && <span className="text-success text-xs">▲</span>}
                                {item.trend === 'down' && <span className="text-error text-xs">▼</span>}
                                {item.trend === 'same' && <span className="text-neutral-content/50 text-xs">━</span>}
                            </div>
                        </div>
                    ))}
                </>
            )}

            {/* ส่วนสำหรับ YouTube Video Embed */}
            {youtubeVideoId && (
                <div className="mt-4 aspect-video w-full"> {/* aspect-video ให้สัดส่วน 16:9 */}
                    <iframe
                        className="w-full h-full rounded-lg"
                        src={`https://www.youtube.com/embed/${youtubeVideoId}?autoplay=0&modestbranding=1&rel=0`}
                        title="YouTube video player"
                        frameBorder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                    ></iframe>
                </div>
            )}

            {/* ส่วนสำหรับกราฟ (ถ้าต้องการ) - ตัวอย่างสำหรับ Chart.js */}
            {/*
            {title === "MARKET REVIEW" && fetchedData && fetchedData.chartData && ( // ใช้ fetchedData
                <div className="mt-4 h-24">
                    <Line data={fetchedData.chartData} options={defaultChartOptions} />
                </div>
            )}
            */}
        </div>
    );
}