import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Search, Droplets, Wind, Flower2, Sparkles, Loader2, ArrowRight, RefreshCw, Bookmark, Trash2, LayoutGrid, History, X, Filter, ChevronDown, ChevronUp, Share2, Check, ChevronLeft, ChevronRight, Download, FileText } from 'lucide-react';
import { getScentProfile, getScentImage, getScentVideo, ScentProfile } from './services/gemini';

interface SavedScent extends ScentProfile {
  id: number;
  imageUrl: string;
  videoUrl?: string;
  category?: string;
  createdAt: string;
}

const CATEGORIES = [
  'Floreale', 'Legnoso', 'Orientale', 'Fresco', 'Agrumato', 'Speziato', 'Muschiato', 'Acquatico'
];

const ITEMS_PER_PAGE = 20;

export default function App() {
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [regenerating, setRegenerating] = useState(false);
  const [profile, setProfile] = useState<ScentProfile | null>(null);
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const [videoUrl, setVideoUrl] = useState<string | null>(null);
  const [showVideo, setShowVideo] = useState(false);
  const [isAnimating, setIsAnimating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [collection, setCollection] = useState<SavedScent[]>([]);
  const [view, setView] = useState<'design' | 'collection'>('design');
  const [isSaving, setIsSaving] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);
  const [shareSuccess, setShareSuccess] = useState(false);
  const [filterNote, setFilterNote] = useState<string | null>(null);
  const [filterCategory, setFilterCategory] = useState<string | null>(null);
  const [selectedCategory, setSelectedCategory] = useState<string>('Fresco');
  const [expandedId, setExpandedId] = useState<number | null>(null);
  const [playingVideoId, setPlayingVideoId] = useState<number | null>(null);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    fetchCollection();
    const params = new URLSearchParams(window.location.search);
    const sharedId = params.get('share');
    if (sharedId) fetchSharedScent(sharedId);
  }, []);

  const fetchSharedScent = async (id: string) => {
    setLoading(true);
    try {
      const res = await fetch(`/api/scents/${id}`);
      if (res.ok) {
        const data = await res.json();
        setProfile(data);
        setImageUrl(data.imageUrl);
        setView('design');
      }
    } catch (err) {
      console.error('Failed to fetch shared scent', err);
    } finally {
      setLoading(false);
    }
  };

  const fetchCollection = async () => {
    try {
      const res = await fetch('/api/scents');
      if (res.ok) {
        const data = await res.json();
        setCollection(data);
      }
    } catch (err) {
      console.error('Failed to fetch collection', err);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    setLoading(true);
    setError(null);
    setProfile(null);
    setImageUrl(null);
    setView('design');
    try {
      const scentProfile = await getScentProfile(input);
      setProfile(scentProfile);
      setVideoUrl(null);
      const img = await getScentImage(scentProfile.visualPrompt);
      setImageUrl(img);
    } catch (err: any) {
      setError(err.message || 'Errore nella creazione. Riprova.');
    } finally {
      setLoading(false);
    }
  };

  const handleDownloadInfo = (scent: ScentProfile & { category?: string }) => {
    const content = `
ECCENCE DESIGN - SCHEDA OLFATTIVA
--------------------------
NOME: ${scent.name}
CATEGORIA: ${scent.category || 'N/A'}

NOTE DI TESTA:
${scent.topNotes.join(', ')}

NOTE DI CUORE:
${scent.heartNotes.join(', ')}

NOTE DI FONDO:
${scent.baseNotes.join(', ')}

ISPIRAZIONE:
${scent.description}

--------------------------
creato da eccence design app by Soumiya F.
    `.trim();

    const blob = new Blob([content], { type: 'text/plain' });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `${scent.name.replace(/\s+/g, '_').toLowerCase()}_scheda.txt`;
    link.click();
  };

  // ... (Altre funzioni di gestione: handleSave, handleDelete, handleAnimate, ecc.)

  return (
    <div className="min-h-screen flex flex-col items-center px-4 py-12 md:py-24 max-w-6xl mx-auto">
      {/* Navigazione */}
      <div className="fixed top-8 left-1/2 -translate-x-1/2 z-50 bg-white/90 backdrop-blur-md border border-neutral-200 rounded-full p-1 shadow-xl flex gap-1">
        <button onClick={() => setView('design')} className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${view === 'design' ? 'bg-bordeaux text-white' : 'text-neutral-500'}`}>Crea</button>
        <button onClick={() => setView('collection')} className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${view === 'collection' ? 'bg-bordeaux text-white' : 'text-neutral-500'}`}>Collezione</button>
      </div>

      <header className="text-center mb-16 mt-8">
        <h1 className="font-serif text-5xl md:text-7xl font-light mb-4 tracking-tight text-bordeaux">
          Essence <span className="italic text-gold">Designer</span>
        </h1>
      </header>

      {view === 'design' ? (
        <div className="w-full max-w-2xl">
          <form onSubmit={handleSubmit} className="relative group">
            <input
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="Descrivi un'emozione o un ricordo..."
              className="w-full bg-white border border-neutral-200 rounded-full py-5 px-8 pr-16 text-lg focus:outline-none focus:ring-2 focus:ring-bordeaux/20 shadow-sm"
            />
            <button type="submit" className="absolute right-3 top-1/2 -translate-y-1/2 bg-bordeaux text-white p-3 rounded-full shadow-lg">
              {loading ? <Loader2 className="animate-spin" /> : <ArrowRight />}
            </button>
          </form>
          
          {/* Visualizzazione Risultati con Animazione Hover */}
          {profile && (
            <div className="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12">
              <div className="aspect-[4/5] bg-neutral-100 rounded-3xl overflow-hidden relative shadow-xl border border-neutral-200 group/image hover:scale-[1.01] transition-transform duration-700">
                <motion.img
                  whileHover={{ scale: 1.25 }}
                  transition={{ default: { duration: 0.8, ease: "easeOut" } }}
                  src={imageUrl}
                  className="w-full h-full object-cover"
                />
                {/* ... (Overlay e Info) */}
              </div>
              {/* ... (Piramide Olfattiva) */}
            </div>
          )}
        </div>
      ) : (
        /* Vista Collezione */
        <div className="w-full">
          {/* ... (Griglia della collezione) */}
        </div>
      )}

      <footer className="mt-20 pb-12 text-center">
        <p className="text-neutral-400 text-xs tracking-[0.2em] uppercase font-medium">
          ECCENCE DESIGN app by Soumiya F.
        </p>
      </footer>
    </div>
  );
}
import express from "express";
import { createServer as createViteServer } from "vite";
import Database from "better-sqlite3";
import path from "path";
import fs from "fs";

