import { useState } from 'react';

export default function ProfileProofPicker({documents,value,onChange,disabled=false}:{
    documents:{id:string;file_name:string}[];value:string[];onChange:(ids:string[])=>void;disabled?:boolean;
}) {
    const [query,setQuery]=useState('');
    const [showAll,setShowAll]=useState(false);
    const [limit,setLimit]=useState(10);
    const normalize=(text:string)=>text.normalize('NFD').replace(/\p{Diacritic}/gu,'').toLocaleLowerCase();
    const matches=documents.filter(document=>normalize(document.file_name).includes(normalize(query)));
    const toggle=(id:string)=>onChange(value.includes(id)?value.filter(item=>item!==id):[...value,id]);
    return <fieldset disabled={disabled} className="space-y-3 rounded border p-4">
        <legend>Escolher comprovativos</legend>
        <p className="text-sm">Escolha os seus documentos que sustentam este pedido. A lista contém ficheiros próprios com análise antimalware concluída; não confirma a sua adequação como comprovativo.</p>
        <p role="status">{value.length} comprovativos escolhidos</p>
        {value.map(id=><div key={id} className="flex items-start justify-between gap-3 rounded border p-2">
            <span className="min-w-0 break-words">{documents.find(document=>document.id===id)?.file_name??'Ficheiro seleccionado indisponível nesta consulta'}</span>
            <button type="button" className="underline" onClick={()=>toggle(id)}>Retirar</button>
        </div>)}
        <label className="block">Pesquisar nos meus ficheiros
            <input type="search" className="mt-1 w-full rounded border p-2" value={query} onChange={event=>{setQuery(event.target.value);setLimit(10);}} />
        </label>
        <button type="button" className="underline" onClick={()=>setShowAll(!showAll)}>{showAll?'Fechar lista':'Ver ficheiros disponíveis'}</button>
        {(query||showAll)&&<div className="space-y-2">
            <p role="status">{matches.length} ficheiros encontrados · a mostrar até {Math.min(limit,matches.length)}</p>
            {matches.slice(0,limit).map(document=><label key={document.id} className="flex gap-2 rounded border p-2">
                <input type="checkbox" checked={value.includes(document.id)} onChange={()=>toggle(document.id)} />
                <span className="min-w-0 break-words">{document.file_name}</span>
            </label>)}
            {matches.length>limit&&<button type="button" className="underline" onClick={()=>setLimit(limit+10)}>Mostrar mais ficheiros</button>}
        </div>}
    </fieldset>;
}