import React from 'react'
import { router, usePage } from '@inertiajs/react'
import StudioLayout from '../../Layouts/StudioLayout'
import { studioSurface, trackStudioEvent } from '../../utils/studioEvents'

const kpiItems = [
  { key: 'views', label: 'Views', icon: 'fa-eye', color: 'text-emerald-400', bg: 'bg-emerald-500/10' },
  { key: 'appreciation', label: 'Reactions', icon: 'fa-heart', color: 'text-pink-400', bg: 'bg-pink-500/10' },
  { key: 'shares', label: 'Shares', icon: 'fa-share-nodes', color: 'text-amber-400', bg: 'bg-amber-500/10' },
  { key: 'saves', label: 'Saves', icon: 'fa-bookmark', color: 'text-purple-400', bg: 'bg-purple-500/10' },
  { key: 'comments', label: 'Comments', icon: 'fa-comment', color: 'text-blue-400', bg: 'bg-blue-500/10' },
  { key: 'followers', label: 'Followers', icon: 'fa-user-group', color: 'text-cyan-300', bg: 'bg-cyan-400/10' },
]

const rangeOptions = [7, 14, 30, 60, 90]

function formatShortDate(value) {
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return value
  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
}

function TrendChart({ title, subtitle, points, colorClass, fillClass, icon }) {
  const values = (points || []).map((point) => Number(point.value || 0))
  const maxValue = Math.max(...values, 1)

  return (
    <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h2 className="text-lg font-semibold text-white">{title}</h2>
          <p className="mt-1 text-sm text-slate-400">{subtitle}</p>
        </div>
        <div className={`flex h-11 w-11 items-center justify-center rounded-2xl ${fillClass} ${colorClass}`}>
          <i className={`fa-solid ${icon}`} />
        </div>
      </div>

      <div className="mt-5 flex h-52 items-end gap-2">
        {(points || []).map((point) => {
          const height = `${Math.max(8, Math.round((Number(point.value || 0) / maxValue) * 100))}%`

          return (
            <div key={point.date} className="flex min-w-0 flex-1 flex-col items-center justify-end gap-2">
              <div className="text-[10px] font-medium text-slate-500">{Number(point.value || 0).toLocaleString()}</div>
              <div className="flex h-full w-full items-end rounded-t-[18px] bg-white/[0.03] px-[2px]">
                <div className={`w-full rounded-t-[16px] ${fillClass}`} style={{ height }} />
              </div>
              <div className="text-[10px] uppercase tracking-[0.14em] text-slate-500">{formatShortDate(point.date)}</div>
            </div>
          )
        })}
      </div>
    </section>
  )
}

