import React from 'react';
import Link from 'next/link';
import CardBox from '../CardBox';
import dataFormatter from '../../helpers/dataFormatter';
import ListActionsPopover from "../ListActionsPopover";
import { useAppSelector } from "../../stores/hooks";
import { Pagination } from "../Pagination";
import LoadingSpinner from "../LoadingSpinner";
import { hasPermission } from "../../helpers/userPermissions";

type Props = {
    checklist_items: any[];
    loading: boolean;
    onDelete: (id: string) => void;
    currentPage: number;
    numPages: number;
    onPageChange: (page: number) => void;
};

const formatChecklist = (checklist: any) => {
    const value = dataFormatter.human_review_checklistsOneListFormatter(checklist);

    if (!value) {
        return 'Checklist not linked';
    }

    return value;
};

const ListChecklist_items = ({ checklist_items, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
    const currentUser = useAppSelector((state) => state.auth.currentUser);
    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_CHECKLIST_ITEMS');

    return (
        <>
            <div className='grid grid-cols-[repeat(auto-fit,minmax(340px,1fr))] gap-4 p-4'>
                {loading && (
                    <div className='col-span-full rounded-xl border border-[#DDD5C7] bg-white p-10'>
                        <LoadingSpinner />
                    </div>
                )}

                {!loading && checklist_items.map((item) => (
                    <CardBox
                        key={item.id}
                        hasComponentLayout
                        className='overflow-hidden border border-[#DDD5C7] bg-white shadow-sm shadow-[#83755E]/10 transition hover:border-[#D8B75E]/70 hover:shadow-md'
                    >
                        <div className='flex items-start justify-between gap-4 border-b border-[#E5E0D6] bg-[#FBF8F1] p-5'>
                            <div className='flex min-w-0 gap-4'>
                                <div className='flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-[#0E1A2B] text-sm font-semibold text-[#D8B75E]'>
                                    #{item.item_order || '-'}
                                </div>
                                <div className='min-w-0'>
                                    <p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61]'>
                                        Review item
                                    </p>
                                    <Link
                                        href={`/checklist_items/checklist_items-view/?id=${item.id}`}
                                        className='mt-2 block text-lg font-semibold leading-6 text-[#0E1A2B] hover:text-[#7A5B13]'
                                    >
                                        {item.item_text || 'Untitled review item'}
                                    </Link>
                                </div>
                            </div>
                            <ListActionsPopover
                                onDelete={onDelete}
                                itemId={item.id}
                                pathEdit={`/checklist_items/checklist_items-edit/?id=${item.id}`}
                                pathView={`/checklist_items/checklist_items-view/?id=${item.id}`}
                                hasUpdatePermission={hasUpdatePermission}
                            />
                        </div>

                        <div className='space-y-4 p-5'>
                            <div className='flex flex-wrap gap-2'>
                                <span className='rounded-full border border-[#D8D0C2] bg-[#F6F3EC] px-3 py-1 text-xs font-semibold text-[#7A5B13]'>
                                    Order {item.item_order || 'not set'}
                                </span>
                                <span
                                    className={
                                        item.is_required
                                            ? 'rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-semibold text-red-700'
                                            : 'rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-600'
                                    }
                                >
                                    {item.is_required ? 'Required' : 'Optional'}
                                </span>
                            </div>

                            <div className='rounded-lg border border-[#E5E0D6] bg-[#FBF8F1] p-4'>
                                <p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61]'>
                                    Linked checklist
                                </p>
                                <p className='mt-2 text-sm font-semibold leading-6 text-[#0E1A2B]'>
                                    {formatChecklist(item.checklist)}
                                </p>
                            </div>

                            <p className='text-sm leading-6 text-[#5B6472]'>
                                This step becomes part of the human oversight record before AI-assisted work is relied on or sent outside the legal team.
                            </p>
                        </div>
                    </CardBox>
                ))}

                {!loading && checklist_items.length === 0 && (
                    <div className='col-span-full flex h-40 items-center justify-center rounded-xl border border-dashed border-[#D8D0C2] bg-white'>
                        <p className='text-sm text-[#5B6472]'>No checklist items to display</p>
                    </div>
                )}
            </div>

            <div className='my-6 flex items-center justify-center'>
                <Pagination
                    currentPage={currentPage}
                    numPages={numPages}
                    setCurrentPage={onPageChange}
                />
            </div>
        </>
    )
};

export default ListChecklist_items