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

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

interface Bucket {
    id: string;
    name: string;
    type: 'need' | 'want' | 'overflow';
    type_label: string;
    priority: number;
    sort_order: number;
    allocation_type: string;
    allocation_value: number | null;
    allocation_type_label: string;
    formatted_allocation_value: string;
    current_balance: number;
    has_available_space: boolean;
    available_space: number;
}

interface Stream {
    id: string;
    name: string;
    type: 'income' | 'expense';
    type_label: string;
    amount: number;
    frequency: string;
    frequency_label: string;
    start_date: string;
    end_date: string | null;
    bucket_id: string | null;
    bucket_name: string | null;
    description: string | null;
    is_active: boolean;
    monthly_equivalent: number;
}

interface StreamStats {
    total_streams: number;
    active_streams: number;
    income_streams: number;
    expense_streams: number;
    monthly_income: number;
    monthly_expenses: number;
    monthly_net: number;
}

interface Props {
    scenario: Scenario;
    buckets: { data: Bucket[] };
    streams: { data: Stream[] };
    streamStats?: StreamStats;
}

const bucketTypeBorderColor = {
    need: 'border-blue-500',
    want: 'border-green-500',
    overflow: 'border-amber-500',
} as const;

const defaultFormData = {
    name: '',
    type: 'need' as Bucket['type'],
    allocation_type: 'fixed_limit',
    allocation_value: ''
};

