import { Head, Link } from '@inertiajs/react';

interface Scenario {
    id: number;
    name: string;
    created_at: string;
    updated_at: string;
}

interface Props {
    scenario: Scenario;
}

export default function Show({ scenario }: Props) {
    return (
        <>
            <Head title={scenario.name} />
            
            <div className="min-h-screen bg-gray-50 py-8">
                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    {/* Header */}
                    <div className="mb-8">
                        <div className="flex items-center justify-between">
                            <div>
                                <Link 
                                    href="/" 
                                    className="text-sm text-blue-600 hover:text-blue-500 mb-2 inline-flex items-center"
                                >
                                    <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                                    </svg>
                                    Back to Scenarios
                                </Link>
                                <h1 className="text-3xl font-bold text-gray-900">{scenario.name}</h1>
                                <p className="mt-2 text-gray-600">
                                    Water flows through the pipeline into prioritized buckets
                                </p>
                            </div>
                        </div>
                    </div>

                    {/* Coming Soon Content */}
                    <div className="rounded-lg bg-white p-12 text-center shadow">
                        <div className="mx-auto h-16 w-16 text-blue-600">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <h2 className="mt-4 text-xl font-semibold text-gray-900">
                            Scenario Dashboard Coming Soon
                        </h2>
                        <p className="mt-2 text-gray-600">
                            This will show buckets, streams, timeline, and calculation controls
                        </p>
                        <div className="mt-6">
                            <Link
                                href="/"
                                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
                            >
                                Return to Scenarios
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}