import type { RoomEditor } from '@/lib/partnership-room-edit';
import { labels as states } from '@/pages/partnerships/shared';
export default function RoomComparison({
    editor,
    labels,
    display = (_key, value) => value || 'Não indicado',
}: {
    editor: RoomEditor;
    labels: Record<string, string>;
    display?: (key: string, value: string) => string;
}) {
    return (
        <div className="space-y-3 rounded border p-3">
            <button
                type="button"
                className="underline"
                disabled={editor.refreshing || editor.form.processing}
                onClick={editor.refresh}
            >
                Comparar com os dados actuais da sala
            </button>
            {editor.problem && <p role="alert">{editor.problem}</p>}
            {editor.pendingAction && (
                <div className="space-y-2">
                    <p>
                        A acção anterior não foi confirmada. Recuperar repete a
                        tentativa original sem substituir a preparação
                        posterior.
                    </p>
                    <button
                        type="button"
                        className="underline"
                        disabled={!editor.canRecover}
                        onClick={editor.recover}
                    >
                        Recuperar a mesma acção
                    </button>
                </div>
            )}
            {editor.mustRefresh && (
                <p>
                    Consulte o contexto actual antes de adoptar uma nova
                    tentativa.
                </p>
            )}
            {editor.invalid && (
                <p role="alert">
                    Este registo não foi recuperado correctamente. As edições
                    foram conservadas e a gravação está suspensa.
                </p>
            )}
            {!editor.editable && editor.dirty && (
                <p role="status">
                    O estado ou o acesso actual não permite editar este registo.
                    A preparação abaixo foi conservada em memória; não foi
                    gravada.
                </p>
            )}
            {editor.refreshing && (
                <p role="status">A recuperar sem apagar a sua preparação.</p>
            )}
            {(editor.stale || editor.pendingAction) && (
                <>
                    <p role="alert">
                        O registo ou o contexto da sala mudou. Compare os dados
                        antes de continuar. Estado actual:{' '}
                        {states[editor.status ?? ''] ?? 'Por recuperar'}.
                    </p>
                    {editor.changed.length > 0 && (
                        <div className="overflow-x-auto">
                            <table className="w-full text-left text-sm">
                                <thead>
                                    <tr>
                                        <th>Campo</th>
                                        <th>Actualmente guardado</th>
                                        <th>Sua edição</th>
                                        <th>Escolha</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {editor.changed.map((key) => (
                                        <tr key={key}>
                                            <td>{labels[key] ?? key}</td>
                                            <td className="whitespace-pre-wrap">
                                                {display(
                                                    key,
                                                    editor.current[key],
                                                )}
                                            </td>
                                            <td className="whitespace-pre-wrap">
                                                {display(
                                                    key,
                                                    editor.values[key],
                                                )}
                                            </td>
                                            <td>
                                                {editor.conflicts.includes(
                                                    key,
                                                ) ? (
                                                    <>
                                                        <button
                                                            type="button"
                                                            onClick={() =>
                                                                editor.choose(
                                                                    key,
                                                                    'current',
                                                                )
                                                            }
                                                        >
                                                            Usar valor actual
                                                        </button>{' '}
                                                        <button
                                                            type="button"
                                                            onClick={() =>
                                                                editor.choose(
                                                                    key,
                                                                    'mine',
                                                                )
                                                            }
                                                        >
                                                            Manter minha
                                                            alteração
                                                        </button>
                                                        {editor.unresolved.includes(
                                                            key,
                                                        ) && (
                                                            <p>
                                                                Escolha o valor
                                                                a conservar.
                                                            </p>
                                                        )}
                                                    </>
                                                ) : (
                                                    'Actualização compatível'
                                                )}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    )}
                    <button
                        type="button"
                        className="underline"
                        disabled={
                            editor.refreshing ||
                            editor.form.processing ||
                            editor.unresolved.length > 0 ||
                            editor.mustRefresh ||
                            editor.invalid
                        }
                        onClick={editor.adopt}
                    >
                        Usar este contexto e conservar as alterações escolhidas
                    </button>
                </>
            )}
            {editor.recovering && (
                <p role="status">
                    A criação não foi confirmada. Recuperar repete a chave e o
                    conteúdo originais; alterações posteriores ficam como
                    preparação de outro marco.
                </p>
            )}
            {editor.created !== null && (
                <p role="status">
                    O marco foi confirmado na lista desta sala. Alterações
                    feitas depois do envio foram conservadas como nova
                    preparação; o marco criado pode ser editado na lista.
                </p>
            )}
        </div>
    );
}