export default function Show({ scenario, buckets, streams = { data: [] }, streamStats }: Props) {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [editingBucket, setEditingBucket] = useState<Bucket | null>(null);
    const [formData, setFormData] = useState({ ...defaultFormData });

    const handleEdit = (bucket: Bucket) => {
        setEditingBucket(bucket);
        setFormData({
            name: bucket.name,
            type: bucket.type,
            allocation_type: bucket.allocation_type,
            allocation_value: bucket.allocation_value ? bucket.allocation_value.toString() : ''
        });
        setIsModalOpen(true);
    };

    const handleDelete = async (bucket: Bucket) => {
        if (!confirm(`Are you sure you want to delete "${bucket.name}"?`)) {
            return;
        }

        try {
            const response = await fetch(`/buckets/${bucket.id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                },
            });

            if (response.ok) {
                router.reload({ only: ['buckets'] });
            } else {
                console.error('Failed to delete bucket');
            }
        } catch (error) {
            console.error('Error deleting bucket:', error);
        }
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);

        const url = editingBucket 
            ? `/buckets/${editingBucket.id}`
            : `/scenarios/${scenario.id}/buckets`;
        
        const method = editingBucket ? 'PATCH' : 'POST';

        try {
            const response = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                },
                body: JSON.stringify({
                    name: formData.name,
                    type: formData.type,
                    allocation_type: formData.allocation_type,
                    allocation_value: formData.allocation_value ? parseFloat(formData.allocation_value) : null,
                    priority: editingBucket ? editingBucket.priority : undefined
                }),
            });

            if (response.ok) {
                setIsModalOpen(false);
                setFormData({ ...defaultFormData });
                setEditingBucket(null);
                router.reload({ only: ['buckets'] });
            } else {
                const errorData = await response.json();
                console.error(`Failed to ${editingBucket ? 'update' : 'create'} bucket:`, errorData);
            }
        } catch (error) {
            console.error(`Error ${editingBucket ? 'updating' : 'creating'} bucket:`, error);
        } finally {
            setIsSubmitting(false);
        }
    };

    const handlePriorityChange = async (bucketId: string, direction: 'up' | 'down') => {
        const bucket = buckets.data.find(b => b.id === bucketId);
        if (!bucket) return;

        const newPriority = direction === 'up' ? bucket.priority - 1 : bucket.priority + 1;
        
        // Don't allow moving beyond bounds
        if (newPriority < 1 || newPriority > buckets.data.length) return;

        try {
            const response = await fetch(`/buckets/${bucketId}`, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                },
                body: JSON.stringify({
                    name: bucket.name,
                    type: bucket.type,
                    allocation_type: bucket.allocation_type,
                    allocation_value: bucket.allocation_value,
                    priority: newPriority
                }),
            });

            if (response.ok) {
                router.reload({ only: ['buckets'] });
            } else {
                console.error('Failed to update bucket priority');
            }
        } catch (error) {
            console.error('Error updating bucket priority:', error);
        }
    };

    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>

                    {/* Bucket Dashboard */}
                    <div className="space-y-6">
                        <div className="flex items-center justify-between">
                            <h2 className="text-xl font-semibold text-gray-900">Buckets</h2>
                            <button 
                                onClick={() => {
                                    setEditingBucket(null);
                                    setFormData({ ...defaultFormData });
                                    setIsModalOpen(true);
                                }}
                                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
                            >
                                + Add Bucket
                            </button>
                        </div>
                        
                        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                            {buckets.data.map((bucket) => (
                                <div
                                    key={bucket.id}
                                    className={`rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg border-l-4 ${bucketTypeBorderColor[bucket.type]}`}
                                >
                                    <div className="flex items-start justify-between">
                                        <div className="flex-1">
                                            <h3 className="text-lg font-semibold text-gray-900">
                                                {bucket.name}
                                            </h3>
                                            <p className="text-sm text-gray-600 mt-1">
                                                Priority {bucket.priority} • {bucket.type_label} • {bucket.allocation_type_label}
                                            </p>
                                        </div>
                                        <div className="flex items-center gap-1">
                                            <button
                                                onClick={() => handlePriorityChange(bucket.id, 'up')}
                                                disabled={bucket.priority === 1}
                                                className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
                                                title="Move up in priority"
                                            >
                                                <svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                                                </svg>
                                            </button>
                                            <button
                                                onClick={() => handlePriorityChange(bucket.id, 'down')}
                                                disabled={bucket.priority === buckets.data.length}
                                                className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
                                                title="Move down in priority"
                                            >
                                                <svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                                </svg>
                                            </button>
                                            <span className="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">
                                                #{bucket.priority}
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div className="mt-4">
                                        <div className="flex items-center justify-between">
                                            <span className="text-sm text-gray-600">Current Balance</span>
                                            <span className="text-lg font-semibold text-gray-900">
                                                ${bucket.current_balance.toFixed(2)}
                                            </span>
                                        </div>
                                        
                                        <div className="mt-2">
                                            <span className="text-sm text-gray-600">
                                                Allocation: {bucket.formatted_allocation_value}
                                            </span>
                                        </div>
                                        
                                        {bucket.allocation_type === 'fixed_limit' && (
                                            <div className="mt-3">
                                                <div className="flex justify-between text-sm">
                                                    <span>Progress</span>
                                                    <span>
                                                        ${bucket.current_balance.toFixed(2)} / ${Number(bucket.allocation_value)?.toFixed(2)}
                                                    </span>
                                                </div>
                                                <div className="mt-1 h-2 bg-gray-200 rounded-full">
                                                    <div 
                                                        className="h-2 bg-blue-600 rounded-full transition-all"
                                                        style={{
                                                            width: `${bucket.allocation_value ? Math.min((bucket.current_balance / Number(bucket.allocation_value)) * 100, 100) : 0}%`
                                                        }}
                                                    />
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                    
                                    <div className="mt-4 flex gap-2">
                                        <button
                                            onClick={() => handleEdit(bucket)}
                                            className="flex-1 text-sm text-blue-600 hover:text-blue-500"
                                        >
                                            Edit
                                        </button>
                                        {bucket.type !== 'overflow' && (
                                            <button
                                                onClick={() => handleDelete(bucket)}
                                                className="flex-1 text-sm text-red-600 hover:text-red-500"
                                            >
                                                Delete
                                            </button>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                        
                        {/* Streams Section */}
                        <div className="mt-8">
                            <div className="flex items-center justify-between mb-4">
                                <h2 className="text-xl font-semibold text-gray-900">Income & Expense Streams</h2>
                                <button 
                                    className="rounded-md bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-500"
                                >
                                    + Add Stream
                                </button>
                            </div>
                            
                            {/* Stream Statistics */}
                            {streamStats && (
                                <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
                                    <div className="bg-white overflow-hidden shadow rounded-lg">
                                        <div className="px-4 py-5 sm:p-6">
                                            <dt className="text-sm font-medium text-gray-500 truncate">
                                                Monthly Income
                                            </dt>
                                            <dd className="mt-1 text-3xl font-semibold text-green-600">
                                                ${streamStats.monthly_income.toFixed(2)}
                                            </dd>
                                        </div>
                                    </div>
                                    <div className="bg-white overflow-hidden shadow rounded-lg">
                                        <div className="px-4 py-5 sm:p-6">
                                            <dt className="text-sm font-medium text-gray-500 truncate">
                                                Monthly Expenses
                                            </dt>
                                            <dd className="mt-1 text-3xl font-semibold text-red-600">
                                                ${streamStats.monthly_expenses.toFixed(2)}
                                            </dd>
                                        </div>
                                    </div>
                                    <div className="bg-white overflow-hidden shadow rounded-lg">
                                        <div className="px-4 py-5 sm:p-6">
                                            <dt className="text-sm font-medium text-gray-500 truncate">
                                                Net Cash Flow
                                            </dt>
                                            <dd className={`mt-1 text-3xl font-semibold ${streamStats.monthly_net >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                                                ${streamStats.monthly_net.toFixed(2)}
                                            </dd>
                                        </div>
                                    </div>
                                    <div className="bg-white overflow-hidden shadow rounded-lg">
                                        <div className="px-4 py-5 sm:p-6">
                                            <dt className="text-sm font-medium text-gray-500 truncate">
                                                Active Streams
                                            </dt>
                                            <dd className="mt-1 text-3xl font-semibold text-gray-900">
                                                {streamStats.active_streams} / {streamStats.total_streams}
                                            </dd>
                                        </div>
                                    </div>
                                </div>
                            )}
                            
                            {streams.data.length === 0 ? (
                                <div className="rounded-lg bg-white p-8 text-center shadow">
                                    <p className="text-gray-600">No streams yet. Add income or expense streams to start tracking cash flow.</p>
                                </div>
                            ) : (
                                <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                                    <table className="min-w-full divide-y divide-gray-300">
                                        <thead className="bg-gray-50">
                                            <tr>
                                                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                                                    Name
                                                </th>
                                                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                                                    Type
                                                </th>
                                                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                                                    Amount
                                                </th>
                                                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                                                    Frequency
                                                </th>
                                                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                                                    Bucket
                                                </th>
                                                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                                                    Start Date
                                                </th>
                                                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                                                    Status
                                                </th>
                                                <th className="relative px-6 py-3">
                                                    <span className="sr-only">Actions</span>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-gray-200 bg-white">
                                            {streams.data.map((stream) => (
                                                <tr key={stream.id}>
                                                    <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
                                                        {stream.name}
                                                    </td>
                                                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
                                                        <span className={`inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${
                                                            stream.type === 'income' 
                                                                ? 'bg-green-100 text-green-800' 
                                                                : 'bg-red-100 text-red-800'
                                                        }`}>
                                                            {stream.type_label}
                                                        </span>
                                                    </td>
                                                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
                                                        ${stream.amount.toFixed(2)}
                                                    </td>
                                                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
                                                        {stream.frequency_label}
                                                    </td>
                                                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
                                                        {stream.bucket_name || '-'}
                                                    </td>
                                                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
                                                        {new Date(stream.start_date).toLocaleDateString()}
                                                    </td>
                                                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
                                                        <button
                                                            className={`inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${
                                                                stream.is_active 
                                                                    ? 'bg-green-100 text-green-800' 
                                                                    : 'bg-gray-100 text-gray-800'
                                                            }`}
                                                        >
                                                            {stream.is_active ? 'Active' : 'Inactive'}
                                                        </button>
                                                    </td>
                                                    <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                                        <button className="text-indigo-600 hover:text-indigo-900 mr-3">
                                                            Edit
                                                        </button>
                                                        <button className="text-red-600 hover:text-red-900">
                                                            Delete
                                                        </button>
                                                    </td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            )}
                        </div>
                        
                        {/* Placeholder for future features */}
                        <div className="rounded-lg bg-blue-50 p-6 text-center">
                            <h3 className="text-lg font-medium text-blue-900">
                                Coming Next: Timeline & Projections
                            </h3>
                            <p className="text-sm text-blue-700 mt-2">
                                Calculate projections to see your money flow through these buckets over time.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {/* Add Bucket Modal */}
            {isModalOpen && (
                <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
                    <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
                        <div className="mt-3">
                            <h3 className="text-lg font-medium text-gray-900 mb-4">{editingBucket ? 'Edit Bucket' : 'Add New Bucket'}</h3>
                            <form onSubmit={handleSubmit} className="space-y-4">
                                <div>
                                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                                        Bucket Name
                                    </label>
                                    <input
                                        type="text"
                                        id="name"
                                        value={formData.name}
                                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900"
                                        placeholder="e.g., Travel Fund"
                                        required
                                    />
                                </div>

                                {/* Hide type select for overflow buckets (type is fixed) */}
                                {!(editingBucket && editingBucket.type === 'overflow') && (
                                    <div>
                                        <label htmlFor="type" className="block text-sm font-medium text-gray-700">
                                            Bucket Type
                                        </label>
                                        <select
                                            id="type"
                                            value={formData.type}
                                            onChange={(e) => setFormData({ ...formData, type: e.target.value as Bucket['type'] })}
                                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900"
                                        >
                                            <option value="need">Need</option>
                                            <option value="want">Want</option>
                                        </select>
                                    </div>
                                )}

                                {/* Hide allocation type select for overflow (always unlimited) */}
                                {formData.type !== 'overflow' && (
                                    <div>
                                        <label htmlFor="allocation_type" className="block text-sm font-medium text-gray-700">
                                            Allocation Type
                                        </label>
                                        <select
                                            id="allocation_type"
                                            value={formData.allocation_type}
                                            onChange={(e) => setFormData({ ...formData, allocation_type: e.target.value })}
                                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900"
                                        >
                                            <option value="fixed_limit">Fixed Limit</option>
                                            <option value="percentage">Percentage</option>
                                        </select>
                                    </div>
                                )}

                                {formData.allocation_type !== 'unlimited' && (
                                    <div>
                                        <label htmlFor="allocation_value" className="block text-sm font-medium text-gray-700">
                                            {formData.allocation_type === 'percentage' ? 'Percentage (%)' : 'Amount ($)'}
                                        </label>
                                        <input
                                            type="number"
                                            id="allocation_value"
                                            value={formData.allocation_value}
                                            onChange={(e) => setFormData({ ...formData, allocation_value: e.target.value })}
                                            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900"
                                            placeholder={formData.allocation_type === 'percentage' ? '25' : '1000'}
                                            step={formData.allocation_type === 'percentage' ? '0.01' : '0.01'}
                                            min={formData.allocation_type === 'percentage' ? '0.01' : '0'}
                                            max={formData.allocation_type === 'percentage' ? '100' : undefined}
                                            required
                                        />
                                    </div>
                                )}

                                <div className="flex gap-3 pt-4">
                                    <button
                                        type="button"
                                        onClick={() => {
                                            setIsModalOpen(false);
                                            setEditingBucket(null);
                                            setFormData({ ...defaultFormData });
                                        }}
                                        className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300"
                                        disabled={isSubmitting}
                                    >
                                        Cancel
                                    </button>
                                    <button
                                        type="submit"
                                        className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50"
                                        disabled={isSubmitting}
                                    >
                                        {isSubmitting ? (editingBucket ? 'Updating...' : 'Creating...') : (editingBucket ? 'Update Bucket' : 'Create Bucket')}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}