import { Eye, Square } from 'lucide-react';
import { provenanceLine } from './shareableRecordItem';
import { useShownRecordItem, type ShownRead } from './useShownRecordItem';

interface Props {
    reference: string;
    /** Who is showing it, as this viewer should read it. */
    sharerName: string;
    /** Whom the host is showing it to, named in the host's own line. */
    audienceName?: string;
    /** The viewer is the one showing it. Only they get Stop showing. */
    isSharer: boolean;
    onStop?: () => void;
    stopping?: boolean;
    stopError?: string | null;
    /** A read the window already holds, so the banner and the stage share one request. */
    read?: ShownRead;
    retry?: () => void;
    /** The item is on the stage, so the banner does not repeat its detail. */
    staged?: boolean;
}

/**
 * Read under this viewer's own access; a viewer who may not see it is told so, not shown it empty.
 */
export const ShownRecordItem = ({ reference, sharerName, audienceName, isSharer, onStop, stopping, stopError, read: held, retry: heldRetry, staged }: Props) => {
    const own = useShownRecordItem(held ? null : reference);
    const read = held ?? own.read;
    const retry = heldRetry ?? own.retry;
    const summary = read.state === 'ready' ? read.summary : undefined;
    const provenance = summary ? provenanceLine(summary) : undefined;

    return (
        <section data-testid="shown-record-item" aria-label="Shown from the record" className={'ak-notice flex-col ' + (isSharer ? 'ak-notice--success' : 'ahr-call__shown--viewer')}>
            <div role="status" className="flex w-full items-center gap-2">
                <Eye aria-hidden="true" className="h-4 w-4 flex-none" />
                <span className="min-w-0 flex-1">
                    <span>{isSharer ? (audienceName ? 'You are showing ' + audienceName : 'You are showing') : sharerName + ' is showing you'}</span>
                    {summary && <> <b className="ahr-call__shown-title">{summary.title}</b></>}
                    {provenance && <> &mdash; <span>{provenance}</span></>}
                </span>
                {isSharer && onStop && (
                    <button type="button" className="btn bg-background text-foreground" disabled={stopping} onClick={onStop}>
                        <Square aria-hidden="true" className="h-4 w-4" />{stopping ? 'Stopping' : 'Stop showing'}
                    </button>
                )}
            </div>

            {stopError && <p role="alert" className="ak-field-error">{stopError}</p>}

            {read.state === 'loading' && <p className="m-0">Opening the item&hellip;</p>}
            {read.state === 'refused' && (
                <p role="alert" className="m-0">
                    {isSharer
                        ? 'You do not have access to this item.'
                        : sharerName + ' is showing an item from the record that you do not have access to.'}
                </p>
            )}
            {read.state === 'failed' && (
                <div className="flex items-center gap-2">
                    <p role="alert" className="ak-field-error m-0">The item being shown could not be opened.</p>
                    <button type="button" className="btn btn-green-ghost" onClick={retry}>Try again</button>
                </div>
            )}
            {!staged && summary?.detail && <p className="m-0 whitespace-pre-line">{summary.detail}</p>}
            {!staged && summary?.changedHere && <p className="m-0 text-muted-foreground" data-testid="shown-item-changed-here">{summary.changedHere}</p>}
        </section>
    );
};

export default ShownRecordItem;