import React, { useState } from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as RechartsTooltip,
  ResponsiveContainer,
  Cell,
  ReferenceLine
} from 'recharts';
import {
  Search,
  Gift,
  Bell,
  Lock,
  ChevronDown,
  ChevronUp,
  Home,
  PlusSquare,
  GitBranch,
  CreditCard,
  Bot,
  Blocks,
  MoreVertical,
  SlidersHorizontal,
  MessageSquare,
  ArrowUp,
  ArrowDown,
  LayoutGrid,
  Zap,
  ChevronLeft,
  ChevronRight,
  Command
} from 'lucide-react';

const campaignData = [
  { name: 'Jan', value: 45, label: '78%' },
  { name: 'Feb', value: 34, label: '34%' },
  { name: 'Mar', value: 67, label: '67%' },
  { name: 'Apr', value: 28, label: '28%' },
  { name: 'May', value: 39, label: '39%' },
  { name: 'Jun', value: 80, label: '80%' },
];

const performanceStats = [
  { label: 'Delivered', value: '42,642.1', trend: '+0.02%', isPositive: true },
  { label: 'Opened', value: '26,843', trend: '-0.02%', isPositive: false },
  { label: 'Clicked', value: '525,753', trend: '+0.02%', isPositive: true },
  { label: 'Subscribe', value: '425', trend: '+0.02%', isPositive: true },
];

const scheduleDays = [
  { day: 'Mon', date: '15' },
  { day: 'Tue', date: '16' },
  { day: 'Wed', date: '17' },
  { day: 'Thu', date: '18' },
  { day: 'Fri', date: '19', active: true },
  { day: 'Sat', date: '20' },
  { day: 'Sun', date: '21' },
];

const Sidebar = () => (
  <aside className="w-[260px] flex-shrink-0 flex flex-col h-screen p-4 sticky top-0 z-20">
    <div className="flex-1 flex flex-col glass-panel rounded-3xl p-4 h-full border border-white/40 shadow-xl relative overflow-hidden">
      {/* Decorative gradient orb behind sidebar content */}
      <div className="absolute -top-20 -left-20 w-40 h-40 bg-green-200 rounded-full mix-blend-multiply filter blur-3xl opacity-50 z-0"></div>
      
      <div className="relative z-10 flex flex-col h-full">
        {/* Logo */}
        <div className="flex items-center space-x-2 px-2 mb-8 mt-2">
          <div className="font-bold text-2xl tracking-tight text-gray-800 font-product">
            emitly
          </div>
        </div>

        {/* Workspace Selector */}
        <div className="flex items-center justify-between px-3 py-2.5 mb-6 rounded-2xl hover:bg-white/40 cursor-pointer transition-all border border-transparent hover:border-white/50 backdrop-blur-sm">
          <div className="flex items-center space-x-3">
            <div className="w-9 h-9 rounded-xl bg-white/70 shadow-sm flex items-center justify-center text-gray-500 border border-white/60 backdrop-blur-md">
              <Lock size={16} />
            </div>
            <div>
              <h3 className="text-sm font-semibold text-gray-800">My Workspace</h3>
              <p className="text-xs text-gray-500 font-medium">Free plan</p>
            </div>
          </div>
          <ChevronDown size={16} className="text-gray-400" />
        </div>

        {/* Navigation Links */}
        <nav className="flex-1 space-y-1.5">
          <NavItem icon={Home} label="Overview" active />
          <NavItem icon={PlusSquare} label="Create campaign" />
          <NavItem icon={GitBranch} label="Automation" />
          <NavItem icon={CreditCard} label="Subscriptions" />
          <NavItem icon={Bot} label="AI Chatbot" />
          <NavItem icon={Blocks} label="Integrations" />
        </nav>

        {/* Bottom Profile Profile */}
        <div className="mt-auto pt-4">
          <div className="flex items-center justify-between px-2.5 py-2.5 hover:bg-white/40 rounded-2xl cursor-pointer transition-all border border-transparent hover:border-white/50 backdrop-blur-sm">
            <div className="flex items-center space-x-3">
              <img 
                src="https://api.dicebear.com/7.x/notionists/svg?seed=James&backgroundColor=f0ebd8" 
                alt="User" 
                className="w-9 h-9 rounded-full border-2 border-white/80 shadow-sm"
              />
              <div className="overflow-hidden">
                <h4 className="text-sm font-semibold text-gray-800 truncate">James Passaquindici</h4>
                <p className="text-xs text-gray-500 truncate font-medium">jamespass@emi.com</p>
              </div>
            </div>
            <ChevronUp size={16} className="text-gray-400 flex-shrink-0" />
          </div>
        </div>
      </div>
    </div>
  </aside>
);

