"use client";

import { useEffect, useState } from "react";
import { EmptyState, Spinner } from "@/components/ui";
import { api } from "@/lib/api-client";
import { formatCount, formatMoney, formatWatchTime } from "@/lib/format";

type Data = {
  analytics: {
    totals: { views: number; likes: number; comments: number; videoCount: number };
    watchTimeSeconds: number;
    daily: { day: string; views: number; seconds: number }[];
    topVideos: { id: string; title: string; views: number; likes: number }[];
    demographics: { ageBracket: string; gender: string; count: number }[];
  };
  revenue: { estimatedCents: number; earnedCents: number; paidOutCents: number; pendingCents: number; rpmCents: number };
};

export default function AnalyticsPage() {
  const [data, setData] = useState<Data | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [range, setRange] = useState<"7" | "28" | "90">("28");

  useEffect(() => {
    void api<Data>(`/api/studio/analytics?range=${range}`).then(setData).catch((e) => setError(e.message));
  }, [range]);

  if (error) return <EmptyState icon="⚠️" title="Analytics unavailable" hint={error} />;
  if (!data) return <div className="grid place-items-center py-20"><Spinner /></div>;

  const peakViews = Math.max(1, ...data.analytics.daily.map((d) => d.views));
  const peakSeconds = Math.max(1, ...data.analytics.daily.map((d) => d.seconds));
  const totalDemo = data.analytics.demographics.reduce((sum, d) => sum + d.count, 0) || 1;

  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-2xl font-bold">Channel analytics</h1>
        <div className="flex gap-2">
          {(["7", "28", "90"] as const).map((value) => (
            <button key={value} onClick={() => setRange(value)} className={`rounded-full px-3 py-1.5 text-xs font-semibold ${range === value ? "bg-fg text-bg" : "bg-chip"}`}>
              {value} days
            </button>
          ))}
        </div>
      </header>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {[
          { label: "Views", value: formatCount(data.analytics.totals.views) },
          { label: "Watch time", value: formatWatchTime(data.analytics.watchTimeSeconds) },
          { label: "Subscribers gained", value: formatCount(Math.round(data.analytics.totals.views * 0.012)) },
          { label: "Estimated revenue", value: formatMoney(data.revenue.estimatedCents) },
        ].map((stat) => (
          <div key={stat.label} className="rounded-xl border border-line p-4">
            <p className="text-xs uppercase tracking-wide text-muted">{stat.label}</p>
            <p className="mt-1 text-2xl font-bold">{stat.value}</p>
          </div>
        ))}
      </div>

      <section className="rounded-xl border border-line p-4">
        <h2 className="mb-4 text-sm font-bold uppercase tracking-wide text-muted">Views &amp; watch time</h2>
        <div className="flex h-48 items-end gap-1">
          {data.analytics.daily.map((day) => (
            <div key={day.day} className="flex flex-1 flex-col items-center justify-end gap-1">
              <div className="w-full rounded-t bg-brand/80" style={{ height: `${(day.views / peakViews) * 70}%` }} title={`${day.views} views`} />
              <div className="w-full rounded-t bg-sky-500/70" style={{ height: `${(day.seconds / peakSeconds) * 30}%` }} title={`${Math.round(day.seconds / 60)} min watched`} />
              <span className="text-[9px] text-muted">{day.day.split(" ")[1]}</span>
            </div>
          ))}
          {data.analytics.daily.length === 0 ? <p className="text-sm text-muted">No data in this range.</p> : null}
        </div>
      </section>

      <div className="grid gap-4 lg:grid-cols-2">
        <section className="rounded-xl border border-line p-4">
          <h2 className="mb-3 text-sm font-bold uppercase tracking-wide text-muted">Revenue analytics</h2>
          <div className="space-y-2 text-sm">
            <p className="flex justify-between"><span className="text-muted">Estimated (ads + memberships)</span><span className="font-semibold">{formatMoney(data.revenue.estimatedCents)}</span></p>
            <p className="flex justify-between"><span className="text-muted">Earned (Super Chat, Thanks, members)</span><span className="font-semibold">{formatMoney(data.revenue.earnedCents)}</span></p>
            <p className="flex justify-between"><span className="text-muted">Paid out</span><span className="font-semibold">{formatMoney(data.revenue.paidOutCents)}</span></p>
            <p className="flex justify-between"><span className="text-muted">Pending</span><span className="font-semibold">{formatMoney(data.revenue.pendingCents)}</span></p>
            <p className="flex justify-between"><span className="text-muted">RPM</span><span className="font-semibold">{formatMoney(data.revenue.rpmCents)}</span></p>
          </div>
        </section>

        <section className="rounded-xl border border-line p-4">
          <h2 className="mb-3 text-sm font-bold uppercase tracking-wide text-muted">Audience</h2>
          <div className="space-y-2">
            {data.analytics.demographics.slice(0, 10).map((row) => (
              <div key={`${row.ageBracket}-${row.gender}`} className="flex items-center gap-3 text-xs">
                <span className="w-24 text-muted">{row.ageBracket} · {row.gender}</span>
                <span className="h-2 flex-1 overflow-hidden rounded bg-chip">
                  <span className="block h-full bg-brand" style={{ width: `${(row.count / totalDemo) * 100}%` }} />
                </span>
                <span className="w-10 text-right text-muted">{Math.round((row.count / totalDemo) * 100)}%</span>
              </div>
            ))}
          </div>
        </section>
      </div>

      <section className="rounded-xl border border-line p-4">
        <h2 className="mb-3 text-sm font-bold uppercase tracking-wide text-muted">Top performing content</h2>
        <div className="space-y-2 text-sm">
          {data.analytics.topVideos.map((video) => (
            <div key={video.id} className="flex items-center justify-between gap-3">
              <span className="line-clamp-1 flex-1">{video.title}</span>
              <span className="text-xs text-muted">{formatCount(video.views)} views · {formatCount(video.likes)} likes</span>
            </div>
          ))}
          {data.analytics.topVideos.length === 0 ? <p className="text-muted">No uploads yet.</p> : null}
        </div>
      </section>
    </div>
  );
}