@extends('layouts.app')
@section('title', 'New Banana Crop Plan')
@section('content')

<style>
    .variety-card {
        border: 2px solid transparent;
        border-radius: 16px;
        padding: 1.2rem;
        cursor: pointer;
        transition: all 0.2s;
        background: #fff;
        position: relative;
    }
    .variety-card:hover {
        border-color: var(--crop-green);
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }
    .variety-card.selected {
        border-color: var(--crop-green);
        background: rgba(74,124,89,0.04);
    }
    .variety-card.selected::after {
        content: '\2713';
        position: absolute;
        top: 0.6rem;
        right: 0.8rem;
        background: var(--crop-green);
        color: white;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
    }
    .variety-badge-suitable { background: rgba(74,124,89,0.1); color: #2D6B3E; }
    .variety-badge-risky { background: rgba(212,168,83,0.15); color: #8A6020; }
    .variety-stat { font-size: 0.78rem; color: #6c757d; margin-top: 0.3rem; }
    .variety-stat strong { color: #2C1810; font-size: 0.88rem; }
    .step-indicator {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }
    .step {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.82rem;
        color: #aaa;
    }
    .step.active { color: var(--crop-green); font-weight: 600; }
    .step.done { color: #aaa; }
    .step-num {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
    }
    .step.active .step-num { background: var(--crop-green); color: white; }
    .step.done .step-num { background: #ccc; color: white; }
    .step-divider { flex: 1; height: 1px; background: #eee; }
    .timeline-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .timeline-month {
        width: 90px;
        font-size: 0.82rem;
        color: #6c757d;
    }
    .timeline-bar {
        flex: 1;
        height: 8px;
        background: #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
    }
    .timeline-fill {
        height: 100%;
        border-radius: 4px;
        background: var(--crop-green);
    }
    .timeline-fill.harvest { background: var(--soil-brown); }
    .info-card {
        background: rgba(74,124,89,0.05);
        border: 1px solid rgba(74,124,89,0.15);
        border-radius: 12px;
        padding: 1rem 1.2rem;
        margin-top: 1rem;
    }
</style>

{{-- Header --}}
<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('crop-plans.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i>
    </a>
    <div>
        <h1 class="h3 mb-0">New Banana Crop Plan</h1>
        <p class="text-muted small mb-0">Select your location and banana variety</p>
    </div>
</div>

{{-- Step indicator --}}
<div class="step-indicator">
    <div class="step active" id="step-ind-1">
        <div class="step-num">1</div> Location
    </div>
    <div class="step-divider"></div>
    <div class="step" id="step-ind-2">
        <div class="step-num">2</div> Variety
    </div>
    <div class="step-divider"></div>
    <div class="step" id="step-ind-3">
        <div class="step-num">3</div> Planting
    </div>
    <div class="step-divider"></div>
    <div class="step" id="step-ind-4">
        <div class="step-num">4</div> Confirm
    </div>
</div>

<form method="POST" action="{{ route('crop-plans.store') }}" id="banana-form">
    @csrf
    <input type="hidden" name="crop" value="banana">
    <input type="hidden" name="variety" id="hidden-variety">
    <input type="hidden" name="location" id="hidden-location">
    <input type="hidden" name="planting_month" id="hidden-month">
    <input type="hidden" name="planting_year" id="hidden-year">
    <input type="hidden" name="risk_tolerance" value="medium">

    {{-- STEP 1: Location --}}
    <div id="step-1" class="card border-0 mb-4">
        <div class="card-body p-4">
            <h3 class="h5 mb-3"><i class="bi bi-geo-alt me-2 text-success"></i>Step 1 — Your Location</h3>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold small text-uppercase" style="letter-spacing:0.04em">State</label>
                    <select class="form-select" id="state-select">
                        <option value="">Select state</option>
                        @foreach($states as $state)
                            <option value="{{ $state }}">{{ ucwords($state) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold small text-uppercase" style="letter-spacing:0.04em">District</label>
                    <select class="form-select" id="district-select" disabled>
                        <option value="">Select state first</option>
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="button" class="btn btn-outline-success w-100" id="load-varieties-btn" disabled onclick="loadVarieties()">
                        <i class="bi bi-search me-1"></i> Find Varieties
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- STEP 2: Variety --}}
    <div id="step-2" class="card border-0 mb-4" style="display:none">
        <div class="card-body p-4">
            <h3 class="h5 mb-1"><i class="bi bi-flower1 me-2 text-success"></i>Step 2 — Select Banana Variety</h3>
            <p class="text-muted small mb-3">Showing varieties suitable or manageable for your location</p>
            <div id="varieties-grid" class="row g-3"></div>
        </div>
    </div>

    {{-- STEP 3: Planting Time --}}
    <div id="step-3" class="card border-0 mb-4" style="display:none">
        <div class="card-body p-4">
            <h3 class="h5 mb-3"><i class="bi bi-calendar3 me-2 text-success"></i>Step 3 — Planting Time</h3>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold small text-uppercase" style="letter-spacing:0.04em">Plan Name</label>
                    <input type="text" class="form-control" name="name" id="plan-name" placeholder="e.g. Grand Naine — East Godavari 2026" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold small text-uppercase" style="letter-spacing:0.04em">Planting Month</label>
                    <select class="form-select" id="month-select">
                        <option value="">Select month</option>
                        @foreach(range(1,12) as $m)
                            <option value="{{ $m }}">{{ date('F', mktime(0,0,0,$m,1)) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold small text-uppercase" style="letter-spacing:0.04em">Planting Year</label>
                    <select class="form-select" id="year-select">
                        @foreach([2025,2026,2027] as $y)
                            <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>{{ $y }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Growth timeline --}}
            <div id="growth-timeline" class="mt-4" style="display:none">
                <h6 class="text-muted small text-uppercase mb-3" style="letter-spacing:0.04em">
                    <i class="bi bi-clock me-1"></i> Growth Timeline
                </h6>
                <div id="timeline-content"></div>
            </div>

            <div class="mt-3">
                <button type="button" class="btn btn-outline-success" onclick="goToConfirm()" id="confirm-btn" disabled>
                    Next — Review Plan <i class="bi bi-arrow-right ms-1"></i>
                </button>
            </div>
        </div>
    </div>

    {{-- STEP 4: Confirm --}}
    <div id="step-4" class="card border-0 mb-4" style="display:none">
        <div class="card-body p-4">
            <h3 class="h5 mb-3"><i class="bi bi-check2-circle me-2 text-success"></i>Step 4 — Confirm Plan</h3>
            <div id="summary-content"></div>
            <div class="d-flex gap-2 mt-4">
                <button type="submit" class="btn btn-primary px-4">
                    <i class="bi bi-plus-circle me-2"></i>Create Plan & Run Analysis
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="goBack()">
                    <i class="bi bi-arrow-left me-1"></i> Back
                </button>
            </div>
        </div>
    </div>

</form>

<script>
const MONTHS = ['','January','February','March','April','May','June','July','August','September','October','November','December'];
let selectedVariety = null;
let selectedState = '';
let selectedDistrict = '';

// State change → load districts
document.getElementById('state-select').addEventListener('change', function() {
    selectedState = this.value;
    const distSelect = document.getElementById('district-select');
    distSelect.innerHTML = '<option value="">Loading...</option>';
    distSelect.disabled = true;
    document.getElementById('load-varieties-btn').disabled = true;

    if (!selectedState) return;

    fetch(`/api/banana/districts/${encodeURIComponent(selectedState)}`, {
        headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '' }
    })
    .then(r => r.json())
    .then(data => {
        distSelect.innerHTML = '<option value="">Select district</option>';
        (data.districts || []).forEach(d => {
            const opt = document.createElement('option');
            opt.value = d;
            opt.textContent = d.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
            distSelect.appendChild(opt);
        });
        distSelect.disabled = false;
    })
    .catch(() => {
        distSelect.innerHTML = '<option value="">Error loading districts</option>';
    });
});

// District change
document.getElementById('district-select').addEventListener('change', function() {
    selectedDistrict = this.value;
    document.getElementById('load-varieties-btn').disabled = !selectedDistrict;
});

// Load varieties
function loadVarieties() {
    if (!selectedState || !selectedDistrict) return;

    document.getElementById('hidden-location').value = selectedDistrict;

    fetch(`/api/banana/varieties/${encodeURIComponent(selectedState)}/${encodeURIComponent(selectedDistrict)}`)
    .then(r => r.json())
    .then(data => {
        const grid = document.getElementById('varieties-grid');
        const varieties = data.varieties || [];

        if (varieties.length === 0) {
            grid.innerHTML = '<div class="col-12"><div class="alert alert-warning">No suitable banana varieties found for this district.</div></div>';
        } else {
            grid.innerHTML = varieties.map((v, i) => `
                <div class="col-md-4 col-sm-6">
                    <div class="variety-card" onclick="selectVariety(${i})" id="vcard-${i}" data-variety='${JSON.stringify(v)}'>
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <span class="fw-semibold" style="font-size:0.92rem;color:#2C1810">${v.variety}</span>
                            <span class="badge ${v.suitability === 'suitable' ? 'variety-badge-suitable' : 'variety-badge-risky'}" style="font-size:0.7rem">
                                ${v.suitability === 'suitable' ? '✓ Suitable' : '⚠ Risky'}
                            </span>
                        </div>
                        <div class="text-muted" style="font-size:0.75rem;margin-bottom:0.5rem">${v.variety_category || ''}</div>
                        ${v.avg_yield_ton_ha ? `<div class="variety-stat">Yield <strong>${v.avg_yield_ton_ha} t/ha</strong></div>` : ''}
                        ${v.growth_days ? `<div class="variety-stat">Growth <strong>${v.growth_days} days</strong></div>` : ''}
                        ${v.price_per_kg ? `<div class="variety-stat">Price <strong>₹${v.price_per_kg}/kg</strong></div>` : ''}
                        ${v.planting_month ? `<div class="variety-stat">Best planting <strong>${MONTHS[v.planting_month]}</strong></div>` : ''}
                    </div>
                </div>
            `).join('');
        }

        document.getElementById('step-2').style.display = '';
        setStepActive(2);
        document.getElementById('step-2').scrollIntoView({ behavior: 'smooth', block: 'start' });
    })
    .catch(err => {
        console.error(err);
        alert('Error loading varieties. Please try again.');
    });
}

function selectVariety(idx) {
    // Deselect all
    document.querySelectorAll('.variety-card').forEach(c => c.classList.remove('selected'));
    document.getElementById('vcard-' + idx).classList.add('selected');

    const card = document.getElementById('vcard-' + idx);
    selectedVariety = JSON.parse(card.dataset.variety);
    document.getElementById('hidden-variety').value = selectedVariety.variety;

    // Auto-set recommended planting month
    if (selectedVariety.planting_month) {
        document.getElementById('month-select').value = selectedVariety.planting_month;
        updateTimeline();
    }

    // Auto-fill plan name
    const distName = selectedDistrict.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
    document.getElementById('plan-name').value = `${selectedVariety.variety} — ${distName} ${new Date().getFullYear()}`;

    document.getElementById('step-3').style.display = '';
    setStepActive(3);
    document.getElementById('step-3').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// Month/year change → update timeline
document.getElementById('month-select').addEventListener('change', function() {
    document.getElementById('hidden-month').value = this.value;
    updateTimeline();
    checkConfirmReady();
});

document.getElementById('year-select').addEventListener('change', function() {
    document.getElementById('hidden-year').value = this.value;
    updateTimeline();
});

function updateTimeline() {
    if (!selectedVariety || !document.getElementById('month-select').value) return;

    const plantMonth = parseInt(document.getElementById('month-select').value);
    const plantYear  = parseInt(document.getElementById('year-select').value);
    const growthDays = selectedVariety.growth_days || 300;
    const harvestDate = new Date(plantYear, plantMonth - 1, 1);
    harvestDate.setDate(harvestDate.getDate() + growthDays);
    const harvestMonth = harvestDate.getMonth() + 1;
    const harvestYear  = harvestDate.getFullYear();

    const timeline = document.getElementById('timeline-content');
    timeline.innerHTML = `
        <div class="info-card mb-3">
            <div class="row g-3 text-center">
                <div class="col-4">
                    <div class="text-muted small">Planting</div>
                    <div class="fw-bold" style="color:#2C1810">${MONTHS[plantMonth]} ${plantYear}</div>
                </div>
                <div class="col-4">
                    <div class="text-muted small">Growth Period</div>
                    <div class="fw-bold" style="color:#2C1810">${growthDays} days (~${Math.round(growthDays/30)} months)</div>
                </div>
                <div class="col-4">
                    <div class="text-muted small">Expected Harvest</div>
                    <div class="fw-bold" style="color:var(--soil-brown)">${MONTHS[harvestMonth]} ${harvestYear}</div>
                </div>
            </div>
        </div>
        ${selectedVariety.avg_yield_ton_ha ? `
        <div class="info-card">
            <div class="row g-3 text-center">
                <div class="col-4">
                    <div class="text-muted small">Expected Yield</div>
                    <div class="fw-bold" style="color:#2C1810">${selectedVariety.avg_yield_ton_ha} t/ha</div>
                </div>
                <div class="col-4">
                    <div class="text-muted small">Market Price</div>
                    <div class="fw-bold" style="color:#2C1810">${selectedVariety.price_per_kg ? '₹' + selectedVariety.price_per_kg + '/kg' : '—'}</div>
                </div>
                <div class="col-4">
                    <div class="text-muted small">Est. Revenue/ha</div>
                    <div class="fw-bold" style="color:var(--crop-green)">
                        ${selectedVariety.price_per_kg ? '₹' + (selectedVariety.avg_yield_ton_ha * selectedVariety.price_per_kg * 1000).toLocaleString('en-IN') : '—'}
                    </div>
                </div>
            </div>
        </div>` : ''}
    `;

    document.getElementById('growth-timeline').style.display = '';
    document.getElementById('confirm-btn').disabled = false;
}

function checkConfirmReady() {
    const month = document.getElementById('month-select').value;
    document.getElementById('confirm-btn').disabled = !month || !selectedVariety;
}

function goToConfirm() {
    const month = parseInt(document.getElementById('month-select').value);
    const year  = parseInt(document.getElementById('year-select').value);
    const name  = document.getElementById('plan-name').value;

    document.getElementById('hidden-month').value = month;
    document.getElementById('hidden-year').value  = year;

    const distDisplay = selectedDistrict.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
    const stateDisplay = selectedState.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');

    const growthDays = selectedVariety.growth_days || 300;
    const harvestDate = new Date(year, month - 1, 1);
    harvestDate.setDate(harvestDate.getDate() + growthDays);
    const harvestMonth = harvestDate.getMonth() + 1;
    const harvestYear  = harvestDate.getFullYear();

    document.getElementById('summary-content').innerHTML = `
        <div class="row g-3">
            <div class="col-md-6">
                <div class="card border-0 bg-light h-100">
                    <div class="card-body p-3">
                        <div class="text-muted small text-uppercase mb-2" style="letter-spacing:0.04em">Location</div>
                        <div class="fw-bold">${distDisplay}, ${stateDisplay}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 bg-light h-100">
                    <div class="card-body p-3">
                        <div class="text-muted small text-uppercase mb-2" style="letter-spacing:0.04em">Variety</div>
                        <div class="fw-bold">${selectedVariety.variety}</div>
                        <div class="text-muted small">${selectedVariety.variety_category || ''}</div>
                        <span class="badge mt-1 ${selectedVariety.suitability === 'suitable' ? 'bg-success' : 'bg-warning text-dark'}">
                            ${selectedVariety.suitability === 'suitable' ? '✓ Suitable' : '⚠ Risky'}
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 bg-light h-100">
                    <div class="card-body p-3">
                        <div class="text-muted small text-uppercase mb-2" style="letter-spacing:0.04em">Planting</div>
                        <div class="fw-bold">${MONTHS[month]} ${year}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 bg-light h-100">
                    <div class="card-body p-3">
                        <div class="text-muted small text-uppercase mb-2" style="letter-spacing:0.04em">Expected Harvest</div>
                        <div class="fw-bold">${MONTHS[harvestMonth]} ${harvestYear}</div>
                        <div class="text-muted small">${growthDays} days growth</div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 bg-light h-100">
                    <div class="card-body p-3">
                        <div class="text-muted small text-uppercase mb-2" style="letter-spacing:0.04em">Expected Yield</div>
                        <div class="fw-bold">${selectedVariety.avg_yield_ton_ha ? selectedVariety.avg_yield_ton_ha + ' t/ha' : '—'}</div>
                        <div class="text-muted small">${selectedVariety.price_per_kg ? '₹' + selectedVariety.price_per_kg + '/kg market price' : ''}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert alert-light border mt-3 mb-0">
            <i class="bi bi-info-circle me-2 text-muted"></i>
            After creating this plan, AgriField will run a full AI analysis including climate assessment, yield forecast, and market intelligence for your location.
        </div>
    `;

    document.getElementById('step-4').style.display = '';
    setStepActive(4);
    document.getElementById('step-4').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function goBack() {
    document.getElementById('step-4').style.display = 'none';
    setStepActive(3);
    document.getElementById('step-3').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function setStepActive(n) {
    for (let i = 1; i <= 4; i++) {
        const el = document.getElementById('step-ind-' + i);
        el.classList.remove('active', 'done');
        if (i === n) el.classList.add('active');
        else if (i < n) el.classList.add('done');
    }
}

// Init hidden fields
document.getElementById('hidden-year').value = document.getElementById('year-select').value;
</script>

@endsection