"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { useCreateTenderCategoryMutation } from "@/redux/apis/tender/tenderCategoryApi";
import AuthGuard from "@/app/components/AuthGuard";
import Layout from "@/app/components/Layout";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";

export default function CreateTenderCategoryPage() {
    const router = useRouter();
    const [createCategory, { isLoading }] = useCreateTenderCategoryMutation();
    const [name, setName] = useState("");
    const [description, setDescription] = useState("");
    const [isActive, setIsActive] = useState(true);
    const [error, setError] = useState("");

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError("");

        if (!name.trim()) {
            setError("Category name is required");
            return;
        }

        try {
            await createCategory({ name, description, isActive }).unwrap();
            router.push("/tender-categories");
        } catch (err: any) {
            setError(err.data?.message || err.message || "Failed to create category");
        }
    };

    return (
        <AuthGuard>
            <Layout>
                <div className="p-6 max-w-2xl mx-auto">
                    <div className="mb-6">
                        <Link href="/tender-categories" className="flex items-center text-gray-500 hover:text-gray-700 transition mb-2">
                            <ArrowLeft size={18} className="mr-1" /> Back to Categories
                        </Link>
                        <h1 className="text-2xl font-bold text-gray-800">Add New Tender Category</h1>
                    </div>

                    <div className="bg-white rounded-lg shadow p-6 border">
                        {error && (
                            <div className="bg-red-50 text-red-600 p-3 rounded mb-4 text-sm border border-red-200">
                                {error}
                            </div>
                        )}

                        <form onSubmit={handleSubmit} className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Name <span className="text-red-500">*</span></label>
                                <input
                                    type="text"
                                    className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"

                                    value={name}
                                    onChange={(e) => setName(e.target.value)}
                                    placeholder="e.g., Solar Panels"
                                />
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                                <textarea
                                    className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
                                    rows={3}
                                    value={description}
                                    onChange={(e) => setDescription(e.target.value)}
                                    placeholder="Optional description..."
                                />
                            </div>

                            <div className="flex items-center">
                                <input
                                    type="checkbox"
                                    id="isActive"
                                    checked={isActive}
                                    onChange={(e) => setIsActive(e.target.checked)}
                                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                                />
                                <label htmlFor="isActive" className="ml-2 block text-sm text-gray-900">
                                    Active Status
                                </label>
                            </div>

                            <div className="flex justify-end pt-4">
                                <button
                                    type="button"
                                    onClick={() => router.back()}
                                    className="mr-3 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200"
                                >
                                    Cancel
                                </button>
                                <button
                                    type="submit"
                                    disabled={isLoading}
                                    className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-blue-300 transition"
                                >
                                    {isLoading ? "Creating..." : "Create Category"}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </Layout>
        </AuthGuard>
    );
}