"use client";

import { Download } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Legend,
  Line,
  LineChart,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ANALYTICS_DATA } from "@/data/analytics";
import { ARCHETYPES } from "@/data/archetypes";

const DATE_RANGES = ["7d", "30d", "90d"] as const;
type DateRange = typeof DATE_RANGES[number];

const archetypeColorMap = Object.fromEntries(ARCHETYPES.map((a) => [a.id, a.color]));

const archetypeDistData = ANALYTICS_DATA.archetypeDistribution.map((d) => ({
  ...d,
  name: ARCHETYPES.find((a) => a.id === d.archetypeId)?.name.replace("The ", "") ?? d.archetypeId,
  color: archetypeColorMap[d.archetypeId] ?? "#888",
}));

const crmFunnelData = ANALYTICS_DATA.crmFunnel.map((d) => ({
  ...d,
  label: d.status.charAt(0).toUpperCase() + d.status.slice(1),
}));

export default function AnalyticsPage() {
  const [dateRange, setDateRange] = useState<DateRange>("30d");

  const registrationData =
    dateRange === "7d"
      ? ANALYTICS_DATA.userRegistrations.slice(-7)
      : dateRange === "30d"
        ? ANALYTICS_DATA.userRegistrations
        : ANALYTICS_DATA.userRegistrations;

  return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
          <p className="text-sm text-gray-500">Platform performance and growth metrics</p>
        </div>
        <div className="flex items-center gap-3">
          {/* Date range toggle */}
          <div className="flex rounded-lg border border-gray-200 bg-white overflow-hidden">
            {DATE_RANGES.map((range) => (
              <button
                key={range}
                className={`px-3 py-1.5 text-xs font-medium transition-colors ${
                  dateRange === range
                    ? "bg-teal-700 text-white"
                    : "text-gray-600 hover:bg-gray-50"
                }`}
                onClick={() => setDateRange(range)}
              >
                {range}
              </button>
            ))}
          </div>
          <Button
            variant="outline"
            size="sm"
            className="gap-2 text-xs"
            onClick={() => toast.info("Export triggered (PoC mode)")}
          >
            <Download className="h-3.5 w-3.5" />
            Export
          </Button>
        </div>
      </div>

      {/* Charts Grid */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {/* 1. User Registrations */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-semibold">User Registrations</CardTitle>
            <p className="text-xs text-gray-400">Daily new user sign-ups</p>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={220}>
              <LineChart data={registrationData} margin={{ top: 4, right: 8, bottom: 4, left: 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                <XAxis
                  dataKey="date"
                  tick={{ fontSize: 10 }}
                  tickFormatter={(v: string) => v.slice(5)}
                />
                <YAxis tick={{ fontSize: 10 }} />
                <Tooltip
                  contentStyle={{ fontSize: 12, borderRadius: 8 }}
                  formatter={(v) => [`${String(v)}`, "Registrations"]}
                />
                <Line
                  type="monotone"
                  dataKey="value"
                  stroke="#0F766E"
                  strokeWidth={2}
                  dot={false}
                  activeDot={{ r: 4 }}
                />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* 2. Revenue Over Time */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-semibold">Revenue Over Time</CardTitle>
            <p className="text-xs text-gray-400">Monthly revenue in CHF</p>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={220}>
              <BarChart data={ANALYTICS_DATA.revenue} margin={{ top: 4, right: 8, bottom: 4, left: 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                <XAxis dataKey="date" tick={{ fontSize: 10 }} />
                <YAxis tick={{ fontSize: 10 }} />
                <Tooltip
                  contentStyle={{ fontSize: 12, borderRadius: 8 }}
                  formatter={(v) => [`CHF ${Number(v ?? 0).toLocaleString()}`, "Revenue"] as [string, string]}
                />
                <Bar dataKey="value" fill="#0F766E" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* 3. Archetype Distribution */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-semibold">Archetype Distribution</CardTitle>
            <p className="text-xs text-gray-400">Share of users by metabolic archetype</p>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-4">
              <ResponsiveContainer width="100%" height={200}>
                <PieChart>
                  <Pie
                    data={archetypeDistData}
                    cx="50%"
                    cy="50%"
                    innerRadius={50}
                    outerRadius={80}
                    paddingAngle={2}
                    dataKey="count"
                  >
                    {archetypeDistData.map((entry) => (
                      <Cell key={entry.archetypeId} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip
                    contentStyle={{ fontSize: 12, borderRadius: 8 }}
                    formatter={(v, _n, p) => [`${String(v ?? "")} users`, (p as { payload?: { name?: string } }).payload?.name ?? ""] as [string, string]}
                  />
                </PieChart>
              </ResponsiveContainer>
              <div className="shrink-0 space-y-1.5">
                {archetypeDistData.map((d) => (
                  <div key={d.archetypeId} className="flex items-center gap-2 text-xs">
                    <span className="h-2.5 w-2.5 rounded-full shrink-0" style={{ backgroundColor: d.color }} />
                    <span className="text-gray-600 max-w-[90px] truncate">{d.name}</span>
                    <span className="font-bold text-gray-800">{d.percentage}%</span>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 4. Conversion Funnel */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-semibold">Conversion Funnel</CardTitle>
            <p className="text-xs text-gray-400">Visitors → Quiz → Purchase</p>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={220}>
              <BarChart
                data={ANALYTICS_DATA.conversionFunnel}
                layout="vertical"
                margin={{ top: 4, right: 40, bottom: 4, left: 80 }}
              >
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" horizontal={false} />
                <XAxis type="number" tick={{ fontSize: 10 }} />
                <YAxis dataKey="stage" type="category" tick={{ fontSize: 10 }} width={80} />
                <Tooltip
                  contentStyle={{ fontSize: 12, borderRadius: 8 }}
                  formatter={(v, _n, p) => [
                    `${Number(v ?? 0).toLocaleString()} (${(p as { payload?: { percentage?: number } }).payload?.percentage ?? 0}%)`,
                    "Users",
                  ] as [string, string]}
                />
                <Bar dataKey="count" fill="#0F766E" radius={[0, 4, 4, 0]}>
                  {ANALYTICS_DATA.conversionFunnel.map((_entry, i) => (
                    <Cell
                      key={i}
                      fill={`hsl(${175 - i * 15}, ${60 - i * 5}%, ${45 + i * 5}%)`}
                    />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* 5. Subscription Growth */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-semibold">Subscription Growth</CardTitle>
            <p className="text-xs text-gray-400">Monthly active Professional subscribers</p>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={220}>
              <AreaChart data={ANALYTICS_DATA.subscriptionGrowth} margin={{ top: 4, right: 8, bottom: 4, left: 0 }}>
                <defs>
                  <linearGradient id="subGradient" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#0F766E" stopOpacity={0.15} />
                    <stop offset="95%" stopColor="#0F766E" stopOpacity={0} />
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                <XAxis dataKey="date" tick={{ fontSize: 10 }} />
                <YAxis tick={{ fontSize: 10 }} />
                <Tooltip
                  contentStyle={{ fontSize: 12, borderRadius: 8 }}
                  formatter={(v) => [String(v ?? ""), "Subscriptions"] as [string, string]}
                />
                <Area
                  type="monotone"
                  dataKey="value"
                  stroke="#0F766E"
                  strokeWidth={2}
                  fill="url(#subGradient)"
                />
              </AreaChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        {/* 6. Email Performance */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-semibold">Email Performance</CardTitle>
            <p className="text-xs text-gray-400">Open rate vs click rate by template</p>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={220}>
              <BarChart
                data={ANALYTICS_DATA.emailStats}
                margin={{ top: 4, right: 8, bottom: 4, left: 0 }}
              >
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                <XAxis
                  dataKey="templateName"
                  tick={{ fontSize: 9 }}
                  tickFormatter={(v: string) => v.split(" ")[0]}
                />
                <YAxis tick={{ fontSize: 10 }} unit="%" />
                <Tooltip
                  contentStyle={{ fontSize: 12, borderRadius: 8 }}
                  formatter={(v, name) => [`${String(v ?? "")}%`, String(name ?? "")] as [string, string]}
                />
                <Legend wrapperStyle={{ fontSize: 11 }} />
                <Bar dataKey="openRate" name="Open Rate" fill="#0F766E" radius={[2, 2, 0, 0]} />
                <Bar dataKey="clickRate" name="Click Rate" fill="#D97706" radius={[2, 2, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

      {/* CRM Funnel - Full Width */}
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-semibold">CRM Lead Funnel</CardTitle>
          <p className="text-xs text-gray-400">Distribution of leads across pipeline stages</p>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={160}>
            <BarChart
              data={crmFunnelData}
              margin={{ top: 4, right: 8, bottom: 4, left: 0 }}
            >
              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
              <XAxis dataKey="label" tick={{ fontSize: 11 }} />
              <YAxis tick={{ fontSize: 11 }} />
              <Tooltip
                contentStyle={{ fontSize: 12, borderRadius: 8 }}
                formatter={(v) => [String(v ?? ""), "Leads"] as [string, string]}
              />
              <Bar dataKey="count" radius={[4, 4, 0, 0]}>
                {crmFunnelData.map((_entry, i) => (
                  <Cell
                    key={i}
                    fill={["#6B7280", "#3B82F6", "#7C3AED", "#059669", "#EF4444"][i] ?? "#0F766E"}
                  />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  );
}