import * as React from "react";
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

export function ContactDialog() {
    const [open, setOpen] = React.useState(false);
    const [isSubmitting, setIsSubmitting] = React.useState(false);
    const [isSuccess, setIsSuccess] = React.useState(false);
    const [form, setForm] = React.useState({
        name: "",
        email: "",
        inquiry: "",
        details: "",
    });

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        setForm({ ...form, [e.target.name]: e.target.value });
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);

        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 1500));

        setIsSubmitting(false);
        setIsSuccess(true);
    };

    const handleCancel = () => {
        setOpen(false);
        setIsSuccess(false);
        setIsSubmitting(false);
        setForm({ name: "", email: "", inquiry: "", details: "" });
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button variant="outline" className="text-black hover:bg-gray-200">Contact us</Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-lg max-h-[100vh]">
                <DialogHeader>
                    <DialogTitle>Contact Us</DialogTitle>
                    <DialogDescription>
                        Reach out to the Prejee team here!
                    </DialogDescription>
                </DialogHeader>
                <form onSubmit={handleSubmit} className="space-y-4 mt-2">
                    {isSuccess ? (
                        <div className="flex flex-col items-center justify-center py-8 space-y-4">
                            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
                                <svg className="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-green-600">Successfully Sent!</h3>
                                <p className="text-sm text-gray-600">We&apos;ll get back to in 24 hours.</p>
                            </div>
                        </div>
                    ) : (
                        <>
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-sm font-medium mb-1" htmlFor="name">Name</label>
                                    <input
                                        id="name"
                                        name="name"
                                        type="text"
                                        required
                                        disabled={isSubmitting}
                                        value={form.name}
                                        placeholder="Name"
                                        onChange={handleChange}
                                        className="w-full rounded border px-3 py-2 text-sm disabled:opacity-50"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium mb-1" htmlFor="email">Email</label>
                                    <input
                                        id="email"
                                        name="email"
                                        type="email"
                                        required
                                        disabled={isSubmitting}
                                        value={form.email}
                                        placeholder="Email"
                                        onChange={handleChange}
                                        className="w-full rounded border px-3 py-2 text-sm disabled:opacity-50"
                                    />
                                </div>
                            </div>
                            <div>
                                <label className="block text-sm font-medium mb-1" htmlFor="inquiry">Inquire here</label>
                                <textarea
                                    id="details"
                                    name="details"
                                    rows={3}
                                    required
                                    disabled={isSubmitting}
                                    value={form.details}
                                    placeholder="Tell us your questions, queries or concerns!"
                                    onChange={handleChange}
                                    className="w-full rounded border px-3 py-2 text-sm disabled:opacity-50"
                                />
                            </div>
                            <div className="flex justify-end pt-4">
                                <div className="flex gap-3 w-1/3">
                                    <Button
                                        type="button"
                                        variant="outline"
                                        onClick={handleCancel}
                                        disabled={isSubmitting}
                                        className="flex-1"
                                    >
                                        Cancel
                                    </Button>
                                    <Button
                                        type="submit"
                                        disabled={isSubmitting}
                                        className="flex-1"
                                    >
                                        {isSubmitting ? (
                                            <>
                                                <svg className="animate-spin -ml-1 mr-3 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                                </svg>
                                                Sending...
                                            </>
                                        ) : (
                                            "Send"
                                        )}
                                    </Button>
                                </div>
                            </div>
                        </>
                    )}
                </form>
            </DialogContent>
        </Dialog>
    );
}