{pendingBroadcast && !liveBroadcast && ( READY )}

{channel?.display_name ?? 'Creator Studio'}

Prepare broadcasts, secure your stream key, and monitor the current session.

{channel && ( )}

{!channel ? (

createForm.setData( 'display_name', event.target.value, ) } placeholder="Nyone Live" /> createForm.setData( 'slug', event.target.value.toLowerCase(), ) } placeholder="nyone-live" /> createForm.setData( 'category_id', value, ) } />

createForm.setData(
                                                'description',
                                                event.target.value,
                                            )
                                        }
                                        className="min-h-28 rounded-md border bg-background px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
                                    />
                                </Field>
                                <Button
                                    type="submit"
                                    disabled={createForm.processing}
                                >
                                    <Save className="size-4" />
                                    Create channel
                                </Button>
                            </form>
                        </Panel>
                        <Panel title="OBS readiness">
                            <ReadinessRow done label="Channel metadata" />
                            <ReadinessRow label="Private stream key" />
                            <ReadinessRow label="Prepared broadcast" />
                            <ReadinessRow label="Live ingest signal" />
                        </Panel>
                    </section>
                ) : (
                    <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_380px]">
                        <div className="grid gap-6">
                            <section className="grid gap-4 md:grid-cols-3">
                                <MetricCard
                                    label="Broadcast state"
                                    value={
                                        channel.is_live
                                            ? 'Live'
                                            : pendingBroadcast
                                              ? 'Ready'
                                              : 'Offline'
                                    }
                                />
                                <MetricCard
                                    label="Current viewers"
                                    value={String(channel.viewer_count)}
                                />
                                <MetricCard
                                    label="Stream key used"
                                    value={
                                        channel.stream_key_last_used_at
                                            ? new Date(
                                                  channel.stream_key_last_used_at,
                                              ).toLocaleDateString()
                                            : 'Never'
                                    }
                                />
                            </section>

<Panel
                                title="Broadcast prep"
                                description="Create a pending session before starting OBS."
                            >
                                <form
                                    onSubmit={createBroadcast}
                                    className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_160px_auto]"
                                >
                                    <Field
                                        label="Stream title"
                                        error={broadcastForm.errors.title}
                                    >
                                        <Input
                                            value={broadcastForm.data.title}
                                            onChange={(event) =>
                                                broadcastForm.setData(
                                                    'title',
                                                    event.target.value,
                                                )
                                            }
                                            placeholder="Building Nyone live"
                                            disabled={
                                                Boolean(liveBroadcast) ||
                                                Boolean(pendingBroadcast)
                                            }
                                        />
                                    </Field>
                                    <label className="mt-6 flex h-9 items-center gap-2 rounded-md border bg-background px-3 text-sm">
                                        <input
                                            type="checkbox"
                                            checked={
                                                broadcastForm.data
                                                    .recording_enabled
                                            }
                                            onChange={(event) =>
                                                broadcastForm.setData(
                                                    'recording_enabled',
                                                    event.target.checked,
                                                )
                                            }
                                            disabled={
                                                Boolean(liveBroadcast) ||
                                                Boolean(pendingBroadcast)
                                            }
                                        />
                                        Record VOD
                                    </label>
                                    <Button
                                        type="submit"
                                        disabled={
                                            broadcastForm.processing ||
                                            Boolean(liveBroadcast) ||
                                            Boolean(pendingBroadcast)
                                        }
                                        className="mt-6"
                                    >
                                        <Video className="size-4" />
                                        Prepare
                                    </Button>
                                </form>
                                {(liveBroadcast ?? pendingBroadcast) && (
                                    <div className="border-warning/40 bg-warning/10 text-warning mt-4 rounded-md border p-3 text-sm">
                                        Finish the current broadcast before
                                        preparing another session.
                                    </div>
                                )}
                            </Panel>