const NavItem = ({ icon: Icon, label, active }) => (
  <a
    href="#"
    className={`flex items-center space-x-3 px-3.5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300 relative overflow-hidden group ${
      active
        ? 'text-[#1D3C34]'
        : 'text-gray-600 hover:text-gray-900'
    }`}
  >
    {active && (
      <div className="absolute inset-0 bg-gradient-to-r from-[#E3F495]/90 to-[#E3F495]/70 backdrop-blur-md rounded-xl -z-10 shadow-sm border border-white/50"></div>
    )}
    {!active && (
      <div className="absolute inset-0 bg-white/0 group-hover:bg-white/40 backdrop-blur-md rounded-xl -z-10 transition-all duration-300 border border-transparent group-hover:border-white/30"></div>
    )}
    <Icon size={18} className={`${active ? 'text-[#1D3C34]' : 'text-gray-500 group-hover:text-gray-700'} relative z-10 transition-colors`} />
    <span className="relative z-10">{label}</span>
  </a>
);

const TopNav = () => (
  <header className="flex items-center justify-between h-24 px-8 pt-6 pb-4 sticky top-0 z-10">
    {/* Search Bar */}
    <div className="relative w-[400px]">
      <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
        <Search size={16} className="text-gray-400" />
      </div>
      <input
        type="text"
        placeholder="Search"
        className="w-full pl-11 pr-12 py-2.5 bg-white/40 backdrop-blur-xl border border-white/60 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-white/80 focus:bg-white/60 shadow-[0_4px_16px_-4px_rgba(0,0,0,0.05)] text-gray-800 placeholder-gray-500 font-medium transition-all"
      />
      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
        <div className="flex items-center text-[10px] text-gray-500 font-bold space-x-1 bg-white/50 border border-white/60 px-1.5 py-1 rounded-md backdrop-blur-sm">
          <Command size={10} />
          <span>K</span>
        </div>
      </div>
    </div>

    {/* Right Actions */}
    <div className="flex items-center space-x-4">
      <button className="w-11 h-11 rounded-2xl glass-button flex items-center justify-center text-gray-600 hover:text-gray-900 transition-all">
        <Gift size={18} />
      </button>
      <button className="w-11 h-11 rounded-2xl glass-button flex items-center justify-center text-gray-600 hover:text-gray-900 transition-all relative">
        <Bell size={18} />
        <span className="absolute top-3 right-3 w-2 h-2 bg-red-400 rounded-full border border-white"></span>
      </button>
      
      {/* Top Profile */}
      <div className="flex items-center space-x-3 pl-2 cursor-pointer glass-panel px-3 py-1.5 rounded-2xl border border-white/40 hover:bg-white/50 transition-all">
        <img 
          src="https://api.dicebear.com/7.x/notionists/svg?seed=James&backgroundColor=f0ebd8" 
          alt="User" 
          className="w-8 h-8 rounded-full border border-white/80"
        />
        <div className="hidden md:block">
          <p className="text-sm font-semibold text-gray-800 leading-tight">James Passaquindici</p>
          <p className="text-[11px] text-gray-500 font-medium">ID: 4827682</p>
        </div>
        <ChevronDown size={14} className="text-gray-500 ml-1" />
      </div>
    </div>
  </header>
);

