"use client";

import { useState } from "react";
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
    Upload,
    Plus,
    Loader2,
} from "lucide-react";
import { submitReimbursement } from "@/app/lib/actions";

export function ReimbursementForm() {
    const [showForm, setShowForm] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);

    async function handleSubmit(formData: FormData) {
        setIsSubmitting(true);
        try {
            await submitReimbursement(formData);
            setShowForm(false);
            alert("Claim submitted successfully!");
        } catch (e) {
            alert("Failed to submit claim.");
        } finally {
            setIsSubmitting(false);
        }
    }

    return (
        <>
            <Button
                onClick={() => setShowForm(!showForm)}
                className="bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl px-6 py-6 h-auto shadow-lg shadow-indigo-200 dark:shadow-none transition-all active:scale-95"
            >
                {showForm ? "Cancel Request" : (
                    <span className="flex items-center gap-2">
                        <Plus className="w-5 h-5" />
                        New Request
                    </span>
                )}
            </Button>

            {showForm && (
                <Card className="border-none shadow-2xl shadow-indigo-500/10 bg-white dark:bg-neutral-900 rounded-3xl overflow-hidden animate-in zoom-in-95 duration-300 absolute top-24 right-0 left-0 z-20 mx-8">
                    <CardHeader className="p-8">
                        <CardTitle>Submit New Request</CardTitle>
                        <CardDescription>Fill in the details and attach your receipt</CardDescription>
                    </CardHeader>
                    <CardContent className="p-8 pt-0">
                        <form action={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div className="space-y-6">
                                <div className="space-y-2">
                                    <Label htmlFor="description" className="text-sm font-semibold">Description</Label>
                                    <Input name="description" placeholder="e.g. Flight to Berlin" required className="rounded-xl border-neutral-200 focus:ring-indigo-500" />
                                </div>
                                <div className="grid grid-cols-2 gap-4">
                                    <div className="space-y-2">
                                        <Label htmlFor="amount" className="text-sm font-semibold">Amount ($)</Label>
                                        <Input name="amount" type="number" step="0.01" placeholder="0.00" required className="rounded-xl" />
                                    </div>
                                    <div className="space-y-2">
                                        <Label htmlFor="category" className="text-sm font-semibold">Category</Label>
                                        <select name="category" className="w-full rounded-xl border-neutral-200 bg-white dark:bg-neutral-950 p-2 text-sm focus:ring-2 focus:ring-indigo-500 outline-none h-10 border">
                                            <option>Travel</option>
                                            <option>Food</option>
                                            <option>Equipment</option>
                                            <option>Medical</option>
                                            <option>Other</option>
                                        </select>
                                    </div>
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="date" className="text-sm font-semibold">Transaction Date</Label>
                                    <Input name="date" type="date" required className="rounded-xl" />
                                </div>
                            </div>

                            <div className="space-y-6">
                                <div className="space-y-2">
                                    <Label className="text-sm font-semibold">Receipt Image / PDF</Label>
                                    <div className="border-2 border-dashed border-neutral-200 dark:border-neutral-800 rounded-3xl p-12 text-center hover:border-indigo-400 hover:bg-indigo-50/50 transition-all cursor-pointer group">
                                        <div className="w-16 h-16 bg-neutral-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white dark:group-hover:bg-neutral-700 transition-colors shadow-sm">
                                            <Upload className="w-8 h-8 text-neutral-400 group-hover:text-indigo-600 transition-colors" />
                                        </div>
                                        <p className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Click to upload or drag and drop</p>
                                        <p className="text-xs text-neutral-500 mt-1">PNG, JPG or PDF up to 10MB</p>
                                    </div>
                                </div>
                                <div className="pt-4 flex justify-end">
                                    <Button type="submit" disabled={isSubmitting} className="w-full md:w-auto bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl px-12 py-6 h-auto transition-all">
                                        {isSubmitting ? <Loader2 className="w-5 h-5 animate-spin" /> : "Submit Claim"}
                                    </Button>
                                </div>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            )}
        </>
    );
}