"use client";

import { useLocale, useTranslations } from 'next-intl';
import Link from 'next/link';
import { MapPin } from 'lucide-react';
import { useEffect, useState } from 'react';

interface Branch {
    id: string;
    city_code?: string;
    city_name: string;
    address: string;
    email: string;
    whatsapp: string;
    phone: string;
}

export default function StoresPage() {
    const locale = useLocale();
    const t = useTranslations('stores');
    const [branches, setBranches] = useState<Branch[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function fetchBranches() {
            try {
                const res = await fetch(`/api/extra/branchlist?locale=${locale}`);
                const data = await res.json();
                if (data && data.success && Array.isArray(data.data)) {
                    setBranches(data.data);
                }
            } catch (error) {
                console.error("Error fetching branches:", error);
            } finally {
                setLoading(false);
            }
        }
        fetchBranches();
    }, [locale]);

    return (
        <div className="bg-background-light dark:bg-background-dark text-text-main-light dark:text-text-main-dark font-cairo min-h-screen transition-colors duration-300">


            <div className="max-w-6xl mx-auto px-4 py-8 md:py-12">
                {/* Breadcrumb */}
                <div className="flex justify-start items-center mb-12 text-sm text-text-muted-light dark:text-text-muted-dark">
                    <nav className="flex items-center gap-2">
                        <Link href={`/${locale}/home`} className="hover:text-stores-primary transition-colors">
                            {t('home')}
                        </Link>
                        <span className="text-xs">&gt;</span>
                        <span className="font-bold text-text-main-light dark:text-text-main-dark">{t('branches')}</span>
                    </nav>
                </div>

                {/* Branches List */}
                <div className="space-y-10">
                    {loading ? (
                        <div className="flex justify-center items-center py-20">
                            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-stores-primary"></div>
                        </div>
                    ) : (
                    branches.map((branch) => (
                        <div key={branch.id} className="group">
                            <h2 className="text-xl md:text-2xl font-bold mb-4 text-text-main-light dark:text-white text-start">
                                {branch.city_name}
                            </h2>
                            <div className="bg-gray-50 dark:bg-surface-dark rounded-xl p-6 shadow-sm border border-transparent dark:border-gray-700 hover:shadow-md transition-shadow duration-200">
                                <div className="flex flex-col md:flex-row items-center justify-between gap-4 md:gap-0">
                                    <div className="flex-1 w-full md:w-auto flex flex-col items-center justify-center text-center px-2">
                                        <span className="text-text-muted-light dark:text-text-muted-dark font-medium">
                                            {branch.address}
                                        </span>
                                    </div>
                                    <div className="hidden md:block w-px h-12 bg-gray-300 dark:bg-gray-600 mx-2"></div>
                                    <div className="flex-1 w-full md:w-auto flex flex-col items-center justify-center text-center px-2">
                                        <span className="block text-text-main-light dark:text-white font-bold text-sm mb-1">
                                            {t('email')}
                                        </span>
                                        <a className="text-stores-primary text-sm hover:underline" href={`mailto:${branch.email}`}>
                                            {branch.email}
                                        </a>
                                    </div>
                                    <div className="hidden md:block w-px h-12 bg-gray-300 dark:bg-gray-600 mx-2"></div>
                                    <div className="flex-1 w-full md:w-auto flex flex-col items-center justify-center text-center px-2">
                                        <span className="block text-text-main-light dark:text-white font-bold text-sm mb-1">
                                            {t('whatsapp')}
                                        </span>
                                        <a className="text-stores-primary text-sm font-medium" dir="ltr" href={`https://wa.me/${branch.whatsapp.replace('+', '')}`}>
                                            {branch.whatsapp}
                                        </a>
                                    </div>
                                    <div className="hidden md:block w-px h-12 bg-gray-300 dark:bg-gray-600 mx-2"></div>
                                    <div className="flex-1 w-full md:w-auto flex flex-col items-center justify-center text-center px-2">
                                        <span className="block text-text-main-light dark:text-white font-bold text-sm mb-1">
                                            {t('phone')}
                                        </span>
                                        <a className="text-stores-primary text-sm font-medium" dir="ltr" href={`tel:${branch.phone}`}>
                                            {branch.phone}
                                        </a>
                                    </div>
                                    <div className="hidden md:block w-px h-12 bg-gray-300 dark:bg-gray-600 mx-2"></div>
                                    <a 
                                        href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(branch.address + " " + branch.city_name)}`}
                                        target="_blank" 
                                        rel="noopener noreferrer" 
                                        className="w-full md:w-24 flex flex-col items-center justify-center hover:opacity-80 transition-opacity cursor-pointer"
                                        title={t('view-map')}
                                    >
                                        <MapPin className="w-8 h-8 text-stores-primary opacity-80" />
                                        <span className="text-[10px] text-stores-primary font-bold mt-1">{t('view-map')}</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    )))}
                </div>
            </div>


        </div>
    );
}