'use client';

import JsonTree from '../../../../JsonTree';
import PrettyCode from '../../../../PrettyCode';
import type { DetectedContent } from './types';

// JsonTree config — same shape as the interactive docs example view
// but with ``showActionButtons: false`` because the copy button in the
// StatusBar already covers that flow.
const JSON_TREE_CONFIG = {
    maxAutoExpandDepth: 2,
    maxAutoExpandArrayItems: 10,
    maxAutoExpandObjectKeys: 5,
    maxStringLength: 200,
    collectionLimit: 50,
    showCollectionInfo: true,
    showExpandControls: true,
    showActionButtons: false,
    preserveKeyOrder: true,
    className: 'border-0 rounded-none',
} as const;

interface PrettyViewProps {
    /** Parsed JSON tree when the body was JSON. */
    treeData: unknown;
    /** Pre-stringified body — used by the code-highlight branch for
     *  non-JSON payloads. */
    rawText: string;
    detected: DetectedContent;
}

/** "Pretty" view — rich-rendering branch. JSON renders as ``JsonTree``;
 *  anything else goes through ``PrettyCode`` in ``plain`` variant so it
 *  flows naturally inside the panel's ``ScrollArea`` — no internal
 *  scroll, no floating toolbar fighting the surrounding layout. */
export function PrettyView({ treeData, rawText, detected }: PrettyViewProps) {
    if (detected.kind === 'json' && treeData != null) {
        return <JsonTree title="Response Body" data={treeData} config={JSON_TREE_CONFIG} />;
    }
    if (!rawText) {
        return (
            <div className="py-10 text-center text-xs text-muted-foreground">
                Empty response body
            </div>
        );
    }
    return (
        <PrettyCode
            data={rawText}
            language={detected.prism}
            variant="plain"
            isCompact
        />
    );
}
