"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { Button, EmptyState, Spinner } from "@/components/ui";
import { useSession } from "@/components/session-provider";
import { api } from "@/lib/api-client";
import { formatCount, formatMoney, formatWatchTime } from "@/lib/format";

type Data = {
  channel: { name: string; handle: string; isMonetized: boolean };
  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 }[];
  };
  uploads: { id: string; title: string; views: number; status: string }[];
  revenue: { estimatedCents: number; pendingCents: number; rpmCents: number };
};

export default function StudioDashboard() {
  const { channel, user } = useSession();
  const [data, setData] = useState<Data | null>(null);
  const [error, setError] = useState<string | null>(null);

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

  if (!user) return <EmptyState icon="🔒" title="Sign in to open Creator Studio" action={<Link href="/login" className="text-sm font-semibold text-brand">Sign in</Link>} />;
  if (!channel)
    return (
      <EmptyState
        icon="🎛️"
        title="Create your channel to start publishing"
        hint="Every PlayTube account can run one channel with unlimited uploads."
        action={<Button onClick={() => void api("/api/channels", { method: "POST", json: { name: user.displayName } }).then(() => window.location.reload())}>Create channel</Button>}
      />
    );

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

  const peak = Math.max(1, ...data.analytics.daily.map((d) => d.views));

  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">Welcome back, {channel.name}</h1>
          <p className="text-sm text-muted">Here is how your channel performed recently.</p>
        </div>
        <Link href="/studio/upload"><Button>⬆️ Upload video</Button></Link>
      </header>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {[
          { label: "Views (lifetime)", value: formatCount(data.analytics.totals.views) },
          { label: "Watch time", value: formatWatchTime(data.analytics.watchTimeSeconds) },
          { label: "Subscribers", value: formatCount(0) },
          { 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 · last 14 days</h2>
        <div className="flex h-40 items-end gap-1">
          {data.analytics.daily.map((day) => (
            <div key={day.day} className="flex flex-1 flex-col items-center gap-1">
              <div className="w-full rounded-t bg-brand/80" style={{ height: `${(day.views / peak) * 100}%` }} title={`${day.views} views`} />
              <span className="text-[9px] text-muted">{day.day.split(" ")[1]}</span>
            </div>
          ))}
          {data.analytics.daily.length === 0 ? <p className="text-sm text-muted">No traffic yet.</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">Top videos</h2>
          <div className="space-y-2">
            {data.analytics.topVideos.map((video) => (
              <Link key={video.id} href={`/watch/${video.id}`} className="flex items-center justify-between gap-3 rounded-lg px-2 py-2 text-sm hover:bg-surface">
                <span className="line-clamp-1 flex-1">{video.title}</span>
                <span className="text-xs text-muted">{formatCount(video.views)} views</span>
              </Link>
            ))}
            {data.analytics.topVideos.length === 0 ? <p className="text-sm text-muted">Upload your first video.</p> : null}
          </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 demographics</h2>
          <div className="space-y-2">
            {data.analytics.demographics.slice(0, 8).map((row) => {
              const total = data.analytics.demographics.reduce((sum, d) => sum + d.count, 0) || 1;
              return (
                <div key={`${row.ageBracket}-${row.gender}`} className="flex items-center gap-3 text-xs">
                  <span className="w-20 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 / total) * 100}%` }} />
                  </span>
                  <span className="w-10 text-right text-muted">{Math.round((row.count / total) * 100)}%</span>
                </div>
              );
            })}
            {data.analytics.demographics.length === 0 ? <p className="text-sm text-muted">No audience data yet.</p> : null}
          </div>
        </section>
      </div>
    </div>
  );
}