import { Head, router } from '@inertiajs/react';
import React, { useState } from 'react';

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

interface Props {
    scenarios: Scenario[];
}

export default function Index({ scenarios }: Props) {
    const [showCreateForm, setShowCreateForm] = useState(false);
    const [name, setName] = useState('');
    const [errors, setErrors] = useState<{ name?: string }>({});

    const handleCreateScenario = (e: React.FormEvent) => {
        e.preventDefault();

        router.post('/scenarios', { name }, {
            onSuccess: () => {
                setShowCreateForm(false);
                setName('');
                setErrors({});
            },
            onError: (errors) => {
                setErrors(errors);
            }
        });
    };

    const handleCancel = () => {
        setShowCreateForm(false);
        setName('');
        setErrors({});
    };

    return (
        <>
            <Head title="Budget Scenarios" />

            <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">
                    <div className="mb-8">
                        <h1 className="text-3xl font-bold text-gray-900">Budget Scenarios</h1>
                        <p className="mt-2 text-gray-600">
                            Manage your budget projections with water-themed scenarios
                        </p>
                    </div>

                    {/* Create Scenario Form */}
                    {showCreateForm && (
                        <div className="mb-8 rounded-lg bg-white p-6 shadow" data-testid="scenario-form">
                            <h2 className="text-xl font-semibold text-gray-900 mb-4">Create New Scenario</h2>
                            <form onSubmit={handleCreateScenario}>
                                <div className="mb-4">
                                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                                        Scenario Name
                                    </label>
                                    <input
                                        type="text"
                                        id="name"
                                        data-testid="scenario-name"
                                        value={name}
                                        onChange={(e) => setName(e.target.value)}
                                        className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500"
                                        placeholder="e.g., 2025 Budget"
                                    />
                                    {errors.name && (
                                        <p className="mt-1 text-sm text-red-600">{errors.name}</p>
                                    )}
                                </div>
                                <div className="flex gap-3">
                                    <button
                                        type="submit"
                                        data-testid="save-scenario"
                                        className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                                    >
                                        Create Scenario
                                    </button>
                                    <button
                                        type="button"
                                        data-testid="cancel-scenario"
                                        onClick={handleCancel}
                                        className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                                    >
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </div>
                    )}

                    {/* Create Button */}
                    {!showCreateForm && (
                        <div className="mb-8">
                            <button
                                onClick={() => setShowCreateForm(true)}
                                data-testid="create-scenario-button"
                                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                            >
                                + New Scenario
                            </button>
                        </div>
                    )}

                    {/* Scenarios List */}
                    {scenarios.length === 0 ? (
                        <div className="rounded-lg bg-white p-12 text-center shadow">
                            <div className="mx-auto h-12 w-12 text-gray-400">
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                                </svg>
                            </div>
                            <h3 className="mt-4 text-lg font-semibold text-gray-900">No scenarios yet</h3>
                            <p className="mt-2 text-gray-600">
                                Create your first budget scenario to get started
                            </p>
                        </div>
                    ) : (
                        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                            {scenarios.map((scenario) => (
                                <div
                                    key={scenario.id}
                                    onClick={() => router.visit(`/scenarios/${scenario.id}`)}
                                    className="cursor-pointer rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg"
                                >
                                    <h3 className="text-lg font-semibold text-gray-900">
                                        {scenario.name}
                                    </h3>
                                    <p className="mt-2 text-sm text-gray-600">
                                        Created {new Date(scenario.created_at).toLocaleDateString()}
                                    </p>
                                    <div className="mt-4 flex items-center text-sm text-blue-600">
                                        View Details
                                        <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                        </svg>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}
