import React, { useState, useContext } from 'react';
import { pb } from '../../lib/pocketbase';
import { LanguageContext } from '../../contexts/LanguageContext';

const RedeemForm = ({ onRedeem }) => {
    const { t } = useContext(LanguageContext);
    const [amount, setAmount] = useState('');
    const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
    const [loading, setLoading] = useState(false);

    const handleRedeem = async (e) => {
        e.preventDefault();
        setLoading(true);

        const hoursToDeduct = parseFloat(amount);
        if (hoursToDeduct <= 0) return;

        const data = {
            user: pb.authStore.model.id,
            date,
            duration: hoursToDeduct,
            type: 'regular', // or 'leave'
            day_type: 'workday',
            multiplier: -1, // Negative multiplier or just negative calculated hours?
            // Let's set calculated_hours directly to negative
            is_banked: true,
            calculated_hours: -hoursToDeduct,
            notes: 'Time Off Redeemed',
            manual_override: true
        };

        try {
            await pb.collection('time_entries').create(data);
            setAmount('');
            onRedeem();
        } catch (error) {
            console.error("Error redeeming:", error);
            alert("Failed to redeem hours");
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="bg-white p-6 rounded-lg shadow-md">
            <h3 className="text-lg font-semibold mb-4 text-gray-800">{t('redeem.title')}</h3>
            <form onSubmit={handleRedeem} className="space-y-4">
                <div>
                    <label className="block text-sm font-medium text-gray-700">{t('redeem.date')}</label>
                    <input
                        type="date"
                        required
                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                        value={date}
                        onChange={e => setDate(e.target.value)}
                    />
                </div>
                <div>
                    <label className="block text-sm font-medium text-gray-700">{t('redeem.hours')}</label>
                    <input
                        type="number"
                        step="0.25"
                        min="0.25"
                        required
                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                        value={amount}
                        onChange={e => setAmount(e.target.value)}
                    />
                </div>
                <button
                    type="submit"
                    disabled={loading}
                    className="w-full bg-green-600 text-white p-2 rounded-md hover:bg-green-700 transition"
                >
                    {loading ? t('redeem.processing') : t('redeem.submit')}
                </button>
            </form>
        </div>
    );
};

export default RedeemForm;