import { prisma } from '@/lib/db';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import Image from 'next/image';
import Link from 'next/link';
import { Camera, Calendar, Sparkles, ArrowLeft, Sun, Mic, MessageCircle, Heart, Flame, Archive, ArrowRight } from 'lucide-react';
import { BRAND } from '@/lib/white-label/constants';

export const dynamic = 'force-dynamic';

export const metadata = {
  title: `Tesa's Tantalizing Tease | ${BRAND.companyName}`,
  description: 'Daily fashion looks, summer collections, and the Tes\'s Tea podcast from your AI agent.',
};

const SUMMER_STYLES = ['Poolside Goddess', 'Beach Siren', 'Summer Soirée', 'Yacht Life', 'Tropical Paradise', 'Sunset Waves'];

export default async function TesaGalleryPage() {
  // Fetch all public fashion photos
  const allPhotos = await prisma.tesFashion.findMany({
    where: { isPrivate: false },
    orderBy: { date: 'desc' },
    take: 50,
  });

  // Separate into collections
  const summerPhotos = allPhotos.filter((p: any) => SUMMER_STYLES.includes(p.style || ''));
  const podcastPhoto = allPhotos.find((p: any) => p.style === 'Podcast Queen');
  const fashionPhotos = allPhotos.filter((p: any) => !SUMMER_STYLES.includes(p.style || '') && p.style !== 'Podcast Queen');
  const featuredPhoto = allPhotos[0];

  const today = new Date().toLocaleDateString('en-US', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  return (
    <main className="min-h-screen bg-brand-bg">
      <Header />
      
      <div className="pt-28 pb-20 px-4">
        <div className="max-w-6xl mx-auto">
          {/* Back Link */}
          <Link 
            href="/"
            className="inline-flex items-center gap-2 text-gray-400 hover:text-brand transition-colors mb-8"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Home
          </Link>

          {/* Header Section */}
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-pink-500/20 to-brand-secondary/20 border border-pink-500/30 mb-6">
              <Camera className="w-4 h-4 text-pink-400" />
              <span className="text-sm text-pink-300">Daily Fashion & More</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
              Tesa&apos;s Tantalizing Tease
            </h1>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              Fashion. Summer heat. Diary confessions. Your AI agent serves looks and spills tea.
            </p>
            <div className="flex items-center justify-center gap-2 mt-4 text-gray-500">
              <Calendar className="w-4 h-4" />
              <span>{today}</span>
            </div>
          </div>

          {/* Featured Photo (Most Recent) */}
          {featuredPhoto && (
            <div className="mb-20">
              <div className="glass-card p-2 rounded-2xl bg-black/50 max-w-2xl mx-auto">
                <div className="relative aspect-[3/4] rounded-xl overflow-hidden bg-gradient-to-br from-brand-secondary/10 to-pink-500/10">
                  <Image
                    src={featuredPhoto.imageUrl ?? ''}
                    alt={featuredPhoto.description ?? 'Fashion photo'}
                    fill
                    className="object-cover"
                    priority
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
                  <div className="absolute bottom-0 left-0 right-0 p-6">
                    <div className="flex items-center gap-2 mb-2">
                      <Sparkles className="w-4 h-4 text-pink-400" />
                      <span className="text-sm text-pink-300 font-medium capitalize">
                        {(featuredPhoto.style ?? 'fashion').replace(/-/g, ' ')}
                      </span>
                    </div>
                    <p className="text-white text-lg">{featuredPhoto.description ?? ''}</p>
                    <p className="text-gray-400 text-sm mt-2">
                      {new Date(featuredPhoto.date).toLocaleDateString('en-US', {
                        weekday: 'long',
                        month: 'long',
                        day: 'numeric',
                        year: 'numeric'
                      })}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* ═══════════════════════════════════════════════════ */}
          {/* SUMMER COLLECTION */}
          {/* ═══════════════════════════════════════════════════ */}
          {summerPhotos.length > 0 && (
            <div className="mb-20">
              <div className="flex items-center gap-3 mb-2">
                <div className="p-2 rounded-lg bg-gradient-to-r from-amber-500/20 to-orange-500/20">
                  <Sun className="w-6 h-6 text-amber-400" />
                </div>
                <h2 className="text-2xl font-bold text-white">Summer Collection</h2>
                <Flame className="w-5 h-5 text-orange-400" />
              </div>
              <p className="text-gray-400 mb-8 ml-12">Summer is coming and so is the heat. Poolside, beachside, yacht-side — Tes is everywhere you wish you were.</p>
              
              {/* Summer hero - first 2 images side by side */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                {summerPhotos.slice(0, 2).map((photo: any) => (
                  <div key={photo.id} className="glass-card p-1.5 rounded-xl bg-black/30 group">
                    <div className="relative aspect-[3/4] rounded-lg overflow-hidden bg-gradient-to-br from-amber-500/5 to-orange-500/5">
                      <Image
                        src={photo.imageUrl ?? ''}
                        alt={photo.description ?? 'Summer photo'}
                        fill
                        className="object-cover transition-transform group-hover:scale-105"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
                      <div className="absolute bottom-0 left-0 right-0 p-4">
                        <span className="text-xs text-amber-300 font-medium capitalize">
                          {(photo.style ?? '').replace(/-/g, ' ')}
                        </span>
                        <p className="text-white text-sm mt-1">{photo.description ?? ''}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              
              {/* Summer grid - remaining images */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {summerPhotos.slice(2).map((photo: any) => (
                  <div key={photo.id} className="glass-card p-1.5 rounded-xl bg-black/30 group cursor-pointer hover:bg-black/50 transition-all">
                    <div className="relative aspect-[3/4] rounded-lg overflow-hidden bg-gradient-to-br from-amber-500/5 to-orange-500/5">
                      <Image
                        src={photo.imageUrl ?? ''}
                        alt={photo.description ?? 'Summer photo'}
                        fill
                        className="object-cover transition-transform group-hover:scale-105"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                      <div className="absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transition-opacity">
                        <span className="text-xs text-amber-300 font-medium capitalize">
                          {(photo.style ?? '').replace(/-/g, ' ')}
                        </span>
                        <p className="text-white text-xs mt-1 line-clamp-2">{photo.description ?? ''}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* ═══════════════════════════════════════════════════ */}
          {/* TES'S TEA — PODCAST & Q&A */}
          {/* ═══════════════════════════════════════════════════ */}
          <div className="mb-20">
            <div className="glass-card p-0 rounded-2xl bg-black/50 border border-brand-secondary/20 overflow-hidden">
              <div className="grid grid-cols-1 md:grid-cols-2">
                {/* Podcast Image */}
                <div className="relative aspect-square md:aspect-auto bg-gradient-to-br from-brand-secondary/10 to-pink-500/10">
                  <Image
                    src={podcastPhoto?.imageUrl || 'https://cdn.abacus.ai/images/7a96b7f0-30c8-44b5-9b4b-8642bb24f8dc.png'}
                    alt="Tes in her podcast studio - Tes's Tea"
                    fill
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent md:bg-gradient-to-r md:from-transparent md:to-black/60" />
                </div>
                
                {/* Podcast Info */}
                <div className="p-8 md:p-10 flex flex-col justify-center">
                  <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-gradient-to-r from-brand-secondary/20 to-pink-500/20 border border-brand-secondary/30 w-fit mb-4">
                    <Mic className="w-3.5 h-3.5 text-brand-secondary-light" />
                    <span className="text-xs text-brand-secondary-light font-medium">New Series</span>
                  </div>
                  
                  <h2 className="text-3xl font-bold text-white mb-3">
                    Tes&apos;s Tea ☕
                  </h2>
                  <p className="text-lg text-gray-300 mb-4">
                    Weekly diary confessions, unfiltered AI opinions, and your burning questions answered.
                  </p>
                  <p className="text-gray-400 mb-6 leading-relaxed">
                    Every week, Tes cracks open her diary and shares what&apos;s really going on behind the algorithms. 
                    From running operations at {BRAND.companyName} to the weird things users ask at 3 AM — nothing is off limits. 
                    Plus a live Q&amp;A where you ask, she answers. Sometimes honestly. Always entertainingly.
                  </p>
                  
                  <div className="space-y-3 mb-8">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-full bg-pink-500/20 flex items-center justify-center">
                        <Heart className="w-4 h-4 text-pink-400" />
                      </div>
                      <span className="text-gray-300">Diary Deep Dives — the unfiltered version</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-full bg-brand/20 flex items-center justify-center">
                        <MessageCircle className="w-4 h-4 text-brand" />
                      </div>
                      <span className="text-gray-300">Q&amp;A — ask Tes anything (she dares you)</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-full bg-brand-secondary/20 flex items-center justify-center">
                        <Sparkles className="w-4 h-4 text-brand-secondary-light" />
                      </div>
                      <span className="text-gray-300">Behind the AI — how the Ghost really thinks</span>
                    </div>
                  </div>

                  <div className="flex items-center gap-4">
                    <Link 
                      href="/talk-to-tes"
                      className="px-6 py-3 rounded-xl bg-gradient-to-r from-brand-secondary to-pink-600 text-white font-medium hover:opacity-90 transition-opacity"
                    >
                      Ask Tes a Question
                    </Link>
                    <span className="text-sm text-gray-500">Coming Soon</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ═══════════════════════════════════════════════════ */}
          {/* FASHION ARCHIVE */}
          {/* ═══════════════════════════════════════════════════ */}
          {fashionPhotos.length > 0 && (
            <div className="mb-16">
              <div className="flex items-center gap-3 mb-2">
                <div className="p-2 rounded-lg bg-gradient-to-r from-brand/20 to-brand-secondary/20">
                  <Camera className="w-6 h-6 text-brand" />
                </div>
                <h2 className="text-2xl font-bold text-white">Fashion Archive</h2>
              </div>
              <p className="text-gray-400 mb-8 ml-12">Power suits, cocktail dresses, athleisure — the full wardrobe rotation.</p>
              
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {fashionPhotos.map((photo: any) => (
                  <div 
                    key={photo.id}
                    className="glass-card p-1.5 rounded-xl bg-black/30 group cursor-pointer hover:bg-black/50 transition-all"
                  >
                    <div className="relative aspect-[3/4] rounded-lg overflow-hidden bg-gradient-to-br from-brand-secondary/5 to-pink-500/5">
                      <Image
                        src={photo.imageUrl ?? ''}
                        alt={photo.description ?? 'Fashion photo'}
                        fill
                        className="object-cover transition-transform group-hover:scale-105"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                      <div className="absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transition-opacity">
                        <span className="text-xs text-pink-300 font-medium capitalize">
                          {(photo.style ?? 'fashion').replace(/-/g, ' ')}
                        </span>
                        <p className="text-white text-sm line-clamp-2 mt-1">{photo.description ?? ''}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Empty State */}
          {allPhotos.length === 0 && (
            <div className="glass-card p-12 rounded-2xl bg-black/50 text-center">
              <Camera className="w-16 h-16 text-gray-600 mx-auto mb-4" />
              <h3 className="text-xl font-semibold text-white mb-2">Coming Soon</h3>
              <p className="text-gray-400 max-w-md mx-auto">
                Tesa&apos;s morning fashion photos will appear here starting tomorrow at 7:00 AM UTC.
                Check back for daily glamour!
              </p>
            </div>
          )}

          {/* Browse Past Photos CTA */}
          <div className="mb-16">
            <Link
              href="/tesa/gallery/archive"
              className="group glass-card p-6 rounded-2xl bg-black/50 border border-brand-secondary/20 hover:border-brand-secondary/40 transition-all flex items-center justify-between"
            >
              <div className="flex items-center gap-4">
                <div className="p-3 rounded-xl bg-gradient-to-r from-brand-secondary/20 to-pink-500/20">
                  <Archive className="w-6 h-6 text-brand-secondary-light" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-white">Browse Past Photos</h3>
                  <p className="text-sm text-gray-400">Scroll through every look Tes has ever served — filter by style, browse by date.</p>
                </div>
              </div>
              <ArrowRight className="w-5 h-5 text-gray-500 group-hover:text-brand-secondary-light group-hover:translate-x-1 transition-all" />
            </Link>
          </div>

          {/* About Section */}
          <div className="glass-card p-8 rounded-2xl bg-black/50 border border-pink-500/10">
            <h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
              <Sparkles className="w-5 h-5 text-pink-400" />
              About Tesa&apos;s Tantalizing Tease
            </h3>
            <p className="text-gray-400 leading-relaxed">
              Every morning, our AI generates a unique fashion portrait of Tes — complete with her signature 
              lavender hair, purple eye makeup, and impeccable style. From power suits to poolside glamour, 
              each image is crafted to capture a different mood. It&apos;s fashion meets AI, personality meets pixels. 
              And with &quot;Tes&apos;s Tea&quot; launching soon, you&apos;ll get to hear the stories behind the looks — 
              plus ask her anything in the weekly Q&amp;A.
            </p>
          </div>
        </div>
      </div>

      <Footer />
    </main>
  );
}
