'use client';

import AuthLayout from '@/components/layout/layout';
import React, { useEffect, useState } from 'react';
import authBanner from '@/assets/images/AuthImages/menu.png';
import apis from '@/utils/apis';
import { useRouter } from 'next/navigation';

type ServiceType = {
    _id: string;
    name: string;
    description?: string;
};

const HomeCooked = () => {
    const [services, setServices] = useState<ServiceType[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string>('');
    const router = useRouter();

    useEffect(() => {
        const fetchServices = async () => {
            try {
                const response = await apis.restaurant.getHomeCookedServices();
                setServices(response?.data || []);
            } catch (err) {
                setError('Failed to load services.');
            } finally {
                setLoading(false);
            }
        };

        fetchServices();
    }, []);

    const handleServiceClick = (service: ServiceType) => {
        const mealType = service.name.toLowerCase();
        if (['breakfast', 'lunch', 'dinner'].includes(mealType)) {
            router.push(`/auth/menu/add-item-homecooked?mealType=${mealType}&id=${service._id}`);
        }
    };

    const getMealIcon = (serviceName: string) => {
        const name = serviceName.toLowerCase();
        switch (name) {
            case 'breakfast':
                return '🌅';
            case 'lunch':
                return '🍽️';
            case 'dinner':
                return '🌙';
            default:
                return '🍳';
        }
    };

    if (loading) return <div className="flex justify-center items-center h-32">Loading services...</div>;
    if (error) return <div className="text-red-500 text-center">{error}</div>;

    return (
        <div className="space-y-4">
            {services.map((service) => (
                <div
                    key={service._id}
                    onClick={() => handleServiceClick(service)}
                    className="rounded-lg border p-4 shadow-sm hover:bg-gray-50 cursor-pointer transition-all duration-200 hover:shadow-md border-gray-200"
                >
                    <div className="flex items-center space-x-3">
                        <span className="text-2xl">{getMealIcon(service.name)}</span>
                        <div className="flex-1">
                            <h3 className="text-lg font-semibold text-gray-800">{service.name}</h3>
                            {service.description && (
                                <p className="text-sm text-gray-600 mt-1">{service.description}</p>
                            )}
                        </div>
                        <div className="text-gray-400">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                            </svg>
                        </div>
                    </div>
                </div>
            ))}

            {services.length === 0 && !loading && (
                <div className="text-center py-8">
                    <p className="text-gray-500">No services available at the moment.</p>
                </div>
            )}

            {/* Get Started Button - Alternative navigation */}
            <div className="mt-8">
                <button
                    onClick={() => router.push('/home-cooked/breakfast')}
                    className="w-full rounded-md bg-[var(--primary-brand)] px-4 py-3 text-center text-sm font-semibold text-black hover:bg-yellow-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2"
                >
                    Get Started
                </button>
            </div>
        </div>
    );
};

export default function HomeCookedPage() {
    return (
        <AuthLayout
            title="Add your home-cooked Service"
            des="Access your account or create a new one."
            image={authBanner.src}
        >
            <HomeCooked />
        </AuthLayout>
    );
}