export default function App() {
  return (
    <div className="flex min-h-screen font-product text-gray-800 relative overflow-hidden bg-[#e8f0e5]">
      {/* Abstract Background Elements for Glass Effect */}
      <div className="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-gradient-to-br from-green-100 to-lime-50 blur-[100px] opacity-70 pointer-events-none z-0"></div>
      <div className="fixed bottom-[-10%] right-[-10%] w-[50%] h-[50%] rounded-full bg-gradient-to-tl from-emerald-100/50 to-teal-50/50 blur-[120px] opacity-60 pointer-events-none z-0"></div>
      <div className="fixed top-[20%] right-[10%] w-[30%] h-[30%] rounded-full bg-gradient-to-tr from-yellow-50/40 to-orange-50/20 blur-[80px] opacity-50 pointer-events-none z-0"></div>

      <Sidebar />

      {/* Main Content Area */}
      <main className="flex-1 flex flex-col min-w-0 relative z-10">
        <TopNav />

        <div className="flex-1 p-8 pt-2 overflow-y-auto custom-scrollbar">
          
          {/* Dashboard Header */}
          <div className="flex justify-between items-end mb-8 pl-2">
            <div>
              <h1 className="text-[34px] font-bold text-gray-900 tracking-tight leading-tight mb-1">
                Dashboard
              </h1>
              <p className="text-gray-600 text-sm font-medium">
                Welcome, Let's dive into your personalized setup guide.
              </p>
            </div>
            <button className="flex items-center space-x-2 px-5 py-2.5 bg-[#1B4339]/90 backdrop-blur-md text-white rounded-2xl hover:bg-[#13322a] transition-all font-medium text-sm shadow-[0_8px_16px_-6px_rgba(27,67,57,0.4)] border border-white/10">
              <PlusSquare size={16} />
              <span>Create campaigns</span>
            </button>
          </div>

          {/* Performance Over Time Card */}
          <div className="glass-panel rounded-[32px] p-7 mb-6 border border-white/60 shadow-xl relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-white/40 to-white/10 pointer-events-none rounded-[32px]"></div>
            <div className="relative z-10 flex justify-between items-center mb-8">
              <div>
                <h3 className="text-lg font-bold text-gray-900">Performance Over Time</h3>
                <p className="text-sm text-gray-500 font-medium mt-0.5">29 Sept, 2024</p>
              </div>
              <div className="flex space-x-2">
                <button className="glass-button flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold text-gray-700 transition-all">
                  <ArrowUp size={12} className="text-gray-400" />
                  <ArrowDown size={12} className="text-gray-400 -ml-2" />
                  <span>Short</span>
                </button>
                <button className="glass-button flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold text-gray-700 transition-all">
                  <SlidersHorizontal size={12} className="text-gray-400" />
                  <span>Filter</span>
                </button>
                <button className="glass-button p-1.5 rounded-xl text-gray-600 transition-all">
                  <MoreVertical size={16} />
                </button>
              </div>
            </div>

            {/* Metrics Row */}
            <div className="relative z-10 grid grid-cols-1 md:grid-cols-4 gap-6 divide-y md:divide-y-0 md:divide-x divide-gray-200/50">
              {performanceStats.map((stat, idx) => (
                <div key={idx} className={`flex flex-col ${idx !== 0 ? 'md:pl-8 pt-4 md:pt-0' : ''}`}>
                  <p className="text-sm font-medium text-gray-500 mb-2">{stat.label}</p>
                  <div className="flex items-baseline space-x-3">
                    <h4 className="text-[32px] font-bold text-gray-900 tracking-tighter">{stat.value}</h4>
                    <div className={`flex items-center px-2 py-1 rounded-lg text-[10px] font-bold border ${
                      stat.isPositive 
                        ? 'bg-green-500/10 text-green-700 border-green-500/20' 
                        : 'bg-red-500/10 text-red-700 border-red-500/20'
                    }`}>
                      <span>{stat.trend}</span>
                      {stat.isPositive ? <ArrowUp size={10} className="ml-0.5" /> : <ArrowDown size={10} className="ml-0.5" />}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Bottom Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            {/* Campaign Performance Chart (Takes up 2 columns on large screens) */}
            <div className="lg:col-span-2 glass-panel rounded-[32px] p-7 border border-white/60 shadow-xl relative overflow-hidden">
               <div className="absolute inset-0 bg-gradient-to-br from-white/40 to-white/10 pointer-events-none rounded-[32px]"></div>
              
              <div className="relative z-10 flex justify-between items-start mb-4">
                <div>
                  <h3 className="text-lg font-bold text-gray-900">Campaign Performance</h3>
                  <div className="mt-4">
                    <h2 className="text-4xl font-bold text-gray-900 tracking-tighter">$24,747.01</h2>
                    <div className="flex items-center space-x-3 mt-1.5">
                      <p className="text-sm text-gray-500 font-medium">29 Sept, 2024</p>
                      <div className="flex items-center space-x-1 px-2.5 py-1 bg-green-500/10 border border-green-500/20 text-green-700 rounded-lg text-xs font-bold">
                        <ArrowUp size={12} />
                        <span>12%</span>
                      </div>
                      <span className="text-xs text-gray-500 font-semibold">vs last month</span>
                    </div>
                  </div>
                </div>
                <button className="glass-button p-2 rounded-xl text-gray-500 transition-all">
                  <MoreVertical size={20} />
                </button>
              </div>

              {/* Recharts Bar Chart */}
              <div className="relative z-10 h-64 mt-8">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={campaignData} margin={{ top: 20, right: 0, left: -20, bottom: 0 }}>
                    <XAxis 
                      dataKey="name" 
                      axisLine={false} 
                      tickLine={false} 
                      tick={{ fill: '#6b7280', fontSize: 13, fontWeight: 600, fontFamily: "'Plus Jakarta Sans', sans-serif" }}
                      dy={10}
                    />
                    
                    {/* Custom Reference Line for Average */}
                    <ReferenceLine 
                      y={45} 
                      stroke="#cbd5e1" 
                      strokeDasharray="4 4"
                      label={
                        <CustomReferenceLabel value="Avg $150k" />
                      }
                    />
                    
                    <RechartsTooltip 
                      cursor={{fill: 'rgba(255,255,255,0.4)'}}
                      contentStyle={{ 
                        borderRadius: '16px', 
                        border: '1px solid rgba(255,255,255,0.8)', 
                        boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1)',
                        background: 'rgba(255,255,255,0.8)',
                        backdropFilter: 'blur(10px)'
                      }}
                      itemStyle={{ fontWeight: 'bold' }}
                    />
                    
                    <Bar 
                      dataKey="value" 
                      radius={[12, 12, 12, 12]} 
                      barSize={54}
                    >
                      {campaignData.map((entry, index) => (
                        <Cell 
                          key={`cell-${index}`} 
                          fill={entry.name === 'Mar' ? '#FE7C5C' : 'rgba(255, 255, 255, 0.7)'} 
                          stroke={entry.name !== 'Mar' ? 'rgba(255, 255, 255, 1)' : 'transparent'}
                          strokeWidth={2}
                          className="transition-all duration-300 hover:opacity-90 cursor-pointer"
                        />
                      ))}
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </div>

            {/* Schedule Campaign Card */}
            <div className="glass-panel rounded-[32px] p-7 border border-white/60 shadow-xl flex flex-col relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-br from-white/40 to-white/10 pointer-events-none rounded-[32px]"></div>
              
              <div className="relative z-10">
                <h3 className="text-lg font-bold text-gray-900 mb-5">Schedule Campaign</h3>
                
                {/* Calendar Header */}
                <div className="flex justify-between items-center mb-6">
                  <span className="text-sm font-bold text-gray-800">September 2024</span>
                  <div className="flex space-x-1.5">
                    <button className="glass-button w-7 h-7 rounded-lg flex items-center justify-center text-gray-600 transition-all">
                      <ChevronLeft size={14} />
                    </button>
                    <button className="glass-button w-7 h-7 rounded-lg flex items-center justify-center text-gray-600 transition-all">
                      <ChevronRight size={14} />
                    </button>
                  </div>
                </div>

                {/* Days Strip */}
                <div className="flex justify-between items-center mb-8 px-1">
                  {scheduleDays.map((d, i) => (
                    <div key={i} className="flex flex-col items-center">
                      <span className="text-[11px] font-bold text-gray-400 mb-2.5">{d.day}</span>
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all ${
                        d.active 
                          ? 'bg-purple-100 text-purple-700 ring-2 ring-purple-200 shadow-sm' 
                          : 'text-gray-700 hover:bg-white/60 hover:shadow-sm cursor-pointer'
                      }`}>
                        {d.date}
                      </div>
                    </div>
                  ))}
                </div>

                {/* Events List */}
                <div className="flex-1 overflow-y-auto space-y-5 pr-2 custom-scrollbar">
                  {/* Event 1 */}
                  <div>
                    <p className="text-xs text-gray-500 mb-2.5 font-bold tracking-wide uppercase">Today</p>
                    <div className="bg-[#FFF4C2]/80 backdrop-blur-md rounded-[20px] p-4 flex items-start justify-between group cursor-pointer hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 border border-yellow-200/50">
                      <div className="flex items-start space-x-3.5">
                        <div className="w-10 h-10 rounded-xl bg-white/70 shadow-sm flex items-center justify-center flex-shrink-0 backdrop-blur-sm border border-white">
                          <LayoutGrid size={18} className="text-yellow-700" />
                        </div>
                        <div>
                          <h4 className="text-[15px] font-bold text-gray-900 leading-tight">Element of Design Test</h4>
                          <p className="text-xs text-yellow-800/80 mt-1 font-semibold">10:00 - 11:00 AM</p>
                        </div>
                      </div>
                      <MoreVertical size={18} className="text-yellow-700/40 group-hover:text-yellow-700 transition-colors mt-1" />
                    </div>
                  </div>

                  {/* Event 2 */}
                  <div>
                    <p className="text-xs text-gray-500 mb-2.5 font-bold tracking-wide uppercase">Sat, Jan 20</p>
                    <div className="bg-[#FBE4FA]/80 backdrop-blur-md rounded-[20px] p-4 flex items-start justify-between group cursor-pointer hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 border border-purple-200/50">
                      <div className="flex items-start space-x-3.5">
                        <div className="w-10 h-10 rounded-xl bg-white/70 shadow-sm flex items-center justify-center flex-shrink-0 backdrop-blur-sm border border-white">
                          <Zap size={18} className="text-purple-700" />
                        </div>
                        <div>
                          <h4 className="text-[15px] font-bold text-gray-900 leading-tight">Design Principle Test</h4>
                          <p className="text-xs text-purple-800/80 mt-1 font-semibold">10:00 - 11:00 AM</p>
                        </div>
                      </div>
                      <MoreVertical size={18} className="text-purple-700/40 group-hover:text-purple-700 transition-colors mt-1" />
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </main>

      {/* Floating Action Button - Chat */}
      <button className="fixed bottom-8 right-8 w-14 h-14 bg-[#1B4339]/90 backdrop-blur-lg border border-white/20 text-white rounded-2xl flex items-center justify-center shadow-[0_10px_40px_rgba(27,67,57,0.4)] hover:scale-105 hover:bg-[#13322a] transition-all duration-300 z-50">
        <MessageSquare size={24} />
      </button>

      {/* Styles for Glassmorphism & Fonts */}
      <style dangerouslySetInnerHTML={{__html: `
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
        
        body {
          font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
          margin: 0;
          padding: 0;
          background-color: #f0f4ec; /* Fallback */
        }

        .font-product {
          font-family: 'Plus Jakarta Sans', sans-serif;
        }

        /* Glassmorphism Utilities */
        .glass-panel {
          background: rgba(255, 255, 255, 0.45);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
        }

        .glass-button {
          background: rgba(255, 255, 255, 0.5);
          border: 1px solid rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(8px);
        }
        
        .glass-button:hover {
          background: rgba(255, 255, 255, 0.8);
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        /* Scrollbar */
        .custom-scrollbar::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
          background: transparent;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background-color: rgba(0,0,0,0.1);
          border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background-color: rgba(0,0,0,0.2);
        }
      `}} />
    </div>
  );
}

const CustomReferenceLabel = ({ viewBox, value }) => {
  const x = viewBox.x + 10;
  const y = viewBox.y - 10; 
  
  return (
    <g>
      <rect 
        x={x} 
        y={y - 12} 
        width={74} 
        height={26} 
        fill="#111827" 
        rx={6} 
      />
      <text 
        x={x + 37} 
        y={y + 5} 
        fill="#fff" 
        fontSize={11} 
        fontWeight={700}
        fontFamily="'Plus Jakarta Sans', sans-serif"
        textAnchor="middle"
      >
        {value}
      </text>
    </g>
  );
};