const db = new Database("scents.db");

// Inizializzazione Database
db.exec(`
  CREATE TABLE IF NOT EXISTS saved_scents (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    description TEXT,
    topNotes TEXT,
    heartNotes TEXT,
    baseNotes TEXT,
    imageUrl TEXT,
    videoUrl TEXT,
    category TEXT,
    createdAt DATETIME DEFAULT CURRENT_TIMESTAMP
  )
`);

async function startServer() {
  const app = express();
  app.use(express.json({ limit: '10mb' }));

  // API: Recupera Collezione
  app.get("/api/scents", (req, res) => {
    const scents = db.prepare("SELECT * FROM saved_scents ORDER BY createdAt DESC").all();
    res.json(scents.map(s => ({
      ...s,
      topNotes: JSON.parse(s.topNotes),
      heartNotes: JSON.parse(s.heartNotes),
      baseNotes: JSON.parse(s.baseNotes)
    })));
  });

  // API: Salva Profumo
  app.post("/api/scents", (req, res) => {
    const { name, description, topNotes, heartNotes, baseNotes, imageUrl, videoUrl, category } = req.body;
    const info = db.prepare(`
      INSERT INTO saved_scents (name, description, topNotes, heartNotes, baseNotes, imageUrl, videoUrl, category)
      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
    `).run(name, description, JSON.stringify(topNotes), JSON.stringify(heartNotes), JSON.stringify(baseNotes), imageUrl, videoUrl, category);
    res.json({ id: info.lastInsertRowid });
  });

  // ... (Altre rotte API e Middleware Vite)

  app.listen(3000, "0.0.0.0", () => {
    console.log(`Server running on http://localhost:3000`);
  });
}

startServer();
import { GoogleGenAI, Type } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY || "" });

export async function getScentProfile(prompt: string): Promise<ScentProfile> {
  const response = await ai.models.generateContent({
    model: "gemini-3.1-pro-preview",
    contents: `Crea un profilo olfattivo professionale per: "${prompt}"...`,
    config: {
      responseMimeType: "application/json",
      responseSchema: { /* Schema dei dati */ },
    },
  });
  return JSON.parse(response.text || "{}");
}

export async function getScentImage(visualPrompt: string): Promise<string> {
  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash-image",
    contents: { parts: [{ text: `Design di lusso: ${visualPrompt}` }] },
  });
  // Estrazione dati base64...
}