import React, { useEffect, useMemo, useState } from 'react'
import { api, hubTop } from './api.js'
import { BigChart, Stat, fmt, pct } from './components.jsx'

export function Loading({ label }) {
  return (
    <div className="state py-16 text-center text-sm text-[var(--dim)]">
      <span className="mb-3 inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--line)] border-t-[var(--dim)]" style={{ display: 'inline-block' }} />
      <br />{label || 'Loading…'}
    </div>
  )
}

export function ErrBox({ e, retry }) {
  return (
    <div className="mt-10 rounded-xl border border-[var(--danger)]/40 bg-[var(--danger)]/5 p-8 text-center">
      <p className="text-sm text-[var(--ink)]">Could not load data{e ? ' (' + e.message + ')' : ''}. The model-pulse API may be rate-limiting or down.</p>
      {retry && <button onClick={retry} className="mt-3 rounded-lg border border-[var(--line)] px-4 py-2 text-sm font-semibold hover:border-[var(--accent)]">Retry</button>}
    </div>
  )
}

const REL_ORDER = ['quantized', 'finetune', 'adapter', 'merge']
const REL_LABEL = { quantized: 'Quantizations', finetune: 'Fine-tunes', adapter: 'Adapters', merge: 'Merges' }

export function ModelPage({ id, go }) {
  const [data, setData] = useState(null)
  const [err, setErr] = useState(null)
  const load = () => { setErr(null); setData(null); api.model(id).then(setData).catch(setErr) }
  useEffect(load, [id])
  if (err) return <ErrBox e={err} retry={load} />
  if (!data) return <Loading label={'Loading ' + id + '…'} />
  const m = data.model || {}
  const rel = data.series && data.series.day && data.series.day.length > 1
  const groups = {}
  ;(data.children || []).forEach((c) => { (groups[c.relation] = groups[c.relation] || []).push(c) })
  return (
    <div className="rise">
      <div className="flex flex-wrap items-center gap-2 pt-8">
        <h1 className="break-all font-mono text-xl font-bold tracking-tight sm:text-2xl">{id}</h1>
        {m.pipeline_tag && <span className="rounded-full border border-[var(--line)] px-2.5 py-0.5 text-[11px] text-[var(--dim)]">{m.pipeline_tag}</span>}
        {m.is_gguf && <span className="rounded-full bg-[var(--accent)] px-2.5 py-0.5 text-[11px] font-bold text-black">GGUF</span>}
        {m.license && <span className="hidden rounded-full border border-[var(--line)] px-2.5 py-0.5 text-[11px] text-[var(--faint)] sm:inline">{String(m.license).slice(0, 40)}</span>}
      </div>
      <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 font-mono text-[11.5px] text-[var(--faint)]">
        {m.params > 0 && <span>{(m.params / 1e9).toFixed(1)}B params</span>}
        {m.created_at && <span>created {String(m.created_at).slice(0, 10)}</span>}
        {m.first_seen && <span>tracked since {m.first_seen}</span>}
        {m.rank_dl30 != null && <span className="text-[var(--dim)]">rank dl30 <b className="text-[var(--ink)]">#{fmt(m.rank_dl30)}</b></span>}
        {m.rank_7d != null && <span className="text-[var(--dim)]">rank 7d <b className="text-[var(--ink)]">#{fmt(m.rank_7d)}</b></span>}
        <a className="underline decoration-[var(--line)] underline-offset-2 hover:decoration-[var(--dim)]" href={'https://huggingface.co/' + id} target="_blank" rel="noopener">open on the Hub ↗</a>
      </div>

      <div className="mt-6 grid grid-cols-2 divide-[var(--line)] overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--panel)] sm:grid-cols-3 lg:grid-cols-6 lg:divide-x">
        <Stat k="Downloads 30d" v={m.dl30} sub={m.dl_7d != null ? fmt(m.dl_7d) + ' in 7d' : ''} />
        <Stat k="All time" v={m.dl_all} />
        <Stat k="7d vs prev" v={m.dl_7d} d={m.growth_7d != null ? pct(m.growth_7d) + ' vs week before' : ''} dCls={m.growth_7d >= 0 ? 'text-[var(--up)]' : 'text-[var(--danger)]'} />
        <Stat k="Likes" v={m.likes} sub={m.likes_7d ? '+' + fmt(m.likes_7d) + ' in 7d' : ''} />
        {m.fam_members != null && <Stat k="Family" v={m.fam_members} sub={fmt(m.fam_dl30) + ' dl30'} />}
        {m.trending != null && <Stat k="Trending score" v={m.trending} />}
      </div>

      <section className="mt-8 rounded-2xl border border-[var(--line)] bg-[var(--panel)] p-4 sm:p-6">
        <div className="flex gap-5 text-[11.5px] text-[var(--dim)]">
          <span><i className="mr-1.5 inline-block h-2 w-2 rounded-[2px] bg-[var(--bar)]" />downloads / day</span>
          <span><i className="mr-1.5 inline-block h-2 w-2 rounded-[2px] bg-[var(--accent)]" />cumulative</span>
        </div>
        {rel ? <BigChart series={data.series} /> : <p className="py-8 text-center text-sm text-[var(--dim)]">No history yet — too new.</p>}
      </section>

      {(data.children || []).length > 0 && (
        <section className="mt-8">
          <h2 className="border-b border-[var(--ink)] pb-2 text-[13px] font-bold uppercase tracking-[0.08em]">
            Family <span className="font-medium normal-case tracking-normal text-[var(--faint)]">· {(data.children || []).length} derivatives (quantizations, fine-tunes, …)</span>
          </h2>
          {REL_ORDER.filter((r) => groups[r]).concat(Object.keys(groups).filter((r) => !REL_ORDER.includes(r))).map((rel2) => {
            const list = groups[rel2].slice().sort((a, b) => b.dl30 - a.dl30).slice(0, 8)
            const maxdl = Math.max(1, ...groups[rel2].map((c) => c.dl30))
            return (
              <div key={rel2} className="mt-5">
                <h3 className="text-[12px] font-semibold uppercase tracking-[0.06em] text-[var(--dim)]">{REL_LABEL[rel2] || rel2} <span className="text-[var(--faint)]">· {groups[rel2].length}</span></h3>
                <table className="mt-1 w-full">
                  <tbody>
                    {list.map((c) => (
                      <tr key={c.id} onClick={() => go('#/m/' + c.id)} className="cursor-pointer border-b border-[var(--line2)] transition-colors hover:bg-[var(--accent-soft)]/40">
                        <td className="break-all py-2.5 pl-1 pr-3 font-mono text-[12.5px]">{c.id}</td>
                        <td className="w-[130px] px-3 py-2.5"><div className="h-1.5 rounded-full bg-[var(--line2)]"><div className="h-1.5 rounded-full bg-[var(--accent)]" style={{ width: Math.max(3, (c.dl30 / maxdl) * 100) + '%' }} /></div></td>
                        <td className="tnum px-3 py-2.5 text-right text-[12.5px]">{fmt(c.dl30)}</td>
                        <td className="tnum hidden px-3 py-2.5 text-right text-[var(--dim)] sm:table-cell">{fmt(c.dl_all)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                {groups[rel2].length > 8 && <p className="mt-1 text-[11px] text-[var(--faint)]">+ {groups[rel2].length - 8} more</p>}
              </div>
            )
          })}
        </section>
      )}
    </div>
  )
}

export function AuthorPage({ author, go }) {
  const [data, setData] = useState(null)
  const [live, setLive] = useState(null)
  const [err, setErr] = useState(null)
  const load = () => { setErr(null); setData(null); api.author(author).then(setData).catch(setErr); hubTop('downloads', 1000).then((a) => setLive(a.filter((m) => m.id.startsWith(author + '/')))).catch(() => {}) }
  useEffect(load, [author])
  if (err) return <ErrBox e={err} retry={load} />
  if (!data) return <Loading label={'Loading ' + author + '…'} />
  const models = (data.models || []).slice().sort((a, b) => (b.dl30 || 0) - (a.dl30 || 0))
  const totals = data.totals || {}
  return (
    <div className="rise">
      <h1 className="break-all pt-8 text-2xl font-extrabold tracking-tight sm:text-3xl">{author}</h1>
      <div className="mt-6 grid grid-cols-2 divide-[var(--line)] overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--panel)] sm:grid-cols-4 lg:divide-x">
        <Stat k="Models" v={(data.models || []).length} />
        <Stat k="Downloads 30d" v={totals.dl30 != null ? totals.dl30 : models.reduce((a, m) => a + (m.dl30 || 0), 0)} />
        <Stat k="All time" v={totals.dl_all != null ? totals.dl_all : models.reduce((a, m) => a + (m.dl_all || 0), 0)} />
        <Stat k="Likes" v={totals.likes != null ? totals.likes : models.reduce((a, m) => a + (m.likes || 0), 0)} />
      </div>
      <section className="mt-8 rounded-2xl border border-[var(--line)] bg-[var(--panel)] p-4 sm:p-6">
        <h2 className="text-[12px] font-semibold uppercase tracking-[0.06em] text-[var(--dim)]">Author downloads, all models combined</h2>
        {data.series && data.series.day && data.series.day.length > 1 ? <BigChart series={data.series} /> : <p className="py-8 text-center text-sm text-[var(--dim)]">No history yet.</p>}
      </section>
      <section className="mt-8">
        <h2 className="border-b border-[var(--ink)] pb-2 text-[13px] font-bold uppercase tracking-[0.08em]">Models <span className="font-medium normal-case tracking-normal text-[var(--faint)]">· {models.length}</span></h2>
        <table className="mt-1 w-full">
          <thead>
            <tr className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--faint)]">
              <th className="py-2 pl-1 text-left font-semibold">Model</th>
              <th className="px-3 py-2 text-right font-semibold">30d</th>
              <th className="hidden px-3 py-2 text-right font-semibold sm:table-cell">All time</th>
              <th className="px-3 py-2 pr-1 text-right font-semibold">♥</th>
            </tr>
          </thead>
          <tbody>
            {models.map((m) => (
              <tr key={m.id} onClick={() => go('#/m/' + m.id)} className="cursor-pointer border-b border-[var(--line2)] transition-colors hover:bg-[var(--accent-soft)]/40">
                <td className="break-all py-2.5 pl-1 pr-3 font-mono text-[12.5px] font-semibold">{m.id.replace(author + '/', '')}{m.pipeline_tag && <span className="ml-2 hidden font-sans text-[11px] font-normal text-[var(--faint)] md:inline">{m.pipeline_tag}</span>}</td>
                <td className="tnum px-3 py-2.5 text-right font-semibold">{fmt(m.dl30)}</td>
                <td className="tnum hidden px-3 py-2.5 text-right sm:table-cell">{fmt(m.dl_all)}</td>
                <td className="tnum px-3 py-2.5 pr-1 text-right text-[var(--dim)]">♥ {fmt(m.likes)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {live && <p className="mt-2 text-[11px] text-[var(--faint)]">Cross-checked live with the Hub API ({live.length} public repos).</p>}
      </section>
    </div>
  )
}