'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';

interface SoundInPreset {
  id: number;
  volume: number;
}

interface Preset {
  id: number;
  name: string;
  description: string;
  sounds: SoundInPreset[];
}

export default function Presets() {
  const [presets, setPresets] = useState<Preset[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  
  const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:5000';
  
  useEffect(() => {
    const fetchPresets = async () => {
      try {
        // In a real app, fetch from API
        // const response = await fetch(`${backendUrl}/api/presets`);
        // const data = await response.json();
        
        // For MVP, use hardcoded data
        const data = [
          { 
            id: 1, 
            name: 'Deep Focus', 
            description: 'Perfect for concentration and work',
            sounds: [
              { id: 6, volume: 0.4 },
              { id: 7, volume: 0.3 }
            ]
          },
          { 
            id: 2, 
            name: 'Rainy Night', 
            description: 'Relaxing rain sounds for sleep',
            sounds: [
              { id: 1, volume: 0.6 },
              { id: 2, volume: 0.3 }
            ]
          },
          { 
            id: 3, 
            name: 'Nature Walk', 
            description: 'Immerse yourself in nature',
            sounds: [
              { id: 3, volume: 0.5 },
              { id: 8, volume: 0.4 }
            ]
          },
          { 
            id: 4, 
            name: 'Cozy Fireplace', 
            description: 'Warm and comforting atmosphere',
            sounds: [
              { id: 5, volume: 0.7 }
            ]
          }
        ];
        
        setPresets(data);
        setIsLoading(false);
      } catch (error) {
        console.error('Error fetching presets:', error);
        setIsLoading(false);
      }
    };
    
    fetchPresets();
  }, [backendUrl]);
  
  const loadPreset = (preset: Preset) => {
    // This is a stub - in the actual app, we would load this preset in the mixer
    // For the MVP, we'll just navigate to the mixer page
    // In a real app, we would use a global state manager or URL parameters to pass the preset data
    window.location.href = '/mixer';
  };
  
  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-emerald-500"></div>
      </div>
    );
  }
  
  return (
    <div className="mx-auto max-w-6xl">
      <h1 className="text-3xl font-bold mb-8 text-center text-emerald-600 dark:text-emerald-400">
        Preset Soundscapes
      </h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {presets.map(preset => (
          <div
            key={preset.id}
            className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition cursor-pointer"
            onClick={() => loadPreset(preset)}
          >
            <div className="p-6">
              <h2 className="text-xl font-semibold mb-2 text-emerald-600 dark:text-emerald-400">
                {preset.name}
              </h2>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {preset.description}
              </p>
              <div className="text-sm text-gray-500 dark:text-gray-400">
                <p>{preset.sounds.length} sound{preset.sounds.length !== 1 ? 's' : ''}</p>
              </div>
            </div>
            <div className="bg-emerald-50 dark:bg-emerald-900/30 p-4 flex justify-between items-center">
              <span className="text-sm text-emerald-600 dark:text-emerald-400">
                {preset.sounds.length === 1 ? '1 sound' : `${preset.sounds.length} sounds`}
              </span>
              <button className="px-3 py-1 bg-emerald-600 hover:bg-emerald-700 text-white rounded-md transition">
                Play
              </button>
            </div>
          </div>
        ))}
      </div>
      
      <div className="mt-12 text-center">
        <Link
          href="/mixer"
          className="inline-block px-6 py-3 bg-white dark:bg-gray-800 border border-emerald-600 dark:border-emerald-400 text-emerald-600 dark:text-emerald-400 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition shadow-md"
        >
          Create Your Own Mix
        </Link>
      </div>
    </div>
  );
}