import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { DirhamIcon } from '@/components/ui/custom-icons';

import { toast } from 'sonner';

const AddExpenseForm: React.FC = () => {
    const handleAddExpense = () => {
        const amount = (document.getElementById('amount') as HTMLInputElement).value;
        const desc = (document.getElementById('desc') as HTMLInputElement).value;
        const category = (document.getElementById('category') as HTMLButtonElement | null)?.innerText || "Category";

        if (!amount || !desc) {
            toast.error("Please fill in amount and description");
            return;
        }

        toast.success(`Expense Added: AED ${amount} to ${category}`);

        // Clear
        (document.getElementById('amount') as HTMLInputElement).value = '';
        (document.getElementById('desc') as HTMLInputElement).value = '';
    };

    return (
        <div className="flex justify-center items-center h-[400px]">
            <GlassCard className="p-8 w-full max-w-md">
                <h3 className="text-xl font-bold text-slate-800 mb-6 text-center">Add New Expense</h3>

                <div className="space-y-4">
                    <div className="space-y-2">
                        <Label htmlFor="amount" className="text-slate-600">Amount (AED)</Label>
                        <div className="relative">
                            <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                <DirhamIcon className="w-4 h-4 text-slate-400" />
                            </div>
                            <Input id="amount" placeholder="0.00" className="pl-9 bg-white/50 border-slate-200" />
                        </div>
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="category" className="text-slate-600">Category</Label>
                        <Select>
                            <SelectTrigger id="category" className="bg-white/50 border-slate-200">
                                <SelectValue placeholder="Select Category" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="food">Food & Dining</SelectItem>
                                <SelectItem value="transport">Transportation</SelectItem>
                                <SelectItem value="shopping">Shopping</SelectItem>
                                <SelectItem value="entertainment">Entertainment</SelectItem>
                                <SelectItem value="utilities">Utilities</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="desc" className="text-slate-600">Description</Label>
                        <Input id="desc" placeholder="e.g. Grocery shopping" className="bg-white/50 border-slate-200" />
                    </div>

                    <Button
                        className="w-full mt-4 bg-slate-900 text-white hover:bg-slate-800 shadow-md"
                        onClick={handleAddExpense}
                    >
                        Add Expense
                    </Button>
                </div>
            </GlassCard>
        </div>
    );
};

export default AddExpenseForm;