import Sidebar from "@/components/Sidebar";
import DashboardHeader from "@/components/DashboardHeader";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";

const growthData = [
  { month: "Jul", users: 1200 }, { month: "Aug", users: 1800 },
  { month: "Sep", users: 2400 }, { month: "Oct", users: 3100 },
  { month: "Nov", users: 3900 }, { month: "Dec", users: 4800 },
];

const funnel = [
  { label: "Visitors", value: 12450, pct: 100 },
  { label: "Signups", value: 3200, pct: 25.7 },
  { label: "Trials", value: 1840, pct: 14.8 },
  { label: "Paid", value: 920, pct: 7.4 },
];

const engagement = [
  { label: "DAU", value: "1,247" },
  { label: "WAU", value: "4,832" },
  { label: "MAU", value: "12,450" },
  { label: "Avg Session", value: "4m 32s" },
];

const topPages = [
  { page: "Dashboard", views: 8420, unique: 3210, bounce: "24%" },
  { page: "Analytics", views: 5340, unique: 2180, bounce: "31%" },
  { page: "Settings", views: 3120, unique: 1540, bounce: "18%" },
  { page: "API Docs", views: 2890, unique: 1320, bounce: "42%" },
  { page: "Billing", views: 2140, unique: 980, bounce: "15%" },
];

export default function AnalyticsPage() {
  return (
    <div className="flex min-h-screen bg-slate-50">
      <Sidebar activePath="/analytics" />
      <div className="flex-1 lg:ml-64">
        <DashboardHeader />
        <main className="p-6 space-y-6">
          {/* User Growth Chart */}
          <Card>
            <CardHeader>
              <CardTitle>User Growth</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-72">
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart data={growthData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                    <XAxis dataKey="month" stroke="#94a3b8" fontSize={12} />
                    <YAxis stroke="#94a3b8" fontSize={12} />
                    <Tooltip />
                    <Area type="monotone" dataKey="users" stroke="#6366f1" fill="#6366f1" fillOpacity={0.15} />
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>

          {/* Conversion Funnel */}
          <Card>
            <CardHeader>
              <CardTitle>Conversion Funnel</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {funnel.map((step) => (
                <div key={step.label} className="space-y-1">
                  <div className="flex items-center justify-between text-sm">
                    <span className="font-medium">{step.label}</span>
                    <span className="text-slate-500">{step.value.toLocaleString()} ({step.pct}%)</span>
                  </div>
                  <div className="h-3 bg-slate-100 rounded-full overflow-hidden">
                    <div className="h-full bg-indigo-500 rounded-full transition-all" style={{ width: `\${step.pct}%` }} />
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>

          {/* Engagement Grid */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            {engagement.map((e) => (
              <Card key={e.label}>
                <CardContent className="p-6 text-center">
                  <p className="text-sm text-slate-500">{e.label}</p>
                  <p className="text-2xl font-bold mt-1">{e.value}</p>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Top Pages Table */}
          <Card>
            <CardHeader>
              <CardTitle>Top Pages</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-slate-200">
                      <th className="text-left py-3 px-4 font-medium text-slate-500">Page</th>
                      <th className="text-left py-3 px-4 font-medium text-slate-500">Views</th>
                      <th className="text-left py-3 px-4 font-medium text-slate-500">Unique Visitors</th>
                      <th className="text-left py-3 px-4 font-medium text-slate-500">Bounce Rate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {topPages.map((p) => (
                      <tr key={p.page} className="border-b border-slate-100 last:border-0">
                        <td className="py-3 px-4 font-medium">{p.page}</td>
                        <td className="py-3 px-4 text-slate-600">{p.views.toLocaleString()}</td>
                        <td className="py-3 px-4 text-slate-600">{p.unique.toLocaleString()}</td>
                        <td className="py-3 px-4 text-slate-600">{p.bounce}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        </main>
      </div>
    </div>
  );
}