"use client";

import React, { useState } from "react";
import { useRouter, useParams } from "next/navigation";
import { useGetTenderCategoryByIdQuery, useUpdateTenderCategoryMutation } 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 EditTenderCategoryClient() {
    const params = useParams();
    const id = params.id as string;

    const { data: categoryData, isLoading: isFetching } = useGetTenderCategoryByIdQuery(id);

    if (isFetching) {
        return <Layout><div className="p-6 text-center">Loading category data...</div></Layout>;
    }

    if (!categoryData?.success || !categoryData?.data) {
        return <Layout><div className="p-6 text-center text-red-500">Category not found or failed to load.</div></Layout>;
    }

    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">Edit Tender Category</h1>
                    </div>

                    <EditCategoryForm key={id} id={id} initialData={categoryData.data} />
                </div>
            </Layout>
        </AuthGuard>
    );
}

interface ApiError {
    data?: {
        message?: string;
    };
    message?: string;
}

interface EditCategoryFormProps {
    id: string;
    initialData: {
        name: string;
        description?: string | null;
        isActive: boolean;
    };
}

function EditCategoryForm({ id, initialData }: EditCategoryFormProps) {
    const router = useRouter();
    const [updateCategory, { isLoading: isUpdating }] = useUpdateTenderCategoryMutation();

    const [name, setName] = useState(initialData.name);
    const [description, setDescription] = useState(initialData.description || "");
    const [isActive, setIsActive] = useState(initialData.isActive);
    const [error, setError] = useState("");

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

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

        try {
            await updateCategory({ id, body: { name, description, isActive } }).unwrap();
            router.push("/tender-categories");
        } catch (err: unknown) {
            const error = err as ApiError;
            setError(error.data?.message || error.message || "Failed to update category");
        }
    };

    return (
        <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={isUpdating}
                        className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-blue-300 transition"
                    >
                        {isUpdating ? "Updating..." : "Update Category"}
                    </button>
                </div>
            </form>
        </div>
    );
}