import { useState, useEffect, useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Button, Spinner, Notice } from '@wordpress/components';
import api from '../api/client';
import ServiceCard from '../components/ServiceCard';

export default function Services({ navigate }) {
    const [services, setServices] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [reordering, setReordering] = useState(false);

    const fetchServices = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            const data = await api.getServices();
            const list = Array.isArray(data) ? data : (data?.services || data?.items || []);
            // Sort by sort_order
            list.sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
            setServices(list);
        } catch (err) {
            setError(err?.message || __('Failed to load services.', 'appointly'));
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => {
        fetchServices();
    }, [fetchServices]);

    const handleEdit = (id) => {
        navigate(`/services/${id}`);
    };

    const handleToggle = async (id, active) => {
        try {
            await api.updateService(id, { status: active ? 'active' : 'inactive' });
            setServices((prev) =>
                prev.map((s) => (s.id === id ? { ...s, status: active ? 'active' : 'inactive' } : s))
            );
        } catch (err) {
            window.alert(err?.message || __('Failed to update service.', 'appointly'));
        }
    };

    const handleDelete = async (id, title) => {
        const confirmed = window.confirm(
            /* translators: %s: service title */
            __('Delete service "%s"? This cannot be undone.', 'appointly').replace('%s', title)
        );
        if (!confirmed) return;

        try {
            await api.deleteService(id);
            setServices((prev) => prev.filter((s) => s.id !== id));
        } catch (err) {
            window.alert(err?.message || __('Failed to delete service.', 'appointly'));
        }
    };

    const handleMoveUp = async (id) => {
        const idx = services.findIndex((s) => s.id === id);
        if (idx <= 0) return;
        const next = [...services];
        [next[idx - 1], next[idx]] = [next[idx], next[idx - 1]];
        setServices(next);
        await persistOrder(next);
    };

    const handleMoveDown = async (id) => {
        const idx = services.findIndex((s) => s.id === id);
        if (idx < 0 || idx >= services.length - 1) return;
        const next = [...services];
        [next[idx], next[idx + 1]] = [next[idx + 1], next[idx]];
        setServices(next);
        await persistOrder(next);
    };

    const persistOrder = async (ordered) => {
        setReordering(true);
        try {
            await api.reorderServices(ordered.map((s) => s.id));
        } catch (err) {
            console.error('Reorder failed:', err);
        } finally {
            setReordering(false);
        }
    };

    if (loading) {
        return (
            <div className="appointly-services-loading">
                <Spinner />
                <p>{__('Loading services...', 'appointly')}</p>
            </div>
        );
    }

    const handleNewService = () => {
        navigate('/services/new');
    };

    return (
        <div className="appointly-services">
            <div className="appointly-services__header">
                <h2>{__('Services', 'appointly')}</h2>
                <Button
                    variant="primary"
                    onClick={handleNewService}
                    icon="plus-alt2"
                >
                    {__('New Service', 'appointly')}
                </Button>
            </div>

            {error && (
                <Notice status="error" isDismissible onDismiss={() => setError(null)}>
                    {error}
                </Notice>
            )}

            {reordering && (
                <div className="appointly-services__reorder-notice">
                    <Spinner />
                    <span>{__('Saving order...', 'appointly')}</span>
                </div>
            )}

            {services.length === 0 ? (
                <div className="appointly-services__empty">
                    <span className="dashicons dashicons-admin-generic"></span>
                    <p>{__('No services yet. Create your first service to get started.', 'appointly')}</p>
                    <Button
                        variant="primary"
                        onClick={() => navigate('/services/new')}
                    >
                        {__('Create Service', 'appointly')}
                    </Button>
                </div>
            ) : (
                <div className="appointly-services__list">
                    {services.map((service, index) => (
                        <ServiceCard
                            key={service.id}
                            service={service}
                            onEdit={handleEdit}
                            onToggle={handleToggle}
                            onDelete={handleDelete}
                            onMoveUp={handleMoveUp}
                            onMoveDown={handleMoveDown}
                            isFirst={index === 0}
                            isLast={index === services.length - 1}
                        />
                    ))}
                </div>
            )}
        </div>
    );
}