import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export default function ServiceCard({ service, onEdit, onToggle, onDelete, onMoveUp, onMoveDown, isFirst, isLast }) {
    const modeBadge = service.booking_mode === 'timeslot'
        ? { label: __('Timeslot', 'appointly'), className: 'appointly-service-card__badge--timeslot' }
        : { label: __('Day', 'appointly'), className: 'appointly-service-card__badge--day' };

    const statusBadge = service.status === 'active'
        ? { label: __('Active', 'appointly'), className: 'appointly-service-card__badge--active' }
        : { label: __('Inactive', 'appointly'), className: 'appointly-service-card__badge--inactive' };

    const fieldCount = service.field_count ?? service.fields_count ?? 0;
    const addonCount = service.addon_count ?? service.addons_count ?? 0;

    return (
        <div className={`appointly-service-card${!service.status === 'active' ? ' appointly-service-card--inactive' : ''}`}>
            <div className="appointly-service-card__order">
                <Button
                    icon="arrow-up-alt2"
                    size="small"
                    disabled={isFirst}
                    onClick={() => onMoveUp(service.id)}
                    label={__('Move up', 'appointly')}
                />
                <Button
                    icon="arrow-down-alt2"
                    size="small"
                    disabled={isLast}
                    onClick={() => onMoveDown(service.id)}
                    label={__('Move down', 'appointly')}
                />
            </div>

            {service.image_url && (
                <div className="appointly-service-card__image">
                    <img src={service.image_url} alt={service.title} />
                </div>
            )}

            <div className="appointly-service-card__body">
                <div className="appointly-service-card__header">
                    <h3 className="appointly-service-card__title">{service.title}</h3>
                    <div className="appointly-service-card__badges">
                        <span className={`appointly-service-card__badge ${modeBadge.className}`}>
                            {modeBadge.label}
                        </span>
                        <span className={`appointly-service-card__badge ${statusBadge.className}`}>
                            {statusBadge.label}
                        </span>
                    </div>
                </div>

                {service.description && (
                    <p className="appointly-service-card__description">{service.description}</p>
                )}

                <div className="appointly-service-card__meta">
                    <span className="appointly-service-card__count">
                        <span className="dashicons dashicons-editor-table"></span>
                        {fieldCount} {__('Fields', 'appointly')}
                    </span>
                    <span className="appointly-service-card__count">
                        <span className="dashicons dashicons-plus-alt"></span>
                        {addonCount} {__('Addons', 'appointly')}
                    </span>
                </div>
            </div>

            <div className="appointly-service-card__actions">
                <Button
                    variant="secondary"
                    size="small"
                    onClick={() => onEdit(service.id)}
                >
                    {__('Edit', 'appointly')}
                </Button>
                <Button
                    variant="tertiary"
                    size="small"
                    onClick={() => onToggle(service.id, service.status !== 'active')}
                >
                    {service.status === 'active' ? __('Deactivate', 'appointly') : __('Activate', 'appointly')}
                </Button>
                <Button
                    isDestructive
                    variant="tertiary"
                    size="small"
                    onClick={() => onDelete(service.id, service.title)}
                >
                    {__('Delete', 'appointly')}
                </Button>
            </div>
        </div>
    );
}