import { useState } from 'react';
import { Droplet, Salad, Bug, Eye, X } from 'lucide-react';
import { touchPointsApi, TouchType } from '../../lib/touchPointsApi';
import { useToast } from '../../context/ToastContext';

interface QuickLogButtonsProps {
    batchId: string;
    batchName: string;
    onSuccess?: () => void;
}

const QUICK_ACTIONS: { type: TouchType; label: string; icon: typeof Droplet; color: string }[] = [
    { type: 'WATER', label: 'Water', icon: Droplet, color: 'bg-[var(--color-accent)] hover:bg-blue-600' },
    { type: 'FEED', label: 'Feed', icon: Salad, color: 'bg-[var(--color-primary)] hover:bg-[var(--color-primary)]' },
    { type: 'IPM', label: 'IPM', icon: Bug, color: 'bg-red-500 hover:bg-red-600' },
    { type: 'INSPECT', label: 'Inspect', icon: Eye, color: 'bg-purple-500 hover:bg-purple-600' },
];

export function QuickLogButtons({ batchId, batchName, onSuccess }: QuickLogButtonsProps) {
    const { addToast } = useToast();
    const [loading, setLoading] = useState<TouchType | null>(null);

    const handleQuickLog = async (type: TouchType) => {
        setLoading(type);
        try {
            await touchPointsApi.create({
                batchId,
                type,
                notes: `Quick ${type.toLowerCase()} logged`
            });
            addToast(`${type} logged for ${batchName}`, 'success');
            onSuccess?.();
        } catch (e) {
            console.error(e);
            addToast(`Failed to log ${type}`, 'error');
        } finally {
            setLoading(null);
        }
    };

    return (
        <div className="flex gap-1">
            {QUICK_ACTIONS.map(action => {
                const Icon = action.icon;
                const isLoading = loading === action.type;

                return (
                    <button
                        key={action.type}
                        onClick={(e) => {
                            e.stopPropagation();
                            handleQuickLog(action.type);
                        }}
                        disabled={isLoading}
                        className={`p-2 rounded-lg text-white transition-colors ${action.color} disabled:opacity-50`}
                        title={action.label}
                    >
                        <Icon size={16} className={isLoading ? 'animate-pulse' : ''} />
                    </button>
                );
            })}
        </div>
    );
}

// Inline quick log bar for batch cards
interface QuickLogBarProps {
    batchId: string;
    batchName: string;
    onSuccess?: () => void;
    compact?: boolean;
}

export function QuickLogBar({ batchId, batchName, onSuccess, compact = false }: QuickLogBarProps) {
    const { addToast } = useToast();
    const [loading, setLoading] = useState<TouchType | null>(null);
    const [expanded, setExpanded] = useState(false);

    const handleQuickLog = async (type: TouchType) => {
        setLoading(type);
        try {
            await touchPointsApi.create({
                batchId,
                type,
                notes: `Quick ${type.toLowerCase()} logged`
            });
            addToast(`${type} logged for ${batchName}`, 'success');
            onSuccess?.();
            setExpanded(false);
        } catch (e) {
            console.error(e);
            addToast(`Failed to log ${type}`, 'error');
        } finally {
            setLoading(null);
        }
    };

    if (compact && !expanded) {
        return (
            <button
                onClick={(e) => {
                    e.stopPropagation();
                    setExpanded(true);
                }}
                className="text-xs text-[var(--color-primary)] dark:text-emerald-400 hover:underline"
            >
                Quick Log
            </button>
        );
    }

    return (
        <div className="flex items-center gap-1 bg-[var(--color-bg-tertiary)] rounded-lg p-1">
            {QUICK_ACTIONS.map(action => {
                const Icon = action.icon;
                const isLoading = loading === action.type;

                return (
                    <button
                        key={action.type}
                        onClick={(e) => {
                            e.stopPropagation();
                            handleQuickLog(action.type);
                        }}
                        disabled={isLoading}
                        className={`p-1.5 rounded text-white transition-all ${action.color} disabled:opacity-50 text-xs flex items-center gap-1`}
                        title={action.label}
                    >
                        <Icon size={14} className={isLoading ? 'animate-spin' : ''} />
                        {!compact && <span className="hidden sm:inline">{action.label}</span>}
                    </button>
                );
            })}
            {compact && expanded && (
                <button
                    onClick={(e) => {
                        e.stopPropagation();
                        setExpanded(false);
                    }}
                    className="p-1 text-[var(--color-text-tertiary)] hover:text-slate-600"
                >
                    <X size={14} />
                </button>
            )}
        </div>
    );
}
