'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { Sparkles, Heart, Calendar, RefreshCw } from 'lucide-react';

interface FashionPhoto {
  id: string;
  date: string;
  imageUrl: string;
  description: string;
  style: string;
  isPrivate: boolean;
}

export function TantalizingTease() {
  const [photo, setPhoto] = useState<FashionPhoto | null>(null);
  const [loading, setLoading] = useState(true);
  const [liked, setLiked] = useState(false);

  const fetchPhoto = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/tesa/fashion');
      const data = await res.json();
      if (data.success && data.photo) {
        setPhoto(data.photo);
      }
    } catch (error) {
      console.error('Failed to fetch photo:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchPhoto();
  }, []);

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString('en-US', {
      weekday: 'long',
      month: 'long',
      day: 'numeric',
      year: 'numeric'
    });
  };

  if (loading) {
    return (
      <div className="glass-card p-8 rounded-2xl bg-black/50">
        <div className="flex items-center justify-center h-64">
          <motion.div
            animate={{ rotate: 360 }}
            transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
          >
            <Sparkles className="w-8 h-8 text-brand" />
          </motion.div>
        </div>
      </div>
    );
  }

  if (!photo) {
    return (
      <div className="glass-card p-8 rounded-2xl bg-black/50">
        <p className="text-gray-400 text-center">No tease today... yet 😏</p>
      </div>
    );
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="glass-card rounded-2xl overflow-hidden bg-gradient-to-br from-brand-bg/30 via-black/50 to-brand-bg-surface/30 border border-brand-secondary/20"
    >
      {/* Header */}
      <div className="p-4 border-b border-white/10 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Sparkles className="w-5 h-5 text-brand" />
          <h3 className="text-lg font-bold bg-gradient-to-r from-brand to-brand-secondary-light bg-clip-text text-transparent">
            Tesa&apos;s Tantalizing Tease
          </h3>
        </div>
        <span className="text-xs text-brand-secondary-light font-medium px-2 py-1 bg-brand-secondary/20 rounded-full">
          {photo.style}
        </span>
      </div>

      {/* Image */}
      <div className="relative aspect-square">
        <Image
          src={photo.imageUrl}
          alt={`Tesa's ${photo.style} look`}
          fill
          className="object-cover"
          sizes="(max-width: 768px) 100vw, 400px"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
      </div>

      {/* Content */}
      <div className="p-4 space-y-3">
        <p className="text-gray-200 text-sm leading-relaxed">
          {photo.description}
        </p>
        
        <div className="flex items-center justify-between pt-2 border-t border-white/10">
          <div className="flex items-center gap-1 text-xs text-gray-400">
            <Calendar className="w-3 h-3" />
            {formatDate(photo.date)}
          </div>
          
          <div className="flex items-center gap-3">
            <button
              onClick={() => setLiked(!liked)}
              className="transition-all hover:scale-110"
            >
              <Heart 
                className={`w-5 h-5 transition-colors ${liked ? 'text-red-500 fill-red-500' : 'text-gray-400 hover:text-red-400'}`} 
              />
            </button>
            <button
              onClick={fetchPhoto}
              className="text-gray-400 hover:text-brand transition-colors"
              title="Refresh"
            >
              <RefreshCw className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </motion.div>
  );
}
