import { Form, Head, Link } from '@inertiajs/react';
import { useState } from 'react';
import ScoringSessionController from '@/actions/App/Http/Controllers/ScoringSessionController';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import ScoringStandShow from '@/pages/scoring/stand';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { dashboard } from '@/routes';

type SessionPlayer = {
    id: number;
    targets_hit: number;
    targets_attempted: number;
    user: {
        id: number;
        name: string;
        email: string;
    };
};

type SessionStand = {
    id: number;
    stand_name: string;
    position_label: string | null;
    shooting_mode: string;
    scoring_type: string;
    target_count: number;
    clay_count: number;
};

type Session = {
    id: number;
    name: string;
    status: string;
    notes: string | null;
    shot_at: string | null;
    entry_mode: string;
    default_shooting_mode: string | null;
    default_scoring_type: string | null;
    default_target_count: number | null;
    location: {
        name: string;
        town: string;
        region: string;
    } | null;
    players: SessionPlayer[];
    stands: SessionStand[];
};

type StandTargets = Record<
    number,
    Array<{
        label: string;
        display_label: string;
        type: string;
    }>
>;

type Scores = Record<number, Record<number, Record<string, number>>>;

type AvailableStand = {
    id: number;
    name: string;
    position_label: string | null;
    location_name: string;
    clay_count: number;
};

type PlayerOption = {
    id: number;
    name: string;
    email: string;
};

type StandView = {
    stand: {
        id: number;
        stand_name: string;
        position_label: string | null;
        shooting_mode: string;
        scoring_type: string;
        target_count: number;
        clay_count: number;
        total_possible_hits: number;
    };
    targets: Array<{
        label: string;
        display_label: string;
        type: string;
    }>;
    currentPlayer: {
        rank: number;
        targets_hit: number;
        targets_attempted: number;
        hit_percentage: number;
        user: {
            id: number;
            name: string;
            email: string;
        };
        scores: Record<string, number>;
    } | null;
    otherPlayers: Array<{
        rank: number;
        targets_hit: number;
        targets_attempted: number;
        hit_percentage: number;
        user: {
            id: number;
            name: string;
            email: string;
        };
        scores: Record<string, number>;
    }>;
    standPhotos: Array<{
        id: number;
        url: string;
        caption: string | null;
        uploaded_by: string;
        uploaded_at: string | null;
    }>;
};

function formatMode(mode: string): string {
    switch (mode) {
        case 'report_pairs':
            return 'Report Pairs';
        case 'true_pairs':
            return 'True Pairs';
        default:
            return 'Singles';
    }
}

function formatScoringType(scoringType: string): string {
    return scoringType === 'per_stand' ? 'Stand total' : 'Per clay';
}

function toDateTimeLocal(date: string | null): string {
    if (!date) {
        return '';
    }

    const parsedDate = new Date(date);
    const year = parsedDate.getFullYear();
    const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
    const day = String(parsedDate.getDate()).padStart(2, '0');
    const hours = String(parsedDate.getHours()).padStart(2, '0');
    const minutes = String(parsedDate.getMinutes()).padStart(2, '0');

    return `${year}-${month}-${day}T${hours}:${minutes}`;
}

