'use client';

import React, { useEffect, useState } from 'react';
import { Heart, Copy, Bell, Search } from 'lucide-react';
import Link from 'next/link';
import { useWishlist } from '../../context/WishlistContext';
import { useUserStore } from '../../../store/useUserStore';

const StudentDashboardHome = () => {
  const { user } = useUserStore();
  const [wishlistCount, setWishlistCount] = useState(0);
  const { wishlist } = useWishlist();

  useEffect(() => {
    const fetchWishlist = async () => {
      try {
        const res = await fetch('/api/frontend/wishlist', {
          method: "GET"
        });
        if (!res.ok) return;
        const data = await res.json();
        setWishlistCount(data.data.length);
      } catch {}
    };
    fetchWishlist();
  }, []);

  useEffect(() => {
    setWishlistCount(Array.isArray(wishlist) ? wishlist.length : 0);
  }, [wishlist]);

  const cards = [
    {
      label: 'Total Wishlist',
      count: wishlistCount,
      icon: Heart,
      gradient: 'from-rose-500 to-pink-600',
      bgColor: 'bg-rose-50',
      iconColor: 'text-rose-600',
    },
    {
      label: 'Applied Application',
      count: 0,
      icon: Copy,
      gradient: 'from-blue-500 to-cyan-600',
      bgColor: 'bg-blue-50',
      iconColor: 'text-blue-600',
    },
    {
      label: 'Unread Notification',
      count: 0,
      icon: Bell,
      gradient: 'from-amber-500 to-orange-600',
      bgColor: 'bg-amber-50',
      iconColor: 'text-amber-600',
    },
  ];

  return (
    <div className="space-y-8 animate-in fade-in duration-300">
      {/* Welcome Section */}
      <div className="text-center space-y-4">
        <h1 className="text-3xl md:text-4xl font-bold text-gray-900">
          Dashboard
        </h1>
        
        <div className="inline-block px-6 py-2 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-full border border-blue-200">
          <p className="text-lg font-medium text-blue-700">
            Hey, {user?.name || 'Student'}! 👋
          </p>
        </div>

        <div className="max-w-2xl mx-auto">
          <p className="text-gray-600 text-base md:text-lg leading-relaxed">
            From your Dashboard you have the ability to view your university application's 
            activity and update your account information. Select a link below to view or edit information.
          </p>
        </div>
      </div>

      {/* Cards Section */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {cards.map((card, index) => (
          <div
            key={index}
            className="group relative bg-white rounded-2xl border border-gray-200 p-6 
                     hover:shadow-lg hover:border-gray-300 transition-all duration-300"
          >
            {/* Background Gradient Effect */}
            <div className={`absolute inset-0 bg-gradient-to-br ${card.gradient} opacity-5 rounded-2xl group-hover:opacity-10 transition-opacity`}></div>
            
            <div className="relative flex items-center justify-between">
              <div className="space-y-2">
                <p className="text-sm font-medium text-gray-500 uppercase tracking-wider">
                  {card.label}
                </p>
                <p className="text-4xl font-bold text-gray-900">
                  {card.count}
                </p>
              </div>
              
              <div className={`p-4 rounded-xl ${card.bgColor} group-hover:scale-110 transition-transform duration-300`}>
                <card.icon className="h-6 w-6" />
              </div>
            </div>
            
            {/* Bottom accent line */}
            <div className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${card.gradient} rounded-b-2xl`}></div>
          </div>
        ))}
      </div>

      {/* Quick Stats */}
      <div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-6 border border-gray-200">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
          <div className="text-center sm:text-left">
            <h3 className="text-lg font-semibold text-gray-900 mb-2">
              Ready to Explore?
            </h3>
            <p className="text-gray-600 max-w-md">
              Discover new universities and continue your academic journey.
            </p>
          </div>
          
          <Link href="/search" className="w-full sm:w-auto">
            <button className="group relative w-full sm:w-auto bg-gradient-to-r from-blue-600 to-cyan-600 
                           hover:from-blue-700 hover:to-cyan-700 text-white font-semibold 
                           py-3 px-8 rounded-xl transition-all duration-300 
                           hover:shadow-lg hover:shadow-blue-500/25 
                           flex items-center justify-center gap-3">
              <Search className="h-5 w-5" />
              Search Universities
              <span className="opacity-0 group-hover:opacity-100 translate-x-2 group-hover:translate-x-0 transition-all duration-300">
                →
              </span>
            </button>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default StudentDashboardHome;