import type { CrmRecordEditor } from '@/lib/crm-record-edit';

export default function CrmEditComparison({
    editor,
    labels,
    display = (_key, value) => value || 'Não indicado',
}: {
    editor: CrmRecordEditor;
    labels: Record<string, string>;
    display?: (key: string, value: string) => string;
}) {
    return (
        <div className="space-y-2 rounded border p-3">
            <button
                type="button"
                disabled={editor.refreshing || editor.form.processing}
                onClick={editor.refresh}
            >
                Comparar com os dados actuais
            </button>
            {editor.form.errors.version && (
                <p role="alert">{editor.form.errors.version}</p>
            )}
            {editor.invalid && (
                <p role="alert">
                    Recupere este registo antes de gravar. A versão disponível
                    não foi confirmada.
                </p>
            )}
            {editor.refreshing && (
                <p role="status">
                    A recuperar os dados actuais. As suas edições são
                    conservadas.
                </p>
            )}
            {editor.stale && (
                <>
                    <p role="alert">
                        O registo mudou desde a versão {editor.baseVersion}.
                        Compare com a versão {editor.version} antes de
                        continuar.
                    </p>
                    <div className="overflow-x-auto">
                        <table className="w-full border-collapse 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 neste
                                                            campo.
                                                        </p>
                                                    )}
                                                </>
                                            ) : (
                                                'Actualização compatível com a sua edição'
                                            )}
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                    <button
                        type="button"
                        disabled={
                            editor.refreshing || editor.unresolved.length > 0
                        }
                        onClick={editor.adopt}
                    >
                        Usar esta versão e conservar as alterações escolhidas
                    </button>
                </>
            )}
        </div>
    );
}