<Panel
                                title="Channel setup"
                                description="Public metadata used in the directory and watch page."
                            >
                                <form
                                    onSubmit={updateChannel}
                                    className="grid gap-4 md:grid-cols-2"
                                >
                                    <Field
                                        label="Display name"
                                        error={channelForm.errors.display_name}
                                    >
                                        <Input
                                            value={
                                                channelForm.data.display_name
                                            }
                                            onChange={(event) =>
                                                channelForm.setData(
                                                    'display_name',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                    </Field>
                                    <Field
                                        label="Slug"
                                        error={channelForm.errors.slug}
                                    >
                                        <Input
                                            value={channelForm.data.slug}
                                            onChange={(event) =>
                                                channelForm.setData(
                                                    'slug',
                                                    event.target.value.toLowerCase(),
                                                )
                                            }
                                        />
                                    </Field>
                                    <Field label="Category">
                                        <CategorySelect
                                            categories={categories}
                                            value={channelForm.data.category_id}
                                            onChange={(value) =>
                                                channelForm.setData(
                                                    'category_id',
                                                    value,
                                                )
                                            }
                                        />
                                    </Field>
                                    <Field
                                        label="Description"
                                        error={channelForm.errors.description}
                                        className="md:col-span-2"
                                    >
                                        <textarea
                                            value={
                                                channelForm.data.description ??
                                                ''
                                            }
                                            onChange={(event) =>
                                                channelForm.setData(
                                                    'description',
                                                    event.target.value,
                                                )
                                            }
                                            className="min-h-28 rounded-md border bg-background px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
                                        />
                                    </Field>
                                    <Button
                                        type="submit"
                                        disabled={channelForm.processing}
                                        className="md:col-span-2 md:w-fit"
                                    >
                                        <Save className="size-4" />
                                        Save channel
                                    </Button>
                                </form>
                            </Panel>

<Panel title="Recent broadcasts">
                                <div className="grid gap-2">
                                    {recentBroadcasts.map((broadcast) => (
                                        <BroadcastRow
                                            key={broadcast.id}
                                            broadcast={broadcast}
                                            onStop={() =>
                                                setStopTarget(broadcast)
                                            }
                                        />
                                    ))}
                                    {recentBroadcasts.length === 0 && (
                                        <EmptyState text="No broadcasts yet." />
                                    )}
                                </div>
                            </Panel>
                        </div>

<aside className="grid content-start gap-6">
                            <Panel title="OBS stream key">
                                <div className="border-warning/40 bg-warning/10 text-warning mb-4 flex items-start gap-3 rounded-md border p-3 text-sm">
                                    <ShieldAlert className="mt-0.5 size-4 shrink-0" />
                                    <span>
                                        Stream keys can publish to this channel.
                                        Rotate immediately if it was exposed.
                                    </span>
                                </div>
                                <div className="grid gap-3 text-sm">
                                    <CopyRow
                                        label="Server"
                                        value={streaming.ingestServer}
                                        copied={
                                            copiedText ===
                                            streaming.ingestServer
                                        }
                                        onCopy={copy}
                                    />
                                    <CopyRow
                                        label="Stream key"
                                        value={
                                            streaming.tokenizedPath ??
                                            'Rotate the key to reveal it once.'
                                        }
                                        copied={
                                            copiedText ===
                                            streaming.tokenizedPath
                                        }
                                        onCopy={copy}
                                        muted={!streaming.tokenizedPath}
                                    />
                                    {plainStreamKey && (
                                        <div className="border-warning/40 bg-warning/10 text-warning rounded-md border p-3">
                                            This key is shown once. Store it in
                                            OBS before leaving this page.
                                        </div>
                                    )}
                                    <Button
                                        variant="outline"
                                        onClick={() =>
                                            router.post(rotateStreamKeyRoute())
                                        }
                                    >
                                        <RotateCw className="size-4" />
                                        Rotate key
                                    </Button>
                                </div>
                            </Panel>

<Panel title="Current session">
                                {liveBroadcast ? (
                                    <div className="grid gap-3">
                                        <StatusPill
                                            live
                                            viewers={channel.viewer_count}
                                        />
                                        <div>
                                            <div className="font-medium">
                                                {liveBroadcast.title}
                                            </div>
                                            <div className="text-sm text-muted-foreground">
                                                {liveBroadcast.recording_enabled
                                                    ? 'Recording enabled'
                                                    : 'Live only'}
                                            </div>
                                        </div>
                                        <Button
                                            variant="destructive"
                                            size="sm"
                                            onClick={() =>
                                                setStopTarget(liveBroadcast)
                                            }
                                        >
                                            <StopCircle className="size-4" />
                                            Stop broadcast
                                        </Button>
                                    </div>
                                ) : pendingBroadcast ? (
                                    <div className="grid gap-3">
                                        <StatusPill ready />
                                        <div>
                                            <div className="font-medium">
                                                {pendingBroadcast.title}
                                            </div>
                                            <div className="text-sm text-muted-foreground">
                                                Start OBS to push the session
                                                live.
                                            </div>
                                        </div>
                                    </div>
                                ) : (
                                    <EmptyState text="No active session." />
                                )}
                            </Panel>
                        </aside>
                    </div>
                )}
            </div>

