"use client";

import { ArrowUpRight, Brain, TrendingUp, Zap, Target, ArrowDownRight, BarChart3, Filter } from "lucide-react";
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
} from "recharts";

// Mock Data
const productivityTrend = [
  { date: "May 1", focus: 65, energy: 40 },
  { date: "May 4", focus: 75, energy: 55 },
  { date: "May 8", focus: 60, energy: 50 },
  { date: "May 12", focus: 85, energy: 70 },
  { date: "May 16", focus: 72, energy: 65 },
  { date: "May 20", focus: 95, energy: 85 },
  { date: "May 24", focus: 88, energy: 80 },
];

const habitCompletion = [
  { name: "Reading", completed: 85, missed: 15 },
  { name: "Workout", completed: 60, missed: 40 },
  { name: "Meditation", completed: 90, missed: 10 },
  { name: "Coding", completed: 75, missed: 25 },
];

const focusRadarData = [
  { subject: "Deep Work", A: 120, fullMark: 150 },
  { subject: "Learning", A: 98, fullMark: 150 },
  { subject: "Health", A: 86, fullMark: 150 },
  { subject: "Networking", A: 65, fullMark: 150 },
  { subject: "Admin", A: 40, fullMark: 150 },
];

export default function AnalyticsPage() {
  return (
    <div className="mx-auto max-w-7xl animate-in fade-in slide-in-from-bottom-4 duration-500 h-full flex flex-col text-foreground font-sans space-y-6">
      
      {/* Top Header */}
      <div className="flex items-center justify-between pb-4 border-b border-white/5 mt-4">
        <h1 className="text-lg font-medium text-muted-foreground">
          <span className="text-foreground">Analytics</span> / Performance Metrics
        </h1>
        <div className="flex items-center gap-3">
          <div className="bg-[#150F1D] border border-white/5 rounded-sm px-3 py-1.5 flex items-center gap-2">
            <Filter className="h-4 w-4 text-muted-foreground" />
            <select className="bg-transparent border-none outline-none text-xs text-foreground cursor-pointer">
              <option className="bg-[#0A0710]">Last 30 Days</option>
              <option className="bg-[#0A0710]">Last Quarter</option>
              <option className="bg-[#0A0710]">This Year</option>
            </select>
          </div>
          <button className="bg-white/5 hover:bg-white/10 text-foreground border border-white/10 px-4 py-1.5 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors">
            <BarChart3 className="h-4 w-4" />
            EXPORT REPORT
          </button>
        </div>
      </div>

      {/* KPI Row */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
        
        <div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 relative overflow-hidden group">
          <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
            <Zap className="h-16 w-16 text-primary" />
          </div>
          <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-4">Total Focus Hours</h3>
          <div className="flex items-end gap-3 mb-1">
            <span className="text-4xl font-bold text-foreground">124.5</span>
            <span className="text-xs text-emerald-500 flex items-center font-medium mb-1">
              <ArrowUpRight className="h-3 w-3 mr-0.5" /> 12%
            </span>
          </div>
          <div className="text-[11px] text-muted-foreground">vs previous 30 days</div>
        </div>

        <div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 relative overflow-hidden group">
          <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
            <Target className="h-16 w-16 text-emerald-500" />
          </div>
          <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-4">Goal Completion</h3>
          <div className="flex items-end gap-3 mb-1">
            <span className="text-4xl font-bold text-foreground">82%</span>
            <span className="text-xs text-emerald-500 flex items-center font-medium mb-1">
              <ArrowUpRight className="h-3 w-3 mr-0.5" /> 4%
            </span>
          </div>
          <div className="text-[11px] text-muted-foreground">vs previous 30 days</div>
        </div>

        <div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 relative overflow-hidden group">
          <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
            <TrendingUp className="h-16 w-16 text-blue-500" />
          </div>
          <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-4">Productivity Score</h3>
          <div className="flex items-end gap-3 mb-1">
            <span className="text-4xl font-bold text-foreground">9.2</span>
            <span className="text-xs text-rose-500 flex items-center font-medium mb-1">
              <ArrowDownRight className="h-3 w-3 mr-0.5" /> 2%
            </span>
          </div>
          <div className="text-[11px] text-muted-foreground">Out of 10.0 max</div>
        </div>

        <div className="rounded-sm border border-primary/20 bg-primary/5 p-6 relative overflow-hidden group flex flex-col justify-between">
          <div className="flex items-center gap-2 mb-2">
            <Brain className="h-4 w-4 text-primary" />
            <h3 className="text-xs font-semibold uppercase tracking-wider text-primary">AI Insight</h3>
          </div>
          <p className="text-xs text-foreground/80 leading-relaxed font-medium">
            Your energy peaks consistently around <span className="text-primary font-bold">10:00 AM</span>. Consider scheduling complex tasks during this block to maximize output.
          </p>
        </div>

      </div>

      {/* Charts Grid */}
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6 flex-1 min-h-[400px]">
        
        {/* Main Area Chart */}
        <div className="xl:col-span-2 rounded-sm border border-white/5 bg-[#0A0710] p-6 flex flex-col">
          <div className="flex justify-between items-start mb-6">
            <div>
              <h3 className="text-sm font-semibold mb-1">Productivity vs Energy Correlation</h3>
              <p className="text-xs text-muted-foreground">How your physical energy levels impact deep work output.</p>
            </div>
            <div className="flex gap-4 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
              <div className="flex items-center gap-2"><div className="w-2 h-2 rounded-sm bg-[#6C5BB0]"></div> Focus Score</div>
              <div className="flex items-center gap-2"><div className="w-2 h-2 rounded-sm bg-emerald-500"></div> Energy Level</div>
            </div>
          </div>
          <div className="flex-1 w-full min-h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={productivityTrend}>
                <defs>
                  <linearGradient id="colorFocus" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#6C5BB0" stopOpacity={0.3}/>
                    <stop offset="95%" stopColor="#6C5BB0" stopOpacity={0}/>
                  </linearGradient>
                  <linearGradient id="colorEnergy" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#10b981" stopOpacity={0.3}/>
                    <stop offset="95%" stopColor="#10b981" stopOpacity={0}/>
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#ffffff05" />
                <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{ fontSize: 11, fill: '#8F89A5' }} dy={10} />
                <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11, fill: '#8F89A5' }} dx={-10} />
                <Tooltip 
                  contentStyle={{ backgroundColor: "#1F172B", border: "none", fontSize: "12px", color: "#FBF9FE", borderRadius: "4px" }} 
                  itemStyle={{ color: "#FBF9FE" }}
                />
                <Area type="monotone" dataKey="focus" stroke="#6C5BB0" strokeWidth={2} fillOpacity={1} fill="url(#colorFocus)" />
                <Area type="monotone" dataKey="energy" stroke="#10b981" strokeWidth={2} fillOpacity={1} fill="url(#colorEnergy)" />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* Side Charts Stack */}
        <div className="flex flex-col gap-6">
          
          {/* Radar Chart */}
          <div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 flex-1 flex flex-col">
            <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-4">Effort Distribution</h3>
            <div className="flex-1 w-full min-h-[200px] flex items-center justify-center">
              <ResponsiveContainer width="100%" height="100%">
                <RadarChart cx="50%" cy="50%" outerRadius="70%" data={focusRadarData}>
                  <PolarGrid stroke="#ffffff10" />
                  <PolarAngleAxis dataKey="subject" tick={{ fill: '#8F89A5', fontSize: 10 }} />
                  <Radar name="Effort" dataKey="A" stroke="#6C5BB0" fill="#6C5BB0" fillOpacity={0.3} />
                  <Tooltip 
                    contentStyle={{ backgroundColor: "#1F172B", border: "none", fontSize: "12px", color: "#FBF9FE" }} 
                    itemStyle={{ color: "#FBF9FE" }}
                  />
                </RadarChart>
              </ResponsiveContainer>
            </div>
          </div>

          {/* Bar Chart */}
          <div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 flex-1 flex flex-col">
            <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-4">Habit Consistency</h3>
            <div className="flex-1 w-full min-h-[150px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={habitCompletion} layout="vertical" margin={{ left: 0, right: 0, top: 0, bottom: 0 }}>
                  <XAxis type="number" hide />
                  <YAxis dataKey="name" type="category" axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#8F89A5' }} width={70} />
                  <Tooltip 
                    cursor={{ fill: '#ffffff05' }}
                    contentStyle={{ backgroundColor: "#1F172B", border: "none", fontSize: "12px", color: "#FBF9FE" }} 
                    itemStyle={{ color: "#FBF9FE" }}
                  />
                  <Bar dataKey="completed" stackId="a" fill="#6C5BB0" radius={[2, 0, 0, 2]} barSize={12} />
                  <Bar dataKey="missed" stackId="a" fill="#2B2538" radius={[0, 2, 2, 0]} barSize={12} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>

        </div>

      </div>

    </div>
  );
}