<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import { flowerPots, generateMockPlantData, type FlowerPot } from '$lib/stores';
  import Modal from './Modal.svelte';

  export let isModalOpen = false;
  export let pot: FlowerPot | null = null;
  export let canWaterPlant = true;
  export let cooldownTimeRemaining = 0;

  const dispatch = createEventDispatcher();

  $: plantData = pot ? generateMockPlantData(pot.plantType) : null;

  function handleClose() {
    dispatch('close');
  }

  function waterPot() {
    if (pot) {
      flowerPots.water(pot.id);
      // Dispatch event to parent to show notification
      dispatch('watered', { potId: pot.id, potName: pot.name });
    }
  }

  function getStatusColor(pot: FlowerPot): string {
    const now = new Date();
    const timeDiff = pot.nextWatering.getTime() - now.getTime();
    const hoursDiff = timeDiff / (1000 * 60 * 60);

    if (hoursDiff < 0) return 'bg-red-100 border-red-300 text-red-800';
    if (hoursDiff < 24) return 'bg-yellow-100 border-yellow-300 text-yellow-800';
    return 'bg-green-100 border-green-300 text-green-800';
  }

  function getStatusText(pot: FlowerPot): string {
    const now = new Date();
    const timeDiff = pot.nextWatering.getTime() - now.getTime();
    const hoursDiff = timeDiff / (1000 * 60 * 60);

    if (hoursDiff < 0) return 'Overdue!';
    if (hoursDiff < 24) return `Due in ${Math.ceil(hoursDiff)}h`;
    const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
    return `Due in ${daysDiff}d`;
  }

  function formatCooldownTime(milliseconds: number): string {
    const minutes = Math.ceil(milliseconds / (1000 * 60));
    if (minutes < 60) {
      return `${minutes}m`;
    }
    const hours = Math.floor(minutes / 60);
    const remainingMinutes = minutes % 60;
    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
  }
</script>

{#if isModalOpen && pot && plantData}
  <Modal isOpen={isModalOpen} title="{pot.name} Details" size="4xl" on:close={handleClose}>
    <div class="max-w-4xl mx-auto">
      <!-- Header Section -->
      <div class="mb-8">
        <div class="flex flex-col md:flex-row gap-6">
          <!-- Main Image -->
          <div class="flex-shrink-0">
            <div class="relative w-full md:w-80 h-64 bg-gradient-to-br from-green-100 to-blue-100 dark:from-gray-700 dark:to-gray-600 rounded-xl overflow-hidden shadow-lg">
              {#if pot.photo}
                <img
                  src={pot.photo}
                  alt="{pot.name} plant"
                  class="w-full h-full object-cover"
                />
              {:else}
                <div class="w-full h-full flex items-center justify-center">
                  <div class="text-8xl opacity-60">🌱</div>
                </div>
              {/if}
              <!-- Status Badge -->
              <div class="absolute top-4 right-4">
                <div class="px-3 py-1 rounded-full text-xs font-semibold shadow-lg {getStatusColor(pot)}">
                  {getStatusText(pot)}
                </div>
              </div>
            </div>
          </div>

          <!-- Plant Info -->
          <div class="flex-1">
            <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">{pot.name}</h2>
            <p class="text-xl text-gray-600 dark:text-gray-400 mb-4">{pot.plantType}</p>

            <!-- Quick Stats -->
            <div class="grid grid-cols-2 gap-4 mb-6">
              <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Watering Frequency</div>
                <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">Every {pot.wateringFrequency} days</div>
              </div>
              <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Last Watered</div>
                <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{pot.lastWatered.toLocaleDateString()}</div>
              </div>
            </div>

            <!-- Action Button -->
            {#if canWaterPlant}
              <button
                on:click={waterPot}
                class="w-full md:w-auto bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white py-3 px-6 rounded-xl font-semibold transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center justify-center gap-2"
              >
                <span class="text-lg">💧</span>
                <span>Water Now</span>
              </button>
            {:else}
              <div class="w-full md:w-auto bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 py-3 px-6 rounded-xl font-semibold flex items-center justify-center gap-2 border-2 border-dashed border-gray-300 dark:border-gray-600">
                <span class="text-lg">⏳</span>
                <span>Watered recently ({formatCooldownTime(cooldownTimeRemaining)})</span>
              </div>
            {/if}
          </div>
        </div>
      </div>

      <!-- Care Instructions -->
      <div class="mb-8">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
          <span class="text-green-500">🌿</span>
          Care Instructions
        </h3>
        <div class="grid gap-3">
          {#each plantData.careInstructions as instruction}
            <div class="flex items-start gap-3 bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
              <div class="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
              <p class="text-gray-700 dark:text-gray-300">{instruction}</p>
            </div>
          {/each}
        </div>
      </div>

      <!-- Growth Stages -->
      <div class="mb-8">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
          <span class="text-blue-500">🌱</span>
          Growth Stages
        </h3>
        <div class="space-y-4">
          {#each plantData.growthStages as stage, index}
            <div class="relative">
              {#if index < plantData.growthStages.length - 1}
                <div class="absolute left-6 top-12 w-0.5 h-16 bg-gray-300 dark:bg-gray-600"></div>
              {/if}
              <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0">
                  {index + 1}
                </div>
                <div class="flex-1 bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2">
                    <h4 class="font-semibold text-gray-900 dark:text-gray-100">{stage.stage}</h4>
                    <span class="text-sm text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-600 px-2 py-1 rounded">
                      {stage.timeline}
                    </span>
                  </div>
                  <p class="text-gray-700 dark:text-gray-300">{stage.description}</p>
                </div>
              </div>
            </div>
          {/each}
        </div>
      </div>

      <!-- Additional Images -->
      {#if plantData.additionalImages.length > 0}
        <div class="mb-8">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
            <span class="text-purple-500">📸</span>
            Gallery
          </h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {#each plantData.additionalImages as image, index}
              <div class="relative group cursor-pointer">
                <div class="aspect-square bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
                  <img
                    src={image}
                    alt="{pot.name} - Image {index + 1}"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
              </div>
            {/each}
          </div>
        </div>
      {/if}

      <!-- Notes Section -->
      {#if pot.notes}
        <div class="mb-8">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
            <span class="text-yellow-500">📝</span>
            Notes
          </h3>
          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
            <p class="text-gray-700 dark:text-gray-300 italic">{pot.notes}</p>
          </div>
        </div>
      {/if}
    </div>
  </Modal>
{/if}