"use client";

import { useState, useEffect } from "react";
import dynamic from "next/dynamic";

// Lazy-load the recharts wrapper so the ~500KB charting bundle only ships
// when the user actually opens the spending page.
const SpendingChart = dynamic(() => import("./SpendingChart"), {
  ssr: false,
  loading: () => <div className="w-full h-[350px] animate-pulse bg-surface rounded" />,
});

interface WeekData {
  week: string;
  cam: number;
  purchases: number;
  tips: number;
  subscriptions: number;
}

export default function SpendingAnalyticsPage() {
  const [data, setData] = useState<WeekData[]>([]);
  const [loading, setLoading] = useState(true);
  const [totalSpent, setTotalSpent] = useState(0);

  useEffect(() => {
    // Placeholder data — would be replaced with actual API call
    const placeholderData: WeekData[] = [
      { week: "Mar 1-7", cam: 45, purchases: 20, tips: 15, subscriptions: 10 },
      { week: "Mar 8-14", cam: 30, purchases: 35, tips: 25, subscriptions: 10 },
      { week: "Mar 15-21", cam: 60, purchases: 15, tips: 30, subscriptions: 10 },
      { week: "Mar 22-28", cam: 25, purchases: 40, tips: 10, subscriptions: 10 },
    ];
    setData(placeholderData);
    setTotalSpent(
      placeholderData.reduce(
        (sum, w) => sum + w.cam + w.purchases + w.tips + w.subscriptions,
        0
      )
    );
    setLoading(false);
  }, []);

  if (loading) {
    return <div className="text-text-muted p-8 text-center">Loading analytics...</div>;
  }

  const breakdown = {
    cam: data.reduce((s, w) => s + w.cam, 0),
    purchases: data.reduce((s, w) => s + w.purchases, 0),
    tips: data.reduce((s, w) => s + w.tips, 0),
    subscriptions: data.reduce((s, w) => s + w.subscriptions, 0),
  };

  return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold text-text mb-6">Spending Analytics</h1>

      {/* Total Spent Card */}
      <div className="bg-surface rounded-lg p-6 mb-6">
        <p className="text-text-muted text-sm">Total Spent (Last 4 Weeks)</p>
        <p className="text-4xl font-bold text-gold mt-1">{totalSpent} credits</p>
      </div>

      {/* Breakdown Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div className="bg-surface rounded-lg p-4">
          <div className="w-3 h-3 rounded-full bg-purple-500 mb-2" />
          <p className="text-text-muted text-xs">Cam Sessions</p>
          <p className="text-xl font-bold text-text">{breakdown.cam}</p>
        </div>
        <div className="bg-surface rounded-lg p-4">
          <div className="w-3 h-3 rounded-full bg-blue-500 mb-2" />
          <p className="text-text-muted text-xs">Purchases</p>
          <p className="text-xl font-bold text-text">{breakdown.purchases}</p>
        </div>
        <div className="bg-surface rounded-lg p-4">
          <div className="w-3 h-3 rounded-full bg-green-500 mb-2" />
          <p className="text-text-muted text-xs">Tips</p>
          <p className="text-xl font-bold text-text">{breakdown.tips}</p>
        </div>
        <div className="bg-surface rounded-lg p-4">
          <div className="w-3 h-3 rounded-full bg-gold mb-2" />
          <p className="text-text-muted text-xs">Subscriptions</p>
          <p className="text-xl font-bold text-text">{breakdown.subscriptions}</p>
        </div>
      </div>

      {/* Chart */}
      <div className="bg-surface rounded-lg p-6">
        <h2 className="text-lg font-semibold text-text mb-4">Weekly Breakdown</h2>
        <SpendingChart data={data} />
      </div>
    </div>
  );
}