export default function StudioAnalytics() {
  const { props } = usePage()
  const {
    totals,
    topContent,
    moduleBreakdown,
    recentComments,
    publishingTimeline,
    viewsTrend,
    engagementTrend,
    comparison,
    insightBlocks,
    rangeDays,
  } = props

  const updateRange = (days) => {
    trackStudioEvent('studio_filter_used', {
      surface: studioSurface(),
      module: 'analytics',
      meta: {
        range_days: days,
      },
    })

    router.get(window.location.pathname, { range_days: days }, {
      preserveScroll: true,
      preserveState: true,
      replace: true,
    })
  }

  return (
    <StudioLayout title="Analytics" subtitle="Cross-module insights for the whole creator workspace, not just artwork uploads.">
      <section className="mb-6 rounded-[28px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(244,114,182,0.12),_transparent_40%),linear-gradient(135deg,_rgba(15,23,42,0.86),_rgba(2,6,23,0.96))] p-5 shadow-[0_22px_60px_rgba(2,6,23,0.28)]">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Analytics window</p>
            <h2 className="mt-2 text-2xl font-semibold text-white">Performance over the last {rangeDays || 30} days</h2>
            <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-400">This view compares module output, shows views and engagement trends over time, and keeps publishing rhythm in the same window.</p>
          </div>

          <div className="inline-flex rounded-full border border-white/10 bg-black/20 p-1">
            {rangeOptions.map((days) => (
              <button
                key={days}
                type="button"
                onClick={() => updateRange(days)}
                className={`rounded-full px-4 py-2 text-sm font-semibold transition ${Number(rangeDays || 30) === days ? 'bg-white text-slate-950' : 'text-slate-300 hover:text-white'}`}
              >
                {days}d
              </button>
            ))}
          </div>
        </div>
      </section>

      <div className="grid grid-cols-2 gap-4 xl:grid-cols-6">
        {kpiItems.map((item) => (
          <div key={item.key} className="rounded-[26px] border border-white/10 bg-white/[0.03] p-5">
            <div className="flex items-center gap-3 mb-3">
              <div className={`w-10 h-10 rounded-xl ${item.bg} flex items-center justify-center ${item.color}`}>
                <i className={`fa-solid ${item.icon}`} />
              </div>
              <span className="text-[11px] font-medium text-slate-400 uppercase tracking-wider leading-tight">{item.label}</span>
            </div>
            <p className="text-3xl font-bold text-white tabular-nums">
              {(totals?.[item.key] ?? 0).toLocaleString()}
            </p>
          </div>
        ))}
      </div>

      <div className="mt-6 grid gap-6 xl:grid-cols-2">
        <TrendChart
          title="Views over time"
          subtitle="Cross-module reach across the current analytics window."
          points={viewsTrend}
          colorClass="text-emerald-300"
          fillClass="bg-emerald-400/60"
          icon="fa-eye"
        />
        <TrendChart
          title="Engagement over time"
          subtitle="Combined engagement score so you can see momentum shifts, not just raw traffic."
          points={engagementTrend}
          colorClass="text-pink-300"
          fillClass="bg-pink-400/60"
          icon="fa-bolt"
        />
      </div>

      <div className="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
        <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
          <h2 className="text-lg font-semibold text-white">Module breakdown</h2>
          <div className="mt-5 space-y-3">
            {(moduleBreakdown || []).map((item) => (
              <div key={item.key} className="rounded-[22px] border border-white/10 bg-black/20 p-4">
                <div className="flex items-center justify-between gap-4">
                  <div className="flex items-center gap-3 text-slate-200">
                    <i className={item.icon} />
                    <div>
                      <div className="font-semibold text-white">{item.label}</div>
                      <div className="text-xs text-slate-400">{Number(item.count || 0).toLocaleString()} items</div>
                    </div>
                  </div>
                  <a href={item.index_url} className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-100">Open</a>
                </div>
                <div className="mt-4 grid grid-cols-2 gap-3 text-sm text-slate-400 md:grid-cols-4">
                  <div><div>Views</div><div className="mt-1 font-semibold text-white">{Number(item.views || 0).toLocaleString()}</div></div>
                  <div><div>Reactions</div><div className="mt-1 font-semibold text-white">{Number(item.appreciation || 0).toLocaleString()}</div></div>
                  <div><div>Comments</div><div className="mt-1 font-semibold text-white">{Number(item.comments || 0).toLocaleString()}</div></div>
                  <div><div>Shares</div><div className="mt-1 font-semibold text-white">{Number(item.shares || 0).toLocaleString()}</div></div>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
          <h2 className="text-lg font-semibold text-white">Publishing rhythm</h2>
          <div className="mt-5 space-y-3">
            {(publishingTimeline || []).map((point) => (
              <div key={point.date}>
                <div className="mb-1 flex items-center justify-between text-xs text-slate-400">
                  <span>{new Date(point.date).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span>
                  <span>{point.count}</span>
                </div>
                <div className="h-2 overflow-hidden rounded-full bg-white/5">
                  <div className="h-full rounded-full bg-sky-300/60" style={{ width: `${Math.min(100, point.count * 18)}%` }} />
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>

      <div className="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
        <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
          <div className="flex items-center justify-between gap-4">
            <h2 className="text-lg font-semibold text-white">Module comparison</h2>
            <span className="text-xs uppercase tracking-[0.18em] text-slate-500">Last {rangeDays || 30} days</span>
          </div>
          <div className="mt-5 space-y-4">
            {(comparison || []).map((item) => {
              const viewMax = Math.max(...(comparison || []).map((entry) => Number(entry.views || 0)), 1)
              const engagementMax = Math.max(...(comparison || []).map((entry) => Number(entry.engagement || 0)), 1)

              return (
                <div key={item.key} className="rounded-[22px] border border-white/10 bg-black/20 p-4">
                  <div className="flex items-center justify-between gap-4">
                    <div className="flex items-center gap-3 text-slate-200">
                      <i className={item.icon} />
                      <div>
                        <div className="font-semibold text-white">{item.label}</div>
                        <div className="text-xs text-slate-400">{Number(item.published_count || 0).toLocaleString()} published</div>
                      </div>
                    </div>
                    <a href={moduleBreakdown?.find((entry) => entry.key === item.key)?.index_url} className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-100">Open</a>
                  </div>

                  <div className="mt-4 grid gap-4 md:grid-cols-2">
                    <div>
                      <div className="flex items-center justify-between text-xs text-slate-400">
                        <span>Views</span>
                        <span>{Number(item.views || 0).toLocaleString()}</span>
                      </div>
                      <div className="mt-2 h-2 overflow-hidden rounded-full bg-white/5">
                        <div className="h-full rounded-full bg-emerald-400/60" style={{ width: `${Math.max(4, Math.round((Number(item.views || 0) / viewMax) * 100))}%` }} />
                      </div>
                    </div>
                    <div>
                      <div className="flex items-center justify-between text-xs text-slate-400">
                        <span>Engagement</span>
                        <span>{Number(item.engagement || 0).toLocaleString()}</span>
                      </div>
                      <div className="mt-2 h-2 overflow-hidden rounded-full bg-white/5">
                        <div className="h-full rounded-full bg-pink-400/60" style={{ width: `${Math.max(4, Math.round((Number(item.engagement || 0) / engagementMax) * 100))}%` }} />
                      </div>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </section>

        <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
          <h2 className="text-lg font-semibold text-white">Readable insights</h2>
          <div className="mt-4 space-y-3 text-sm text-slate-400">
            {(insightBlocks || []).map((item) => (
              <a key={item.key} href={item.href} className="block rounded-[22px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
                <div className="flex items-start gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-white/[0.04] text-sky-100">
                    <i className={item.icon} />
                  </div>
                  <div>
                    <h3 className="text-sm font-semibold text-white">{item.title}</h3>
                    <p className="mt-2 leading-6 text-slate-400">{item.body}</p>
                    <span className="mt-3 inline-flex items-center gap-2 text-sm font-medium text-sky-100">{item.cta}<i className="fa-solid fa-arrow-right" /></span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </section>
      </div>

      <div className="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
        <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
          <h2 className="text-lg font-semibold text-white">Top content</h2>
          <div className="mt-5 overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-white/5 text-left text-[11px] uppercase tracking-[0.18em] text-slate-500">
                  <th className="pb-3 pr-4">Module</th>
                  <th className="pb-3 pr-4">Title</th>
                  <th className="pb-3 pr-4 text-right">Views</th>
                  <th className="pb-3 pr-4 text-right">Reactions</th>
                  <th className="pb-3 pr-4 text-right">Comments</th>
                  <th className="pb-3 text-right">Open</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-white/5">
                {(topContent || []).map((item) => (
                  <tr key={item.id}>
                    <td className="py-3 pr-4 text-slate-300">{item.module_label}</td>
                    <td className="py-3 pr-4 text-white">{item.title}</td>
                    <td className="py-3 pr-4 text-right text-slate-300">{Number(item.metrics?.views || 0).toLocaleString()}</td>
                    <td className="py-3 pr-4 text-right text-slate-300">{Number(item.metrics?.appreciation || 0).toLocaleString()}</td>
                    <td className="py-3 pr-4 text-right text-slate-300">{Number(item.metrics?.comments || 0).toLocaleString()}</td>
                    <td className="py-3 text-right"><a href={item.analytics_url || item.view_url} className="text-sky-100">Open</a></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
          <h2 className="text-lg font-semibold text-white">Recent comments</h2>
          <div className="mt-4 space-y-3">
            {(recentComments || []).map((comment) => (
              <article key={comment.id} className="rounded-[22px] border border-white/10 bg-black/20 p-4">
                <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/70">{comment.module_label}</p>
                <p className="mt-2 text-sm text-white">{comment.author_name} on {comment.item_title}</p>
                <p className="mt-2 text-sm leading-6 text-slate-400">{comment.body}</p>
              </article>
            ))}
          </div>
        </section>
      </div>
    </StudioLayout>
  )
}