'use client';

import { motion } from 'framer-motion';
import { DollarSign, Package, Leaf, TrendingUp } from 'lucide-react';

export default function AdminDashboard() {
  // Placeholder data - will be replaced with real API data
  const stats = [
    {
      title: 'Total Orders',
      value: '0',
      icon: <Package size={24} />,
      trend: { value: 0, isPositive: true },
      gradient: 'bg-gradient-to-br from-royal-purple to-purple-600',
      bgColor: 'bg-royal-purple',
    },
    {
      title: 'Total CO₂ Offset',
      value: '0 tons',
      icon: <Leaf size={24} />,
      trend: { value: 0, isPositive: true },
      gradient: 'bg-gradient-to-br from-sea-green to-green-600',
      bgColor: 'bg-sea-green',
    },
    {
      title: 'Total Revenue',
      value: '$0',
      icon: <DollarSign size={24} />,
      trend: { value: 0, isPositive: true },
      gradient: 'bg-gradient-to-br from-muted-gold to-orange-600',
      bgColor: 'bg-muted-gold',
    },
    {
      title: 'Fulfillment Rate',
      value: '0%',
      icon: <TrendingUp size={24} />,
      trend: { value: 0, isPositive: true },
      gradient: 'bg-gradient-to-br from-maritime-teal to-teal-600',
      bgColor: 'bg-maritime-teal',
    },
  ];

  return (
    <div className="space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-deep-sea-blue mb-2">Dashboard</h1>
        <p className="text-deep-sea-blue/70 font-medium">Welcome to the Puffin Offset Admin Portal</p>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <motion.div
            key={stat.title}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
            className="bg-white border border-light-gray-border rounded-xl p-6 hover:shadow-lg transition-shadow"
          >
            <div className="flex items-center justify-between mb-4">
              <div className={stat.gradient + " w-12 h-12 rounded-lg flex items-center justify-center text-white shadow-md"}>
                {stat.icon}
              </div>
              {stat.trend && (
                <span className={`text-sm font-semibold ${stat.trend.isPositive ? 'text-sea-green' : 'text-red-600'}`}>
                  {stat.trend.isPositive ? '+' : '-'}{stat.trend.value}%
                </span>
              )}
            </div>
            <h3 className="text-sm font-medium text-deep-sea-blue/60 mb-1">{stat.title}</h3>
            <p className="text-2xl font-bold text-deep-sea-blue">{stat.value}</p>
          </motion.div>
        ))}
      </div>

      {/* Placeholder for Charts */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.5 }}
          className="bg-white border border-light-gray-border rounded-xl p-6"
        >
          <h2 className="text-xl font-bold text-deep-sea-blue mb-4">Orders Timeline</h2>
          <div className="h-64 flex items-center justify-center text-deep-sea-blue/60 font-medium">
            Chart will be implemented in Phase 3
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6 }}
          className="bg-white border border-light-gray-border rounded-xl p-6"
        >
          <h2 className="text-xl font-bold text-deep-sea-blue mb-4">Status Distribution</h2>
          <div className="h-64 flex items-center justify-center text-deep-sea-blue/60 font-medium">
            Chart will be implemented in Phase 3
          </div>
        </motion.div>
      </div>

      {/* Info Card */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.7 }}
        className="bg-maritime-teal/10 border border-maritime-teal/30 rounded-xl p-6"
      >
        <h3 className="text-lg font-bold text-deep-sea-blue mb-2">🎉 Admin Center Active!</h3>
        <p className="text-deep-sea-blue/80">
          Phase 1 (Foundation) is complete. Dashboard, authentication, and navigation are now functional.
          Phase 2 will add backend APIs and real data integration.
        </p>
      </motion.div>
    </div>
  );
}