import {
  // Activity,
  BadgeCheck,
  BookOpen,
  // Coins,
  DollarSign,
  HelpCircle,
  TicketCheck,
  // TrendingUp,
  Users,
  Bell,
  UsersRound,
} from "lucide-react"
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"
import { StatCard } from "../components/dashboard/StatCard"
import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card"
// import { cn } from "../lib/utils"
import { getTeamMemberById } from "../api/team.api"
import { getDashboard } from "../api/analytics.api"
import { useEffect, useState } from "react"
import type { DashboardData } from "../types/analytics.types"

const PIE_COLORS = ["#9E2891", "#FFD23F", "#1DE9B6", "#C26FC0", "#6366F1", "#F97316", "#14B8A6", "#EF4444"]

function formatDate(dateStr: string) {
  const d = new Date(dateStr)
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" })
}

export function DashboardPage() {
  const [userFirstName, setUserFirstName] = useState<string>("")
  const [dashboard, setDashboard] = useState<DashboardData | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const memberId = Number(localStorage.getItem("member_id"))
        const res = await getTeamMemberById(memberId)
        const member = res.data.data

        setUserFirstName(member.first_name)
        localStorage.setItem("user_first_name", member.first_name)
        localStorage.setItem("user_last_name", member.last_name)
        window.dispatchEvent(new Event("user-profile-updated"))
      } catch (err) {
        console.error(err)
      }
    }

    const fetchDashboard = async () => {
      try {
        const res = await getDashboard()
        setDashboard(res.data as unknown as DashboardData)
      } catch (err) {
        console.error(err)
      } finally {
        setLoading(false)
      }
    }

    fetchUser()
    fetchDashboard()
  }, [])

  const registrationData =
    dashboard?.users.registrations_last_30_days.map((d) => ({
      date: formatDate(d.date),
      count: d.count,
    })) ?? []

  const revenueData =
    dashboard?.payments.revenue_last_30_days.map((d) => ({
      date: formatDate(d.date),
      revenue: d.revenue,
    })) ?? []

  const subscriptionStatusData =
    dashboard?.subscriptions.by_status.map((s, i) => ({
      name: s.label,
      value: s.count,
      color: PIE_COLORS[i % PIE_COLORS.length],
    })) ?? []

  const issueStatusData =
    dashboard?.issues.by_status.map((s, i) => ({
      name: s.label,
      value: s.count,
      color: PIE_COLORS[i % PIE_COLORS.length],
    })) ?? []

  return (
    <div className="mx-auto w-full max-w-6xl">
      <div className="mb-2 text-sm font-semibold text-grayScale-500">Dashboard</div>
      <div className="mb-5 text-2xl font-semibold tracking-tight">
        Welcome, {userFirstName || localStorage.getItem("user_first_name")}
      </div>

      {loading ? (
        <div className="flex items-center justify-center py-20 text-grayScale-500">Loading dashboard…</div>
      ) : !dashboard ? (
        <div className="flex items-center justify-center py-20 text-destructive">Failed to load dashboard data.</div>
      ) : (
        <>
          {/* Stat Cards */}
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            <StatCard
              icon={Users}
              label="Total Users"
              value={dashboard.users.total_users.toLocaleString()}
              deltaLabel={`+${dashboard.users.new_month} this month`}
              deltaPositive={dashboard.users.new_month > 0}
            />
            <StatCard
              icon={BadgeCheck}
              label="Active Subscribers"
              value={dashboard.subscriptions.active_subscriptions.toLocaleString()}
              deltaLabel={`+${dashboard.subscriptions.new_month} this month`}
              deltaPositive={dashboard.subscriptions.new_month > 0}
            />
            <StatCard
              icon={DollarSign}
              label="Total Revenue (ETB)"
              value={dashboard.payments.total_revenue.toLocaleString()}
              deltaLabel={`${dashboard.payments.total_payments} payments`}
              deltaPositive={dashboard.payments.total_revenue > 0}
            />
            <StatCard
              icon={TicketCheck}
              label="Issues"
              value={`${dashboard.issues.resolved_issues}/${dashboard.issues.total_issues}`}
              deltaLabel={`${(dashboard.issues.resolution_rate * 100).toFixed(1)}% resolved`}
              deltaPositive={dashboard.issues.resolution_rate > 0.5}
            />
          </div>

          {/* Secondary Stats */}
          <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            <StatCard
              icon={BookOpen}
              label="Courses"
              value={dashboard.courses.total_courses.toLocaleString()}
              deltaLabel={`${dashboard.courses.total_sub_courses} sub-courses, ${dashboard.courses.total_videos} videos`}
              deltaPositive
            />
            <StatCard
              icon={HelpCircle}
              label="Questions"
              value={dashboard.content.total_questions.toLocaleString()}
              deltaLabel={`${dashboard.content.total_question_sets} question sets`}
              deltaPositive
            />
            <StatCard
              icon={Bell}
              label="Notifications"
              value={dashboard.notifications.total_sent.toLocaleString()}
              deltaLabel={`${dashboard.notifications.unread_count} unread`}
              deltaPositive={dashboard.notifications.unread_count === 0}
            />
            <StatCard
              icon={UsersRound}
              label="Team Members"
              value={dashboard.team.total_members.toLocaleString()}
              deltaLabel={`${dashboard.team.by_role.length} roles`}
              deltaPositive
            />
          </div>

          {/* User Registrations Chart */}
          <div className="mt-5 grid gap-4">
            <Card className="shadow-none">
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <CardTitle>User Registrations</CardTitle>
                    <div className="mt-1 text-2xl font-semibold tracking-tight">
                      {dashboard.users.total_users.toLocaleString()}
                    </div>
                    <div className="text-xs font-medium text-mint-500">
                      +{dashboard.users.new_today} today · +{dashboard.users.new_week} this week
                    </div>
                  </div>
                  <div className="rounded-full bg-grayScale-100 px-3 py-1 text-xs font-semibold text-grayScale-500">
                    Last 30 Days
                  </div>
                </div>
              </CardHeader>
              <CardContent className="h-[280px] p-6 pt-2">
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart data={registrationData} margin={{ left: 8, right: 8, top: 8, bottom: 0 }}>
                    <defs>
                      <linearGradient id="fillBrand" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#9E2891" stopOpacity={0.25} />
                        <stop offset="100%" stopColor="#9E2891" stopOpacity={0.02} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid vertical={false} stroke="#E0E0E0" strokeDasharray="4 4" />
                    <XAxis dataKey="date" tickLine={false} axisLine={false} fontSize={12} />
                    <YAxis tickLine={false} axisLine={false} fontSize={12} width={32} allowDecimals={false} />
                    <Tooltip
                      contentStyle={{
                        borderRadius: 12,
                        border: "1px solid #E0E0E0",
                        boxShadow: "0 10px 30px rgba(0,0,0,0.08)",
                      }}
                    />
                    <Area
                      type="monotone"
                      dataKey="count"
                      stroke="#9E2891"
                      strokeWidth={2}
                      fill="url(#fillBrand)"
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            <div className="grid gap-4 lg:grid-cols-2">
              {/* Subscription / Issue Status Pie */}
              <Card className="shadow-none">
                <CardHeader className="pb-2">
                  <CardTitle>
                    {subscriptionStatusData.length > 0 ? "Subscription Status" : "Issue Status"}
                  </CardTitle>
                </CardHeader>
                <CardContent className="grid gap-4 p-6 pt-2 md:grid-cols-2">
                  {(subscriptionStatusData.length > 0 ? subscriptionStatusData : issueStatusData).length > 0 ? (
                    <>
                      <div className="h-[180px]">
                        <ResponsiveContainer width="100%" height="100%">
                          <PieChart>
                            <Pie
                              data={subscriptionStatusData.length > 0 ? subscriptionStatusData : issueStatusData}
                              dataKey="value"
                              nameKey="name"
                              innerRadius={55}
                              outerRadius={80}
                              paddingAngle={2}
                            >
                              {(subscriptionStatusData.length > 0 ? subscriptionStatusData : issueStatusData).map(
                                (entry) => (
                                  <Cell key={entry.name} fill={entry.color} />
                                ),
                              )}
                            </Pie>
                            <Tooltip
                              contentStyle={{
                                borderRadius: 12,
                                border: "1px solid #E0E0E0",
                                boxShadow: "0 10px 30px rgba(0,0,0,0.08)",
                              }}
                            />
                          </PieChart>
                        </ResponsiveContainer>
                      </div>
                      <div className="space-y-3">
                        {(subscriptionStatusData.length > 0 ? subscriptionStatusData : issueStatusData).map((s) => (
                          <div key={s.name} className="flex items-center justify-between gap-3 text-sm">
                            <div className="flex items-center gap-2">
                              <span
                                className="h-2.5 w-2.5 rounded-full"
                                style={{ backgroundColor: s.color }}
                              />
                              <span className="text-grayScale-600">{s.name}</span>
                            </div>
                            <span className="font-semibold text-grayScale-600">{s.value.toLocaleString()}</span>
                          </div>
                        ))}
                      </div>
                    </>
                  ) : (
                    <div className="col-span-2 flex items-center justify-center py-10 text-sm text-grayScale-400">
                      No data available
                    </div>
                  )}
                </CardContent>
              </Card>

              {/* Revenue Chart */}
              <Card className="shadow-none">
                <CardHeader className="pb-2">
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle>Revenue Trend</CardTitle>
                      <div className="mt-2 text-2xl font-semibold tracking-tight">
                        ETB {dashboard.payments.total_revenue.toLocaleString()}
                      </div>
                      <div className="text-xs font-medium text-grayScale-500">Last 30 Days (ETB)</div>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="h-[220px] p-6 pt-2">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={revenueData} margin={{ left: 8, right: 8, top: 8 }}>
                      <CartesianGrid vertical={false} stroke="#E0E0E0" strokeDasharray="4 4" />
                      <XAxis dataKey="date" tickLine={false} axisLine={false} fontSize={12} />
                      <YAxis tickLine={false} axisLine={false} fontSize={12} width={42} />
                      <Tooltip
                        formatter={(v) => [`${Number(v).toLocaleString()}`, "ETB"]}
                        contentStyle={{
                          borderRadius: 12,
                          border: "1px solid #E0E0E0",
                          boxShadow: "0 10px 30px rgba(0,0,0,0.08)",
                        }}
                      />
                      <Bar dataKey="revenue" radius={[10, 10, 0, 0]} fill="#9E2891" />
                    </BarChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>
            </div>

            {/* Users by Role / Region / Knowledge Level */}
            <div className="grid gap-4 lg:grid-cols-3">
              {[
                { title: "Users by Role", data: dashboard.users.by_role },
                { title: "Users by Region", data: dashboard.users.by_region },
                { title: "Users by Knowledge Level", data: dashboard.users.by_knowledge_level },
              ].map(({ title, data }) => (
                <Card key={title} className="shadow-none">
                  <CardHeader className="pb-2">
                    <CardTitle>{title}</CardTitle>
                  </CardHeader>
                  <CardContent className="p-6 pt-2">
                    {data.length > 0 ? (
                      <div className="space-y-3">
                        {data.map((item, i) => (
                          <div key={item.label} className="flex items-center justify-between gap-3 text-sm">
                            <div className="flex items-center gap-2">
                              <span
                                className="h-2.5 w-2.5 rounded-full"
                                style={{ backgroundColor: PIE_COLORS[i % PIE_COLORS.length] }}
                              />
                              <span className="text-grayScale-600">{item.label}</span>
                            </div>
                            <span className="font-semibold text-grayScale-600">{item.count.toLocaleString()}</span>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="flex items-center justify-center py-6 text-sm text-grayScale-400">
                        No data available
                      </div>
                    )}
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  )
}