cvfs/apps/webapp/src/components/cv/DiffViewer.tsx

'use client';

import { useState } from 'react';
import { Patch } from '@/libs/api';

const OP_SYMBOL: Record<string, string> = {
    replace_text: '±', remove_block: '−', reorder_section: '↕', boost_keyword: '+',
};

function PatchRow({ p, dim }: { p: Patch; dim?: boolean }) {
    return (
        <div style={{ borderLeft: '2px solid var(--border-strong)', paddingLeft: 12, opacity: dim ? 0.6 : 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)' }}>
                    {OP_SYMBOL[p.operation] ?? '·'} {p.target_path}
                </span>
                <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{p.operation}</span>
            </div>
            {p.old_value && (
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.5, padding: '3px 6px', background: '#fef2f2', borderRadius: 3, marginBottom: 3, color: '#991b1b', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                    − {p.old_value}
                </div>
            )}
            {p.new_value && (
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.5, padding: '3px 6px', background: '#f0fdf4', borderRadius: 3, color: '#166534', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                    + {p.new_value}
                </div>
            )}
        </div>
    );
}

export default function DiffViewer({
    patches, inheritedPatches, ancestorLabel,
}: {
    patches: Patch[];
    inheritedPatches?: Patch[];
    ancestorLabel?: string;
}) {
    const [showInherited, setShowInherited] = useState(false);
    const hasInherited = (inheritedPatches?.length ?? 0) > 0;

    if (!patches.length && !hasInherited) {
        return (
            <div style={{ padding: '20px 0', color: 'var(--text-faint)', fontSize: 13 }}>
                No patches — identical to parent.
            </div>
        );
    }

    return (
        <div>
            {hasInherited && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                    <button
                        className="btn btn-ghost"
                        style={{ fontSize: 11, padding: '2px 8px' }}
                        onClick={() => setShowInherited(v => !v)}
                    >
                        {showInherited ? '▾' : '▸'} Inherited from ancestors ({inheritedPatches!.length})
                    </button>
                    {ancestorLabel && (
                        <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>via {ancestorLabel}</span>
                    )}
                </div>
            )}

            {showInherited && hasInherited && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18, paddingBottom: 14, borderBottom: '1px dashed var(--border)' }}>
                    {inheritedPatches!.map(p => <PatchRow key={p.id} p={p} dim />)}
                </div>
            )}

            {patches.length > 0 ? (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {patches.map(p => <PatchRow key={p.id} p={p} />)}
                </div>
            ) : (
                <div style={{ padding: '8px 0', color: 'var(--text-faint)', fontSize: 13 }}>
                    No direct patches on this branch.
                </div>
            )}
        </div>
    );
}