"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import headerData from "./header.json";

interface HeaderData {
    top: {
        phone: string;
        email: string;
        location: string;
        socialLinks: Array<{
            platform: string;
            url: string;
            icon: string;
        }>;
        languages: Array<{
            name: string;
            value: string;
        }>;
    };
}

const HeaderTop = () => {
    const [data, setData] = useState<HeaderData>(headerData);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchHeaderData = async () => {
            try {
                const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
                const response = await fetch(`${apiUrl}/api/header`);

                if (response.ok) {
                    const result = await response.json();
                    if (result.success && result.data && result.data.top) {
                        setData({
                            top: result.data.top,
                        });
                    }
                }
            } catch (error) {
                console.warn("Failed to fetch header data from API, using fallback:", error);
                // Use fallback data (already set as initial state)
            } finally {
                setLoading(false);
            }
        };

        fetchHeaderData();
    }, []);

    const { phone, email, location, socialLinks, languages } = data.top;

    return (
        <div className="header-top-section">
            <div className="container-fluid">
                <div className="header-top-wrapper">
                    <div className="header-left">
                        <ul className="list d-flex align-items-center mb-0 p-0 list-unstyled">
                            <li className="style-2 d-flex align-items-center me-4">
                                <span className="me-2">Help Line</span>
                                <i className="fa-solid fa-phone me-2"></i>
                                <a href={`tel:${phone.replace(/\s/g, "")}`}>{phone}</a>
                            </li>

                            <li className="d-flex align-items-center me-4">
                                <i className="fa-solid fa-location-dot me-2"></i>
                                {location}
                            </li>

                            <li className="d-flex align-items-center">
                                <i className="fa-solid fa-envelope me-2"></i>
                                <a href={`mailto:${email}`}>{email}</a>
                            </li>
                        </ul>
                    </div>

                    <div className="header-right">
                        <div className="flag-wrap">
                            <div className="flag">
                                <i className="fa-solid fa-globe"></i>
                            </div>
                            <div className="nice-select" tabIndex={0}>
                                <span className="current">{languages[0]?.name || "English"}</span>
                                <ul className="list">
                                    {languages.map((lang, index) => (
                                        <li
                                            key={index}
                                            data-value={lang.value}
                                            className={`option ${index === 0 ? "selected focus" : ""}`}
                                        >
                                            {lang.name}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                        <div className="social-item">
                            {socialLinks.map((social, index) => (
                                <a key={index} href={social.url} target="_blank" rel="noopener noreferrer">
                                    <i className={social.icon}></i>
                                </a>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default HeaderTop;