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

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

const summaryCards = [
  ['followers', 'Followers', 'fa-user-group'],
  ['published_in_range', 'Published', 'fa-calendar-check'],
  ['engagement_actions', 'Engagement actions', 'fa-bolt'],
  ['profile_completion', 'Profile completion', 'fa-id-card'],
  ['challenge_entries', 'Challenge entries', 'fa-trophy'],
  ['featured_modules', 'Featured modules', 'fa-star'],
]

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

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

  return (
    <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
      <h2 className="text-lg font-semibold text-white">{title}</h2>
      <p className="mt-1 text-sm text-slate-400">{subtitle}</p>
      <div className="mt-5 flex h-52 items-end gap-2">
        {(points || []).map((point) => {
          const value = Number(point.value || point.count || 0)
          const height = `${Math.max(8, Math.round((value / 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">{value.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] ${colorClass}`} style={{ height }} />
              </div>
              <div className="text-[10px] uppercase tracking-[0.14em] text-slate-500">{formatShortDate(point.date)}</div>
            </div>
          )
        })}
      </div>
    </section>
  )
}

export default function StudioGrowth() {
  const { props } = usePage()
  const { summary, moduleFocus, checkpoints, opportunities, milestones, momentum, topContent, rangeDays } = props

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

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

  return (
    <StudioLayout title={props.title} subtitle={props.description}>
      <section className="mb-6 rounded-[28px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.12),_transparent_34%),radial-gradient(circle_at_bottom_right,_rgba(56,189,248,0.12),_transparent_40%),linear-gradient(135deg,_rgba(15,23,42,0.88),_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">Growth window</p>
            <h2 className="mt-2 text-2xl font-semibold text-white">Creator growth over the last {rangeDays || 30} days</h2>
            <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-400">This view blends audience momentum, profile readiness, featured curation, and challenge participation into one operating surface.</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">
        {summaryCards.map(([key, label, icon]) => (
          <div key={key} className="rounded-[26px] border border-white/10 bg-white/[0.03] p-5">
            <div className="flex items-center justify-between gap-3">
              <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</span>
              <i className={`fa-solid ${icon} text-sky-200`} />
            </div>
            <div className="mt-3 text-3xl font-semibold text-white">{Number(summary?.[key] || 0).toLocaleString()}</div>
          </div>
        ))}
      </div>

      <div className="mt-6 grid gap-6 xl:grid-cols-2">
        <TrendBars title="Views momentum" subtitle="Cross-module reach across the current growth window." points={momentum?.views_trend || []} colorClass="bg-emerald-400/60" />
        <TrendBars title="Engagement momentum" subtitle="Reactions, comments, shares, and saves translated into a cleaner direction-of-travel signal." points={momentum?.engagement_trend || []} colorClass="bg-pink-400/60" />
      </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">Growth checkpoints</h2>
          <div className="mt-5 space-y-3">
            {(checkpoints || []).map((item) => (
              <div key={item.key} className="rounded-[22px] border border-white/10 bg-black/20 p-4">
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <div className="text-sm font-semibold text-white">{item.label}</div>
                    <p className="mt-2 text-sm leading-6 text-slate-400">{item.detail}</p>
                  </div>
                  <div className="text-right">
                    <div className="text-2xl font-semibold text-white">{item.score}</div>
                    <div className="text-[10px] uppercase tracking-[0.16em] text-slate-500">{item.status.replace('_', ' ')}</div>
                  </div>
                </div>
                <div className="mt-4 h-2 overflow-hidden rounded-full bg-white/5">
                  <div className={`h-full rounded-full ${item.score >= 80 ? 'bg-emerald-400/70' : item.score >= 55 ? 'bg-amber-400/70' : 'bg-rose-400/70'}`} style={{ width: `${Math.max(6, item.score)}%` }} />
                </div>
                <a
                  href={item.href}
                  onClick={() => trackStudioEvent('studio_insight_clicked', {
                    surface: studioSurface(),
                    module: 'growth',
                    meta: {
                      insight_key: item.key,
                      href: item.href,
                    },
                  })}
                  className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-sky-100"
                >
                  {item.cta}
                  <i className="fa-solid fa-arrow-right" />
                </a>
              </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">Growth opportunities</h2>
          <div className="mt-4 space-y-3">
            {(opportunities || []).map((item) => (
              <a
                key={item.title}
                href={item.href}
                onClick={() => trackStudioEvent('studio_insight_clicked', {
                  surface: studioSurface(),
                  module: 'growth',
                  meta: {
                    insight_key: item.title,
                    href: item.href,
                  },
                })}
                className="block rounded-[22px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20"
              >
                <h3 className="text-sm font-semibold text-white">{item.title}</h3>
                <p className="mt-2 text-sm 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>
              </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">
          <div className="flex items-center justify-between gap-4">
            <h2 className="text-lg font-semibold text-white">Module focus</h2>
            <span className="text-xs uppercase tracking-[0.18em] text-slate-500">Share of workspace output</span>
          </div>
          <div className="mt-5 space-y-3">
            {(moduleFocus || []).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-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">{item.published_count} published • {item.draft_count} drafts</div>
                    </div>
                  </div>
                  <span className="text-xs font-semibold uppercase tracking-[0.16em] text-sky-100">Open</span>
                </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>{item.views.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, item.view_share)}%` }} /></div>
                  </div>
                  <div>
                    <div className="flex items-center justify-between text-xs text-slate-400"><span>Engagement</span><span>{item.engagement.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, item.engagement_share)}%` }} /></div>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </section>

        <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
          <h2 className="text-lg font-semibold text-white">Milestones</h2>
          <div className="mt-4 space-y-3">
            {(milestones || []).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-3">
                  <div>
                    <div className="text-sm font-semibold text-white">{item.label}</div>
                    <div className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-500">{item.current.toLocaleString()} of {item.target.toLocaleString()}</div>
                  </div>
                  <div className="text-xl font-semibold text-white">{item.progress}%</div>
                </div>
                <div className="mt-4 h-2 overflow-hidden rounded-full bg-white/5">
                  <div className="h-full rounded-full bg-sky-300/60" style={{ width: `${Math.max(6, item.progress)}%` }} />
                </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">
          <h2 className="text-lg font-semibold text-white">Publishing rhythm</h2>
          <div className="mt-5 space-y-3">
            {(momentum?.publishing_timeline || []).map((point) => (
              <div key={point.date}>
                <div className="mb-1 flex items-center justify-between text-xs text-slate-400">
                  <span>{formatShortDate(point.date)}</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, Number(point.count || 0) * 18)}%` }} />
                </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">Top content this window</h2>
          <div className="mt-4 space-y-3">
            {(topContent || []).map((item) => (
              <a
                key={item.id}
                href={item.analytics_url || item.view_url}
                onClick={() => trackStudioEvent('studio_insight_clicked', {
                  surface: studioSurface(),
                  module: 'growth',
                  item_module: item.module_key,
                  item_id: item.numeric_id,
                  meta: {
                    insight_key: 'top_content',
                    href: item.analytics_url || item.view_url,
                  },
                })}
                className="block rounded-[22px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20"
              >
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.module_label}</div>
                <div className="mt-2 text-sm font-semibold text-white">{item.title}</div>
                <div className="mt-3 grid grid-cols-3 gap-3 text-xs text-slate-400">
                  <div><div>Views</div><div className="mt-1 text-sm font-semibold text-white">{Number(item.metrics?.views || 0).toLocaleString()}</div></div>
                  <div><div>Reactions</div><div className="mt-1 text-sm font-semibold text-white">{Number(item.metrics?.appreciation || 0).toLocaleString()}</div></div>
                  <div><div>Comments</div><div className="mt-1 text-sm font-semibold text-white">{Number(item.metrics?.comments || 0).toLocaleString()}</div></div>
                </div>
              </a>
            ))}
          </div>
        </section>
      </div>
    </StudioLayout>
  )
}