import React, { useState } from 'react';
import { History } from 'lucide-react';
import {
    useFieldHistory,
    useFieldHistoryScope,
} from '../components/FieldHistory/FieldHistoryProvider';
import { FieldHistoryModal } from '../components/FieldHistory/FieldHistoryModal';

interface FieldRowProps {
    label?: string;
    value: React.ReactNode;
    path?: string;
}

/**
 * `renderField` is called as a plain function (`{renderField('Status', value)}`), not rendered as
 * `<renderField/>` -- so it cannot use hooks itself without breaking the rules-of-hooks. `FieldRow`
 * is the real component that the hooks live and run legally inside; `renderField` below is a thin
 * wrapper around it.
 *
 * DOM-shape note: the outer/inner `div` nesting here deliberately mirrors WP's old `Item`
 * component shape (an outer wrapper `div` containing an inner padded content `div`). All 753
 * existing call sites still wrap rows of `renderField(...)` output in WP's
 * `__experimentalItemGroup` (`isBordered`/`isRounded`/`isSeparated`), which is untouched by this
 * task -- and that component's CSS targets children *two levels deep*
 * (`> *:first-of-type > *`, `> *:not(marquee) > *`,...) to draw the row borders/rounded corners.
 * A single flat `div` here would silently drop those borders/rounding everywhere `renderField` is
 * used.
 */
function FieldRow({ label, value, path }: FieldRowProps) {
    const scope = useFieldHistoryScope();
    const { isActive, getFieldHistory, attributionFor } = useFieldHistory();
    const [isHistoryOpen, setIsHistoryOpen] = useState(false);

    // Safe even with no `FieldHistoryProvider`/`FieldHistoryScope` above this row: both hooks
    // return inert defaults in that case (isActive=false, scope=null), so `timeline` is always
    // `null` for the 752 not-yet-wired call sites and this renders exactly like the old plain row.
    const timeline =
        isActive && scope?.id && path
            ? getFieldHistory(scope.resourceType, scope.id, path, label ?? '')
            : null;

    return (
        <div role="listitem" className="block w-full">
            <div className="box-border block w-full px-4 py-3">
                <div className="flex items-center justify-between gap-4">
                    {timeline ? (
                        <button
                            type="button"
                            onClick={() => setIsHistoryOpen(true)}
                            className="inline-flex items-center gap-1 text-sm font-semibold text-primary hover:underline"
                        >
                            <History className="size-3.5 shrink-0" aria-hidden="true" />
                            <span className="sr-only">View history of</span>{" "}{label}
                        </button>
                    ) : (
                        <span className="text-sm font-semibold text-muted-foreground">
                            {label}
                        </span>
                    )}
                    {/* The value is never the history trigger -- this preserves the existing
                        click-to-edit behavior on values throughout the app. */}
                    <span className="text-sm">{value || '-'}</span>
                </div>
            </div>
            {timeline && (
                <FieldHistoryModal
                    label={label ?? ''}
                    timeline={timeline}
                    open={isHistoryOpen}
                    onClose={() => setIsHistoryOpen(false)}
                    attribution={scope?.id ? attributionFor(scope.resourceType, scope.id) : undefined}
                />
            )}
        </div>
    );
}

export const renderField = (label: string | undefined, value: React.ReactNode, path?: string) => (
    <FieldRow label={label} value={value} path={path} />
);