"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 { Textarea } from "@/components/ui/textarea";
import { Zap, Loader2 } from "lucide-react";
import { submitOvertime } from "@/app/lib/actions";

export function OvertimeForm() {
    const [isSubmitting, setIsSubmitting] = useState(false);

    async function handleSubmit(formData: FormData) {
        setIsSubmitting(true);
        try {
            await submitOvertime(formData);
            alert("Overtime logged successfully!");
            (document.getElementById('overtime-form') as HTMLFormElement).reset();
        } catch (e) {
            alert("Failed to log overtime.");
        } finally {
            setIsSubmitting(false);
        }
    }

    return (
        <Card className="border-none shadow-2xl shadow-indigo-500/10 bg-white dark:bg-neutral-900 rounded-3xl overflow-hidden">
            <CardHeader className="p-8 border-b border-neutral-100 dark:border-neutral-800 flex flex-row items-center justify-between">
                <div>
                    <CardTitle>Log Extra Hours</CardTitle>
                    <CardDescription>Enter details for your additional work hours</CardDescription>
                </div>
                <div className="p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl">
                    <Zap className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
                </div>
            </CardHeader>
            <CardContent className="p-8">
                <form id="overtime-form" action={handleSubmit} className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div className="space-y-2">
                            <Label htmlFor="date" className="text-sm font-semibold">Work Date</Label>
                            <Input name="date" type="date" required className="rounded-xl" />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="hours" className="text-sm font-semibold">Hours Worked</Label>
                            <Input name="hours" type="number" step="0.5" placeholder="e.g. 2.5" required className="rounded-xl" />
                        </div>
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="reason" className="text-sm font-semibold">Reason / Project</Label>
                        <Textarea name="reason" placeholder="Briefly describe the work you performed..." className="rounded-2xl min-h-[120px] bg-neutral-50 dark:bg-neutral-800/50 border-none resize-none px-4 py-3" />
                    </div>
                    <div className="pt-4">
                        <Button type="submit" disabled={isSubmitting} className="w-full bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl py-6 h-auto text-lg font-bold transition-all shadow-lg shadow-indigo-100 dark:shadow-none">
                            {isSubmitting ? <Loader2 className="w-5 h-5 animate-spin mx-auto" /> : "Log Overtime"}
                        </Button>
                    </div>
                </form>
            </CardContent>
        </Card>
    );
}