import { useState } from 'react';
import { X, Scale, Save } from 'lucide-react';
import { Batch } from '../lib/batchesApi';
import { weightLogsApi } from '../lib/weightLogsApi';

interface WeightLogModalProps {
    batch: Batch;
    onClose: () => void;
    onSuccess: () => void;
}

const WEIGHT_TYPES = [
    { id: 'WET', label: 'Wet Weight (Harvest)' },
    { id: 'BUCKED', label: 'Bucked Weight' },
    { id: 'FINAL_DRY', label: 'Final Dry Weight' },
    { id: 'TRIM', label: 'Trim Weight' },
    { id: 'WASTE', label: 'Waste' }
];

export default function WeightLogModal({ batch, onClose, onSuccess }: WeightLogModalProps) {
    const [weightType, setWeightType] = useState(WEIGHT_TYPES[0].id);
    const [weight, setWeight] = useState('');
    const [unit, setUnit] = useState('lbs');
    const [notes, setNotes] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);
        try {
            await weightLogsApi.create(batch.id, {
                weightType,
                weight,
                unit,
                notes
            });
            onSuccess();
            onClose();
        } catch (error) {
            console.error('Failed to log weight', error);
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in">
            <div className="bg-[var(--color-bg-elevated)] w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-scale-in">
                <div className="p-6 border-b border-[var(--color-border-default)] flex justify-between items-center">
                    <div className="flex items-center gap-2">
                        <Scale className="text-[var(--color-primary)] dark:text-emerald-400" size={24} />
                        <h2 className="text-xl font-bold dark:text-white">Log Weight</h2>
                    </div>
                    <button onClick={onClose} className="text-[var(--color-text-tertiary)] hover:text-slate-700 dark:hover:text-slate-300">
                        <X size={24} />
                    </button>
                </div>

                <form onSubmit={handleSubmit} className="p-6 space-y-6">
                    <div className="bg-[var(--color-bg-tertiary)] p-4 rounded-xl border border-[var(--color-border-default)]">
                        <h3 className="font-semibold text-[var(--color-text-primary)]">{batch.name}</h3>
                        <p className="text-sm text-[var(--color-text-tertiary)]">{batch.strain}</p>
                    </div>

                    <div>
                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Weight Type</label>
                        <select
                            value={weightType}
                            onChange={(e) => setWeightType(e.target.value)}
                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                        >
                            {WEIGHT_TYPES.map(type => (
                                <option key={type.id} value={type.id}>{type.label}</option>
                            ))}
                        </select>
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Weight</label>
                            <input
                                type="number"
                                step="0.01"
                                value={weight}
                                onChange={(e) => setWeight(e.target.value)}
                                className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                                placeholder="0.00"
                                required
                            />
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Unit</label>
                            <select
                                value={unit}
                                onChange={(e) => setUnit(e.target.value)}
                                className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white"
                            >
                                <option value="lbs">lbs</option>
                                <option value="g">grams</option>
                                <option value="ozt">oz (troy)</option>
                                <option value="kg">kg</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">Notes</label>
                        <textarea
                            value={notes}
                            onChange={(e) => setNotes(e.target.value)}
                            className="w-full p-3 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] dark:text-white h-24 resize-none"
                            placeholder="Optional notes..."
                        />
                    </div>

                    <button
                        type="submit"
                        disabled={isSubmitting}
                        className="w-full py-4 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-bold rounded-xl shadow-lg flex items-center justify-center gap-2 disabled:opacity-50"
                    >
                        <Save size={20} />
                        {isSubmitting ? 'Saving...' : 'Save Weight Log'}
                    </button>
                </form>
            </div>
        </div>
    );
}
