/**
 * Category Detail Page
 * View category details
 */

'use client';

import { useQuery } from '@tanstack/react-query';
import { useRouter, useParams } from 'next/navigation';
import { categoriesAPI } from '@/lib/api/categories';
import { Button, Card, CardHeader, CardTitle, CardContent, Badge, LoadingSpinner } from '@/components/ui';
import { formatDate } from '@/lib/utils/format';
import { ArrowLeft, Edit, Tag, Folder } from 'lucide-react';

export default function CategoryDetailPage() {
  const router = useRouter();
  const params = useParams();
  const categoryId = parseInt(params.id);

  // Fetch category details
  const { data, isLoading, error } = useQuery({
    queryKey: ['category', categoryId],
    queryFn: async () => {
      const response = await categoriesAPI.getById(categoryId);
      // API uses successResponse which returns { success: true, data: category }
      // axios interceptor returns response.data, so response is { success: true, data: category }
      return response?.data || null;
    },
  });

  const category = data;

  if (isLoading) {
    return (
      <div className="p-6 bg-gray-50 dark:bg-gray-950">
        <div className="flex justify-center py-12">
          <LoadingSpinner size="lg" />
        </div>
      </div>
    );
  }

  if (error || !category) {
    return (
      <div className="p-6 bg-gray-50 dark:bg-gray-950">
        <Card>
          <CardContent className="pt-6">
            <div className="text-center py-12">
              <p className="text-red-600 dark:text-red-400 mb-4">
                {error?.response?.data?.message || 'Category not found'}
              </p>
              <Button onClick={() => router.push('/categories')} variant="outline">
                Back to Categories
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="p-6 bg-gray-50 dark:bg-gray-950 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button
            variant="outline"
            onClick={() => router.push('/categories')}
            className="flex items-center gap-2"
          >
            <ArrowLeft className="w-4 h-4" />
            Back
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">{category.name}</h1>
            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
              Category Details
            </p>
          </div>
        </div>
        <Button
          variant="primary"
          onClick={() => router.push(`/categories/${categoryId}/edit`)}
          className="flex items-center gap-2"
        >
          <Edit className="w-4 h-4" />
          Edit Category
        </Button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Content */}
        <div className="lg:col-span-2 space-y-6">
          {/* Category Information */}
          <Card>
            <CardHeader>
              <CardTitle>Category Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm font-medium text-gray-500">Slug</label>
                  <p className="mt-1 font-mono">{category.slug}</p>
                </div>
                <div>
                  <label className="text-sm font-medium text-gray-500">Type</label>
                  <div className="mt-1">
                    {category.parent_id ? (
                      <Badge variant="info">Child Category</Badge>
                    ) : (
                      <Badge variant="success">Root Category</Badge>
                    )}
                  </div>
                </div>
                <div>
                  <label className="text-sm font-medium text-gray-500">Sort Order</label>
                  <p className="mt-1">{category.sort_order || 0}</p>
                </div>
                {category.parent_id && (
                  <div>
                    <label className="text-sm font-medium text-gray-500">Parent Category ID</label>
                    <p className="mt-1">{category.parent_id}</p>
                  </div>
                )}
              </div>

              {category.description && (
                <div>
                  <label className="text-sm font-medium text-gray-500">Description</label>
                  <p className="mt-1 text-gray-900 dark:text-white">{category.description}</p>
                </div>
              )}

              {category.image_url && (
                <div>
                  <label className="text-sm font-medium text-gray-500">Image</label>
                  <div className="mt-2">
                    <img
                      src={category.image_url}
                      alt={category.name}
                      className="max-w-xs rounded-lg"
                    />
                  </div>
                </div>
              )}

              <div className="grid grid-cols-2 gap-4 pt-4 border-t">
                <div>
                  <label className="text-sm font-medium text-gray-500">Created</label>
                  <p className="mt-1 text-sm text-gray-600">{formatDate(category.created_at)}</p>
                </div>
                <div>
                  <label className="text-sm font-medium text-gray-500">Last Updated</label>
                  <p className="mt-1 text-sm text-gray-600">{formatDate(category.updated_at)}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Quick Info */}
          <Card>
            <CardHeader>
              <CardTitle>Quick Info</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center gap-3">
                {category.parent_id ? (
                  <Folder className="w-5 h-5 text-gray-400" />
                ) : (
                  <Tag className="w-5 h-5 text-gray-400" />
                )}
                <div>
                  <p className="text-sm text-gray-500">Category ID</p>
                  <p className="font-medium">{category.id}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

