'use client';

import * as React from 'react';
import { useParams, useRouter } from 'next/navigation';
import { fetchPermissionById } from '@/network/apis/dashboard/permissions/permissions.apis';
import { PermissionSection } from '@/network/apis/dashboard/permissions/type';
import { useQuery } from '@tanstack/react-query';
import { Button } from '@/components/ui/button';

export default function PermissionDetails() {
  const router = useRouter();
  const params = useParams();
  const id = params?.id ? String(params.id) : undefined;

  const {
    data: permissionDetails,
    isLoading,
    isError,
    error,
  } = useQuery({
    queryKey: ['permission_details', id],
    queryFn: async () => {
      if (!id) return;
      const res = await fetchPermissionById(id);
      return res;
    },
    enabled: !!id,
  });

  if (!id) {
    return (
      <div className="p-6 text-sm text-slate-600">
        No permission id provided.
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="p-6 text-sm text-slate-600">Loading permission…</div>
    );
  }

  if (isError) {
    return (
      <div className="p-6 text-sm text-red-600">
        Failed to load permission:{' '}
        {(error as Error)?.message ?? 'Unknown error'}
      </div>
    );
  }

  const permissionSection: PermissionSection | undefined = permissionDetails;

  if (!permissionSection) {
    return (
      <div className="p-6 text-sm text-slate-600">Permission not found.</div>
    );
  }

  return (
    <div className="w-full max-w-4xl mx-auto p-6">
      <div className="mb-4 flex items-start justify-between gap-3">
        <div>
          <h2 className="text-xl font-semibold">
            {permissionSection.section.en}
          </h2>
          <p className="text-slate-500 text-sm">
            {permissionSection.section.ar}
          </p>
        </div>
        <Button onClick={() => router.push(`/permissions/add/${id}`)}>
          Edit
        </Button>
      </div>

      <div className="rounded-2xl border border-slate-200 bg-white shadow-sm">
        <div className="p-4 sm:p-6">
          <h3 className="text-sm font-semibold text-slate-700 mb-3">
            Permissions in this Section
          </h3>

          {permissionSection.permissions?.length ? (
            <ul className="list-disc ml-5 space-y-2 text-sm">
              {permissionSection.permissions.map((perm) => (
                <li key={perm.id}>
                  <span className="font-medium">{perm.name_en}</span>
                  <span className="text-slate-400 ml-2">({perm.name})</span>
                  <span className="text-slate-500 ml-2">{perm.name_ar}</span>
                </li>
              ))}
            </ul>
          ) : (
            <div className="text-sm text-slate-500">
              No permissions found in this section.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}