import React from "react";
import { useParams, Link } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import { useGetCategoryByIdQuery } from "../../features/categories/categoryAPI";

const CategoryDetails = () => {
  const { id } = useParams();
  const { data, isLoading } = useGetCategoryByIdQuery(id);

  const category = data?.data;

  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64 text-gray-600">
        Loading category details...
      </div>
    );
  }

  if (!category) {
    return (
      <div className="text-center mt-10 text-gray-600">Category not found!</div>
    );
  }

  return (
    <div className="max-w-5xl mx-auto space-y-8">
      {/* Back */}
      <div className="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
        <ArrowLeft size={18} />
        <Link to="/categories" className="font-medium">
          Back to Categories
        </Link>
      </div>

      {/* Header */}
      <div className="flex flex-col md:flex-row justify-between bg-white shadow-md rounded-2xl p-6 border">
        <div>
          <h2 className="text-2xl font-bold text-gray-800">{category.name}</h2>
          <p className="text-gray-500 text-sm mt-1">{category.slug}</p>
        </div>

        <span
          className={`mt-4 md:mt-0 px-4 py-2 rounded-full text-sm font-medium ${
            category.isActive
              ? "bg-green-100 text-green-700"
              : "bg-red-100 text-red-700"
          }`}
        >
          {category.isActive ? "Active" : "Inactive"}
        </span>
      </div>

      {/* Info Grid */}
      <div className="grid md:grid-cols-2 gap-6">
        {/* Category Info */}
        <div className="bg-white rounded-xl shadow-sm p-6 border space-y-3">
          <h3 className="text-lg font-semibold border-b pb-2">
            Category Information
          </h3>

          <InfoRow label="Description" value={category.description || "N/A"} />
          <InfoRow label="Parent ID" value={category.parentId || "Root"} />
          <InfoRow label="Sequence" value={category.sequence} />
          <InfoRow label="Meta Title" value={category.metaTitle} />
          <InfoRow label="Meta Description" value={category.metaDescription} />
        </div>

        {/* Meta & Dates */}
        <div className="bg-white rounded-xl shadow-sm p-6 border space-y-3">
          <h3 className="text-lg font-semibold border-b pb-2">System Info</h3>

          <InfoRow
            label="Created At"
            value={new Date(category.createdAt).toLocaleString()}
          />
          <InfoRow
            label="Updated At"
            value={new Date(category.updatedAt).toLocaleString()}
          />
          <InfoRow label="Category ID" value={category.id} />
        </div>
      </div>

      {/* Image */}
      {category.image && (
        <div className="bg-white rounded-xl shadow-sm p-6 border">
          <h3 className="text-lg font-semibold border-b pb-3">
            Category Image
          </h3>

          <img
            src={category.image}
            alt={category.name}
            className="mt-4 w-64 h-64 object-cover rounded-xl border"
          />
        </div>
      )}
    </div>
  );
};

const InfoRow = ({ label, value }) => (
  <div className="flex justify-between text-sm">
    <span className="text-gray-600 font-medium">{label}:</span>
    <span className="text-gray-800 text-right ml-4">{value}</span>
  </div>
);

export default CategoryDetails;
