"use client";

import { useState } from "react";
import axios from "axios";
import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success";

interface AddSiteProps {
    onSiteAdded?: () => void;
}

export default function AddSite({ onSiteAdded }: AddSiteProps) {
    const [name, setName] = useState("");
    const [description, setDescription] = useState("");
    const [error, setError] = useState("");
    const [success, setSuccess] = useState("");

    const addSite = async () => {
        try {
            const response = await axios.post("/api/sites/add", { name, description });
            if (response.status === 201) {
                const site = response.data.site;
                if (site) {
                    setName("");
                    setDescription("");
                    setSuccess("Site added successfully");
                    
                    document.getElementById('add_site')?.querySelector('form')?.dispatchEvent(
                        new Event('submit', { cancelable: true })
                    );
                    
                    if (onSiteAdded) {
                        onSiteAdded();
                    }
                } else {
                    setError("No site received");
                }
            }
        } catch (error: any) {
            setError(error.response.data.error);
        }
    };

    return (
        <div>
            <dialog id="add_site" className="modal">
                <div className="modal-box w-2/3 max-w-2/3">
                    <div className="flex flex-col gap-4">
                        <header>
                            <h3 className="text-2xl font-semibold tracking-tight">Add New Site</h3>
                            <p className="text-sm text-gray-500 mt-1">Provide details for the new site location</p>
                        </header>
    
                        <div className="space-y-6">
                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">Site Name</span>
                                </label>
                                <input 
                                    type="text" 
                                    className="input input-bordered w-full focus:ring-2" 
                                    placeholder="e.g. Downtown Office"
                                    value={name}
                                    onChange={(e) => setName(e.target.value)}
                                />
                            </div>

                            <div className="form-control">
                                <label className="label">
                                    <span className="label-text font-medium text-base">
                                        Description
                                        <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
                                    </span>
                                </label>
                                <textarea 
                                    className="textarea textarea-bordered w-full focus:ring-2" 
                                    placeholder="Enter a brief description..."
                                    rows={4}
                                    value={description}
                                    onChange={(e) => setDescription(e.target.value)}
                                ></textarea>
                            </div>
                        </div>

                        <div className="modal-action flex justify-end">
                            <form method="dialog" className="flex gap-3">
                                <button className="btn btn-ghost">Cancel</button>
                                <button className="btn btn-primary px-6" onClick={addSite}>Add Site</button>
                            </form>
                        </div>
                    </div>
                </div>
            </dialog>
            <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
            <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
        </div>
    )
}