export default function ScoringShow({
    session,
    scores,
    standTargets,
    availableStands = [],
    canManage,
    canDelete,
    allPlayers,
    standView,
}: {
    session: Session;
    scores: Scores;
    standTargets: StandTargets;
    availableStands?: AvailableStand[];
    canManage: boolean;
    canDelete: boolean;
    allPlayers: PlayerOption[];
    standView?: StandView | null;
}) {
    if (standView) {
        return (
            <ScoringStandShow
                session={{
                    id: session.id,
                    name: session.name,
                    status: session.status,
                    shot_at: session.shot_at,
                    location: session.location,
                }}
                stand={standView.stand}
                targets={standView.targets}
                currentPlayer={standView.currentPlayer}
                otherPlayers={standView.otherPlayers}
                standPhotos={standView.standPhotos}
            />
        );
    }

    const [selectedStandId, setSelectedStandId] = useState<number>(
        availableStands[0]?.id ?? 0,
    );
    const defaultShootingMode = session.default_shooting_mode ?? 'singles';
    const defaultScoringType = session.default_scoring_type ?? 'per_clay';
    const defaultTargetCount = session.default_target_count ?? 30;
    const locationDescription = session.location
        ? `${session.location.name} · ${session.location.town}, ${session.location.region}`
        : 'Location pending';

    return (
        <>
            <Head title={session.name} />

            <div className="space-y-6 p-4 md:p-6">
                <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                    <Heading
                        title={session.name}
                        description={locationDescription}
                    />
                    <div className="flex flex-wrap gap-2">
                        <Badge variant="secondary">
                            {session.players.length} players
                        </Badge>
                        <Badge variant="secondary">
                            {session.stands.length} stands
                        </Badge>
                        <Badge
                            className={
                                session.status === 'completed'
                                    ? 'bg-emerald-600/10 text-emerald-700 hover:bg-emerald-600/10 dark:text-emerald-300'
                                    : 'bg-amber-500/10 text-amber-700 hover:bg-amber-500/10 dark:text-amber-300'
                            }
                        >
                            {session.status === 'completed'
                                ? 'Completed'
                                : 'In progress'}
                        </Badge>
                    </div>
                </div>

                <Card className="border-border/70">
                    {canManage ? (
                        <CardContent className="border-b border-border/70 pb-6">
                            <div className="mb-4">
                                <CardTitle className="text-lg">
                                    Add another stand
                                </CardTitle>
                                <CardDescription className="mt-1">
                                    Append another stand to this scorecard, then
                                    save scores for it in the table below.
                                </CardDescription>
                            </div>

                            <Form
                                {...ScoringSessionController.storeStand.form(
                                    session.id,
                                )}
                                className="space-y-4"
                            >
                                {({ processing: addingStand, errors }) => (
                                    <>
                                        <div className="grid gap-2">
                                            <label
                                                htmlFor="scorecard-stand-id"
                                                className="text-sm font-medium"
                                            >
                                                Stand
                                            </label>
                                            <select
                                                id="scorecard-stand-id"
                                                name="stand_id"
                                                value={selectedStandId}
                                                onChange={(event) =>
                                                    setSelectedStandId(
                                                        Number(
                                                            event.target.value,
                                                        ),
                                                    )
                                                }
                                                className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                            >
                                                {availableStands.length ===
                                                0 ? (
                                                    <option value={0}>
                                                        No more stands available
                                                    </option>
                                                ) : (
                                                    availableStands.map(
                                                        (stand) => (
                                                            <option
                                                                key={stand.id}
                                                                value={stand.id}
                                                            >
                                                                {
                                                                    stand.location_name
                                                                }{' '}
                                                                ·{' '}
                                                                {stand.position_label
                                                                    ? `Stand ${stand.position_label}`
                                                                    : stand.name}{' '}
                                                                ·{' '}
                                                                {
                                                                    stand.clay_count
                                                                }{' '}
                                                                clays
                                                            </option>
                                                        ),
                                                    )
                                                )}
                                            </select>
                                            <InputError
                                                message={errors.stand_id}
                                            />
                                        </div>

                                        <div className="grid gap-4 sm:grid-cols-3">
                                            <div className="grid gap-2">
                                                <label className="text-sm font-medium">
                                                    Shooting mode
                                                </label>
                                                <select
                                                    name="shooting_mode"
                                                    defaultValue={
                                                        defaultShootingMode
                                                    }
                                                    className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                                >
                                                    <option value="singles">
                                                        Singles
                                                    </option>
                                                    <option value="report_pairs">
                                                        Report Pairs
                                                    </option>
                                                    <option value="true_pairs">
                                                        True Pairs
                                                    </option>
                                                </select>
                                                <InputError
                                                    message={
                                                        errors.shooting_mode
                                                    }
                                                />
                                            </div>
                                            <div className="grid gap-2">
                                                <label className="text-sm font-medium">
                                                    Score by
                                                </label>
                                                <select
                                                    name="scoring_type"
                                                    defaultValue={
                                                        defaultScoringType
                                                    }
                                                    className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                                >
                                                    <option value="per_clay">
                                                        Each clay
                                                    </option>
                                                    <option value="per_stand">
                                                        Whole stand total
                                                    </option>
                                                </select>
                                                <InputError
                                                    message={
                                                        errors.scoring_type
                                                    }
                                                />
                                            </div>
                                            <div className="grid gap-2">
                                                <label className="text-sm font-medium">
                                                    Shots per clay
                                                </label>
                                                <input
                                                    type="number"
                                                    name="target_count"
                                                    min={1}
                                                    max={30}
                                                    defaultValue={
                                                        defaultTargetCount
                                                    }
                                                    className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                                />
                                                <InputError
                                                    message={
                                                        errors.target_count
                                                    }
                                                />
                                            </div>
                                        </div>

                                        <Button
                                            disabled={
                                                addingStand ||
                                                availableStands.length === 0
                                            }
                                        >
                                            Add stand to scorecard
                                        </Button>
                                    </>
                                )}
                            </Form>
                        </CardContent>
                    ) : null}

                    {canManage ? (
                        <CardContent className="border-b border-border/70 pb-6">
                            <div className="mb-4">
                                <CardTitle className="text-lg">
                                    Session setup
                                </CardTitle>
                                <CardDescription className="mt-1">
                                    Update the round details or squad after
                                    creation. Removing a player also removes
                                    their saved scores for this round.
                                </CardDescription>
                            </div>

                            <Form
                                {...ScoringSessionController.updateSetup.form(
                                    session.id,
                                )}
                                className="space-y-4"
                            >
                                {({ processing: savingSetup, errors }) => (
                                    <>
                                        <div className="grid gap-4 lg:grid-cols-[1fr_0.7fr]">
                                            <div className="grid gap-2">
                                                <label
                                                    htmlFor="setup-name"
                                                    className="text-sm font-medium"
                                                >
                                                    Session name
                                                </label>
                                                <input
                                                    id="setup-name"
                                                    name="name"
                                                    defaultValue={session.name}
                                                    className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                                />
                                                <InputError
                                                    message={errors.name}
                                                />
                                            </div>
                                            <div className="grid gap-2">
                                                <label
                                                    htmlFor="setup-shot-at"
                                                    className="text-sm font-medium"
                                                >
                                                    Shot date and time
                                                </label>
                                                <input
                                                    id="setup-shot-at"
                                                    name="shot_at"
                                                    type="datetime-local"
                                                    defaultValue={toDateTimeLocal(
                                                        session.shot_at,
                                                    )}
                                                    className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                                />
                                                <InputError
                                                    message={errors.shot_at}
                                                />
                                            </div>
                                        </div>

                                        {session.entry_mode === 'live' ? (
                                            <div className="grid gap-4 md:grid-cols-3">
                                                <div className="grid gap-2">
                                                    <label className="text-sm font-medium">
                                                        Default shooting mode
                                                    </label>
                                                    <select
                                                        name="default_shooting_mode"
                                                        defaultValue={
                                                            session.default_shooting_mode ??
                                                            'singles'
                                                        }
                                                        className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                                    >
                                                        <option value="singles">
                                                            Singles
                                                        </option>
                                                        <option value="report_pairs">
                                                            Report Pairs
                                                        </option>
                                                        <option value="true_pairs">
                                                            True Pairs
                                                        </option>
                                                    </select>
                                                    <InputError
                                                        message={
                                                            errors.default_shooting_mode
                                                        }
                                                    />
                                                </div>
                                                <div className="grid gap-2">
                                                    <label className="text-sm font-medium">
                                                        Default score by
                                                    </label>
                                                    <select
                                                        name="default_scoring_type"
                                                        defaultValue={
                                                            session.default_scoring_type ??
                                                            'per_clay'
                                                        }
                                                        className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                                    >
                                                        <option value="per_clay">
                                                            Each clay
                                                        </option>
                                                        <option value="per_stand">
                                                            Whole stand total
                                                        </option>
                                                    </select>
                                                    <InputError
                                                        message={
                                                            errors.default_scoring_type
                                                        }
                                                    />
                                                </div>
                                                <div className="grid gap-2">
                                                    <label className="text-sm font-medium">
                                                        Default targets per clay
                                                    </label>
                                                    <input
                                                        type="number"
                                                        name="default_target_count"
                                                        min={1}
                                                        max={30}
                                                        defaultValue={
                                                            session.default_target_count ??
                                                            30
                                                        }
                                                        className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                                    />
                                                    <InputError
                                                        message={
                                                            errors.default_target_count
                                                        }
                                                    />
                                                </div>
                                            </div>
                                        ) : null}

                                        <div className="grid gap-3">
                                            <div>
                                                <p className="text-sm font-medium">
                                                    Players
                                                </p>
                                                <p className="text-sm text-muted-foreground">
                                                    Keep the squad current if
                                                    someone joins late or drops
                                                    out.
                                                </p>
                                            </div>
                                            <div className="grid gap-3 sm:grid-cols-2">
                                                {allPlayers.map((player) => (
                                                    <label
                                                        key={`setup-${player.id}`}
                                                        className="flex items-start gap-3 rounded-2xl border border-border/70 bg-muted/15 p-4"
                                                    >
                                                        <input
                                                            type="checkbox"
                                                            name="player_ids[]"
                                                            value={player.id}
                                                            defaultChecked={session.players.some(
                                                                (
                                                                    sessionPlayer,
                                                                ) =>
                                                                    sessionPlayer
                                                                        .user
                                                                        .id ===
                                                                    player.id,
                                                            )}
                                                            className="mt-1 size-4 rounded border-border text-primary focus:ring-primary"
                                                        />
                                                        <div className="min-w-0">
                                                            <p className="font-medium">
                                                                {player.name}
                                                            </p>
                                                            <p className="truncate text-sm text-muted-foreground">
                                                                {player.email}
                                                            </p>
                                                        </div>
                                                    </label>
                                                ))}
                                            </div>
                                            <InputError
                                                message={errors.player_ids}
                                            />
                                        </div>

                                        <Button disabled={savingSetup}>
                                            Save setup
                                        </Button>
                                    </>
                                )}
                            </Form>
                        </CardContent>
                    ) : null}

                    <CardHeader>
                        <CardTitle>
                            {session.entry_mode === 'live'
                                ? 'Completed live score'
                                : 'Bulk score entry'}
                        </CardTitle>
                        <CardDescription>
                            {canManage
                                ? session.entry_mode === 'live'
                                    ? 'Live rounds land here once completed so they can be edited and deleted with the same summary workflow as bulk scoring.'
                                    : 'One row per player. Per-clay stands expand into individual clay columns, while stand-total stands stay as a single score column.'
                                : 'Completed rounds are visible to all signed-in members in read-only mode so you can compare results across the club.'}
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <Form
                            {...ScoringSessionController.update.form(session.id)}
                            className="space-y-6"
                        >
                            {({ processing }) => (
                                <>
                                    <div className="overflow-x-auto rounded-2xl border border-border/70">
                                        <table className="min-w-full text-sm">
                                            <thead className="bg-muted/30">
                                                <tr>
                                                    <th className="sticky left-0 z-10 border-r border-border/70 bg-muted/30 px-4 py-3 text-left font-medium">
                                                        Player
                                                    </th>
                                                    {session.stands.map((stand) => (
                                                        <th
                                                            key={stand.id}
                                                            colSpan={
                                                                standTargets[
                                                                    stand.id
                                                                ]?.length ?? 0
                                                            }
                                                            className="border-r border-border/70 px-4 py-3 text-left font-medium"
                                                        >
                                                            <div>
                                                                <Link
                                                                    href={ScoringSessionController.showStand({
                                                                        scoringSession:
                                                                            session.id,
                                                                        sessionStand:
                                                                            stand.id,
                                                                    })}
                                                                    className="font-medium underline-offset-4 hover:underline"
                                                                >
                                                                    {
                                                                        stand.stand_name
                                                                    }
                                                                </Link>
                                                                <p className="text-xs text-muted-foreground">
                                                                    {stand.position_label
                                                                        ? `Position ${stand.position_label}`
                                                                        : 'No position label'}{' '}
                                                                    ·{' '}
                                                                    {formatMode(
                                                                        stand.shooting_mode,
                                                                    )}{' '}
                                                                    ·{' '}
                                                                    {formatScoringType(
                                                                        stand.scoring_type,
                                                                    )}{' '}
                                                                    · Max{' '}
                                                                    {stand.scoring_type ===
                                                                    'per_stand'
                                                                        ? stand.target_count *
                                                                          stand.clay_count
                                                                        : stand.target_count}
                                                                </p>
                                                            </div>
                                                        </th>
                                                    ))}
                                                    <th className="px-4 py-3 text-left font-medium">
                                                        Total
                                                    </th>
                                                </tr>
                                                <tr className="border-t border-border/70 bg-background">
                                                    <th className="sticky left-0 z-10 border-r border-border/70 bg-background px-4 py-3 text-left font-medium">
                                                        Target
                                                    </th>
                                                    {session.stands.flatMap(
                                                        (stand) =>
                                                            (
                                                                standTargets[
                                                                    stand.id
                                                                ] ?? []
                                                            ).map((target) => (
                                                                <th
                                                                    key={`${stand.id}-${target.label}`}
                                                                    className="border-r border-border/70 px-3 py-3 text-center font-medium"
                                                                >
                                                                    <div>
                                                                        <p>
                                                                            {
                                                                                target.display_label
                                                                            }
                                                                        </p>
                                                                        <p className="text-xs text-muted-foreground">
                                                                            {
                                                                                target.type
                                                                            }
                                                                        </p>
                                                                    </div>
                                                                </th>
                                                            )),
                                                    )}
                                                    <th className="px-4 py-3 text-left font-medium">
                                                        Hits
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody className="divide-y divide-border/70">
                                                {session.players.map(
                                                    (player) => (
                                                        <tr
                                                            key={player.id}
                                                            className="bg-background"
                                                        >
                                                            <td className="sticky left-0 z-10 border-r border-border/70 bg-background px-4 py-3 align-top">
                                                                <p className="font-medium">
                                                                    {
                                                                        player
                                                                            .user
                                                                            .name
                                                                    }
                                                                </p>
                                                                <p className="text-xs text-muted-foreground">
                                                                    {
                                                                        player
                                                                            .user
                                                                            .email
                                                                    }
                                                                </p>
                                                            </td>
                                                            {session.stands.flatMap(
                                                                (stand) =>
                                                                    (
                                                                        standTargets[
                                                                            stand
                                                                                .id
                                                                        ] ?? []
                                                                    ).map(
                                                                        (
                                                                            target,
                                                                        ) => (
                                                                            <td
                                                                                key={`${player.id}-${stand.id}-${target.label}`}
                                                                                className="border-r border-border/70 px-2 py-3"
                                                                            >
                                                                                <input
                                                                                    name={`scores[${player.id}][${stand.id}][${target.label}]`}
                                                                                    type="number"
                                                                                    min={0}
                                                                                    max={
                                                                                        stand.scoring_type ===
                                                                                        'per_stand'
                                                                                            ? stand.target_count *
                                                                                              stand.clay_count
                                                                                            : stand.target_count
                                                                                    }
                                                                                    defaultValue={
                                                                                        scores[
                                                                                            player
                                                                                                .id
                                                                                        ]?.[
                                                                                            stand
                                                                                                .id
                                                                                        ]?.[
                                                                                            target
                                                                                                .label
                                                                                        ] ??
                                                                                        0
                                                                                    }
                                                                                    disabled={
                                                                                        !canManage
                                                                                    }
                                                                                    className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 w-18 rounded-md border bg-transparent px-2 text-center text-sm outline-none focus-visible:ring-[3px]"
                                                                                />
                                                                            </td>
                                                                        ),
                                                                    ),
                                                            )}
                                                            <td className="px-4 py-3 font-medium">
                                                                {
                                                                    player.targets_hit
                                                                }
                                                                /
                                                                {
                                                                    player.targets_attempted
                                                                }
                                                            </td>
                                                        </tr>
                                                    ),
                                                )}
                                            </tbody>
                                        </table>
                                    </div>

                                    <div className="grid gap-4 lg:grid-cols-[1fr_0.5fr]">
                                        <div className="grid gap-2">
                                            <label
                                                htmlFor="session-notes"
                                                className="text-sm font-medium"
                                            >
                                                Session notes
                                            </label>
                                            <textarea
                                                id="session-notes"
                                                name="notes"
                                                defaultValue={session.notes ?? ''}
                                                disabled={!canManage}
                                                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 min-h-24 rounded-md border bg-transparent px-3 py-2 text-sm outline-none focus-visible:ring-[3px]"
                                                placeholder="Optional notes about squad flow, weather, or scoring context."
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <label
                                                htmlFor="session-status"
                                                className="text-sm font-medium"
                                            >
                                                Session status
                                            </label>
                                            <select
                                                id="session-status"
                                                name="status"
                                                defaultValue={session.status}
                                                disabled={!canManage}
                                                className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                            >
                                                <option value="in_progress">
                                                    In progress
                                                </option>
                                                <option value="completed">
                                                    Completed
                                                </option>
                                            </select>
                                            <p className="text-sm text-muted-foreground">
                                                Mark a session completed when
                                                the round is finalized. Player
                                                stats are still updated whenever
                                                you save.
                                            </p>
                                        </div>
                                    </div>

                                    <div className="flex flex-wrap gap-3">
                                        {canManage ? (
                                            <Button disabled={processing}>
                                                Save scores
                                            </Button>
                                        ) : null}
                                        {canManage ? (
                                            <Link
                                                href={
                                                    session.entry_mode === 'live'
                                                        ? ScoringSessionController.live(
                                                              session.id,
                                                          )
                                                        : ScoringSessionController.liveSetup()
                                                }
                                                className="inline-flex h-10 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-xs"
                                            >
                                                {session.entry_mode === 'live'
                                                    ? 'Open live scoring'
                                                    : 'Open live scoring setup'}
                                            </Link>
                                        ) : null}
                                        <Link
                                            href={
                                                session.entry_mode === 'live'
                                                    ? ScoringSessionController.liveSetup()
                                                    : ScoringSessionController.index()
                                            }
                                            className="inline-flex h-10 items-center rounded-md border border-border px-4 text-sm font-medium"
                                        >
                                            {session.entry_mode === 'live'
                                                ? 'Back to live scoring setup'
                                                : 'Back to scoring setup'}
                                        </Link>
                                    </div>
                                </>
                            )}
                        </Form>

                        {canDelete ? (
                            <div className="mt-4">
                                <Dialog>
                                    <DialogTrigger asChild>
                                        <Button
                                            type="button"
                                            variant="destructive"
                                        >
                                            Delete session
                                        </Button>
                                    </DialogTrigger>
                                    <DialogContent>
                                        <DialogTitle>
                                            Delete this scoring session?
                                        </DialogTitle>
                                        <DialogDescription>
                                            This removes the saved scores for
                                            every player in the round and
                                            refreshes their stored stats.
                                        </DialogDescription>
                                        <Form
                                            {...ScoringSessionController.destroy.form(
                                                session.id,
                                            )}
                                            className="space-y-6"
                                        >
                                            {({ processing: deleting }) => (
                                                <DialogFooter className="gap-2">
                                                    <DialogClose asChild>
                                                        <Button
                                                            type="button"
                                                            variant="secondary"
                                                        >
                                                            Cancel
                                                        </Button>
                                                    </DialogClose>
                                                    <Button
                                                        variant="destructive"
                                                        disabled={deleting}
                                                    >
                                                        Delete session
                                                    </Button>
                                                </DialogFooter>
                                            )}
                                        </Form>
                                    </DialogContent>
                                </Dialog>
                            </div>
                        ) : null}
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

ScoringShow.layout = {
    breadcrumbs: [
        {
            title: 'Dashboard',
            href: dashboard(),
        },
        {
            title: 'Scoring',
            href: ScoringSessionController.index(),
        },
    ],
};