<Dialog
                open={stopTarget !== null}
                onOpenChange={(open) => !open && setStopTarget(null)}
            >
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Stop broadcast?</DialogTitle>
                        <DialogDescription>
                            This ends the live session and clears the channel's
                            live state. Viewers will see the offline screen.
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
                        <Button
                            variant="outline"
                            onClick={() => setStopTarget(null)}
                        >
                            Cancel
                        </Button>
                        <Button variant="destructive" onClick={stopBroadcast}>
                            <StopCircle className="size-4" />
                            Stop broadcast
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </>
    );
}

Dashboard.layout = {
    breadcrumbs: [
        {
            title: 'Creator Studio',
            href: dashboardRoute(),
        },
    ],
};

function MetricCard({ label, value }: { label: string; value: string }) {
    return (
        <div className="rounded-md border bg-card p-4 shadow-sm">
            <div className="text-sm text-muted-foreground">{label}</div>
            <div className="mt-1 text-2xl font-semibold">{value}</div>
        </div>
    );
}

function BroadcastRow({
    broadcast,
    onStop,
}: {
    broadcast: BroadcastSummary;
    onStop: () => void;
}) {
    const active = broadcast.status !== 'ended';

return (
        <div className="flex flex-col gap-3 rounded-md border bg-background p-3 md:flex-row md:items-center md:justify-between">
            <div className="min-w-0">
                <div className="truncate font-medium">{broadcast.title}</div>
                <div className="text-sm text-muted-foreground">
                    {broadcast.status ?? 'unknown'} -{' '}
                    {broadcast.recording_enabled ? 'recording' : 'live only'}
                    {broadcast.has_vod ? ' - VOD ready' : ''}
                </div>
            </div>
            {active && (
                <Button variant="outline" size="sm" onClick={onStop}>
                    <StopCircle className="size-4" />
                    Stop
                </Button>
            )}
        </div>
    );
}

if (ready) {
        return (
            <span className="border-warning/40 bg-warning/10 text-warning rounded-md border px-2 py-1 text-xs font-medium">
                READY
            </span>
        );
    }

return (
        <span className="rounded-md border px-2 py-1 text-xs text-muted-foreground">
            OFFLINE
        </span>
    );
}

function ChannelAvatar({ channel }: { channel: CreatorChannel | null }) {
    return (
        <div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-md bg-secondary text-secondary-foreground">
            {channel?.avatar_url ? (
                <img
                    src={channel.avatar_url}
                    alt=""
                    className="h-full w-full object-cover"
                />
            ) : (
                <Radio className="size-5" />
            )}
        </div>
    );
}

function EmptyState({ text }: { text: string }) {
    return (
        <div className="rounded-md border border-dashed bg-background p-6 text-center text-sm text-muted-foreground">
            {text}
        </div>
    );
}