'use client';
import { useEffect, useState, useMemo } from 'react';
import { getRepos, getHeatmap, getRecentCommits, calcStats } from '@/lib/gitea';
import type { GiteaRepo, GiteaCommit, HeatmapEntry } from '@/lib/types';

// ── Calendar constants ──
const CELL = 12, GAP = 3, STEP = CELL + GAP;
const DAY_LABEL_W = 26;
const WEEKS = 52;
// Luminosity levels (white-on-dark glow effect)
const LEVELS = [
  'rgba(255,255,255,0.04)',  // 0
  'rgba(255,255,255,0.13)',  // 1-2
  'rgba(255,255,255,0.28)',  // 3-5
  'rgba(255,255,255,0.50)',  // 6-9
  'rgba(255,255,255,0.80)',  // 10+
];
function getLevel(n: number) {
  if (n === 0) return 0;
  if (n <= 2)  return 1;
  if (n <= 5)  return 2;
  if (n <= 9)  return 3;
  return 4;
}

function timeAgo(s: string) {
  const d = Date.now() - new Date(s).getTime();
  const m = Math.floor(d / 60000);
  if (m < 1) return 'just now';
  if (m < 60) return `${m}m`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h`;
  const days = Math.floor(h / 24);
  if (days < 30) return `${days}d`;
  return `${Math.floor(days / 30)}mo`;
}

// ── Stat card ──
function Stat({ label, value, sub }: { label: string; value: string | number; sub: string }) {
  return (
    <div className="glass rounded-2xl px-5 py-4 flex flex-col gap-1">
      <span className="text-[10px] font-semibold uppercase tracking-[.1em] text-white/25">{label}</span>
      <span className="text-[clamp(1.4rem,3vw,2rem)] font-black text-white tabular-nums leading-none">{value}</span>
      <span className="text-xs text-white/30">{sub}</span>
    </div>
  );
}

// ── Contribution Calendar ──
function ContributionCalendar({ data }: { data: HeatmapEntry[] }) {
  const [tooltip, setTooltip] = useState<{ x: number; y: number; date: string; count: number } | null>(null);

  const dateMap = useMemo(() => {
    const m = new Map<string, number>();
    data.forEach(e => {
      const k = new Date(e.timestamp * 1000).toISOString().split('T')[0];
      m.set(k, (m.get(k) || 0) + e.contributions);
    });
    return m;
  }, [data]);

  // Build 52-week grid starting from Sunday 51 weeks ago
  const { weeks, monthLabels } = useMemo(() => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const startSunday = new Date(today);
    startSunday.setDate(today.getDate() - today.getDay() - 51 * 7);

    const weeks: { date: Date; key: string; count: number }[][] = [];
    const monthLabels: { label: string; x: number }[] = [];
    let lastMonth = -1;
    const cur = new Date(startSunday);

    for (let w = 0; w < WEEKS; w++) {
      const week: { date: Date; key: string; count: number }[] = [];
      for (let d = 0; d < 7; d++) {
        const k = cur.toISOString().split('T')[0];
        week.push({ date: new Date(cur), key: k, count: dateMap.get(k) || 0 });
        cur.setDate(cur.getDate() + 1);
      }
      const mo = week[0].date.getMonth();
      if (mo !== lastMonth) {
        monthLabels.push({
          label: week[0].date.toLocaleDateString('en-US', { month: 'short' }),
          x: w * STEP + DAY_LABEL_W,
        });
        lastMonth = mo;
      }
      weeks.push(week);
    }
    return { weeks, monthLabels };
  }, [dateMap]);

  const svgW = DAY_LABEL_W + WEEKS * STEP;
  const svgH = 7 * STEP + 20;

  return (
    <div className="relative">
      <div className="flex items-center justify-between mb-4">
        <span className="text-[11px] font-semibold uppercase tracking-[.1em] text-white/30">
          Contribution Calendar · last 12 months
        </span>
        <div className="flex items-center gap-1.5 text-[10px] text-white/20">
          <span>Less</span>
          {LEVELS.map((c, i) => (
            <span key={i} className="rounded-sm inline-block w-2.5 h-2.5 flex-shrink-0"
              style={{ background: c, border: '1px solid rgba(255,255,255,0.06)' }} aria-hidden="true" />
          ))}
          <span>More</span>
        </div>
      </div>

      <div className="overflow-x-auto pb-1">
        <svg width={svgW} height={svgH} aria-label="Contribution calendar heatmap" role="img">
          {/* Month labels */}
          {monthLabels.map((m, i) => (
            <text key={i} x={m.x} y={10} fontSize={9} fill="rgba(255,255,255,0.25)"
              fontFamily="var(--font-geist-mono, monospace)">{m.label}</text>
          ))}
          {/* Day labels */}
          {['', 'Mon', '', 'Wed', '', 'Fri', ''].map((d, i) => d ? (
            <text key={i} x={DAY_LABEL_W - 4} y={17 + i * STEP + CELL}
              fontSize={9} fill="rgba(255,255,255,0.2)" textAnchor="end"
              fontFamily="var(--font-geist-mono, monospace)">{d}</text>
          ) : null)}
          {/* Cells */}
          <g transform={`translate(${DAY_LABEL_W}, 14)`}>
            {weeks.map((week, wi) =>
              week.map((day, di) => (
                <rect
                  key={day.key}
                  x={wi * STEP} y={di * STEP}
                  width={CELL} height={CELL} rx={2.5}
                  fill={LEVELS[getLevel(day.count)]}
                  onMouseEnter={e => setTooltip({
                    x: e.clientX, y: e.clientY,
                    date: day.date.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' }),
                    count: day.count,
                  })}
                  onMouseLeave={() => setTooltip(null)}
                  className="transition-opacity duration-100 hover:opacity-70 cursor-default"
                >
                  <title>{`${day.count} contribution${day.count !== 1 ? 's' : ''} on ${day.date.toLocaleDateString()}`}</title>
                </rect>
              ))
            )}
          </g>
        </svg>
      </div>

      {/* Tooltip */}
      {tooltip && (
        <div
          className="fixed z-50 pointer-events-none px-2.5 py-1.5 rounded-lg text-xs font-medium text-white
            bg-[#1a1a1a] border border-white/[0.1] shadow-xl whitespace-nowrap"
          style={{ left: tooltip.x + 12, top: tooltip.y - 36 }}>
          <span className="font-bold">{tooltip.count}</span>
          {' contribution'}{tooltip.count !== 1 ? 's' : ''}
          <span className="text-white/40 ml-1.5">{tooltip.date}</span>
        </div>
      )}
    </div>
  );
}

// ── Monthly bar chart ──
function MonthlyChart({ data }: { data: HeatmapEntry[] }) {
  const months = useMemo(() => {
    return Array.from({ length: 12 }, (_, i) => {
      const d = new Date();
      d.setMonth(d.getMonth() - 11 + i);
      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
      const label = d.toLocaleDateString('en-US', { month: 'short' });
      const count = data
        .filter(e => {
          const ed = new Date(e.timestamp * 1000);
          return `${ed.getFullYear()}-${String(ed.getMonth() + 1).padStart(2, '0')}` === key;
        })
        .reduce((s, e) => s + e.contributions, 0);
      return { label, count };
    });
  }, [data]);

  const maxVal = Math.max(...months.map(m => m.count), 1);
  const barW = 100 / 12;

  return (
    <div>
      <span className="text-[11px] font-semibold uppercase tracking-[.1em] text-white/30 block mb-5">
        Monthly activity
      </span>
      <div className="relative h-24 flex items-end gap-1.5" aria-label="Monthly commit activity bar chart" role="img">
        {months.map((m, i) => {
          const pct = (m.count / maxVal) * 100;
          return (
            <div key={i} className="flex-1 flex flex-col items-center gap-1.5 group">
              <div className="w-full relative" style={{ height: '80px' }}>
                <div
                  className="absolute bottom-0 left-0 right-0 rounded-sm transition-all duration-300 ease-out"
                  style={{
                    height: `${Math.max(pct, 2)}%`,
                    background: `rgba(255,255,255,${0.06 + (pct / 100) * 0.5})`,
                  }}
                  title={`${m.label}: ${m.count} contributions`}
                />
              </div>
              <span className="text-[8px] text-white/20 font-mono">{m.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── Recent commits ──
function RecentCommits({ commits }: { commits: GiteaCommit[] }) {
  if (!commits.length) return (
    <p className="text-sm text-white/20 py-4">No recent commits.</p>
  );
  return (
    <div>
      <span className="text-[11px] font-semibold uppercase tracking-[.1em] text-white/30 block mb-5">
        Recent commits
      </span>
      <ol className="flex flex-col" aria-label="Recent commit list">
        {commits.slice(0, 10).map((c, i) => {
          const sha = (c.sha || '').slice(0, 7);
          const msg = (c.commit?.message || '').split('\n')[0].slice(0, 64);
          const date = c.created || c.commit?.author?.date;
          const isLast = i === Math.min(9, commits.length - 1);
          return (
            <li key={c.sha} className={`commit-line relative flex gap-3 pb-4 ${isLast ? '' : ''}`}>
              <div className="mt-1.5 flex-shrink-0">
                <span className="block w-2 h-2 rounded-full bg-white/20 relative z-10" aria-hidden="true" />
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex items-baseline gap-2 mb-0.5 flex-wrap">
                  <span className="text-[10px] font-semibold uppercase tracking-wider text-white/25">
                    {c._repo}
                  </span>
                  <a
                    href={c._repoUrl ? `${c._repoUrl}/commit/${c.sha}` : '#'}
                    target="_blank" rel="noopener noreferrer"
                    className="font-mono text-[10px] text-white/20 hover:text-white/50 transition-colors px-1 py-0.5
                      rounded bg-white/[0.04] border border-white/[0.06]"
                    aria-label={`View commit ${sha}`}>
                    {sha}
                  </a>
                  <span className="text-[10px] text-white/20 ml-auto">{date ? timeAgo(date) : ''}</span>
                </div>
                <p className="text-sm text-white/60 truncate leading-snug">{msg}</p>
              </div>
            </li>
          );
        })}
      </ol>
    </div>
  );
}

// ── Main section ──
export default function CommitSection() {
  const [repos, setRepos]     = useState<GiteaRepo[]>([]);
  const [heatmap, setHeatmap] = useState<HeatmapEntry[]>([]);
  const [commits, setCommits] = useState<GiteaCommit[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState<string | null>(null);

  useEffect(() => {
    async function load() {
      try {
        const [r, h] = await Promise.all([getRepos(6), getHeatmap()]);
        setRepos(r);
        setHeatmap(h);
        const c = await getRecentCommits(r);
        setCommits(c);
      } catch (e: unknown) {
        const msg = e instanceof Error ? e.message : 'Unknown error';
        setError(msg);
      } finally {
        setLoading(false);
      }
    }
    load();
  }, []);

  const stats = useMemo(() => calcStats(heatmap), [heatmap]);

  return (
    <section id="activity" className="py-24 px-6" aria-labelledby="activity-heading">
      <div className="max-w-5xl mx-auto">
        <span className="label">Gitea · Code activity</span>
        <h2 id="activity-heading"
          className="text-[clamp(1.8rem,4vw,2.5rem)] font-black tracking-tight text-white mb-10">
          Contributions
        </h2>

        {/* Stats row */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
          <Stat label="Contributions" value={loading ? '—' : stats.total.toLocaleString()} sub="this year" />
          <Stat label="Current streak" value={loading ? '—' : `${stats.currentStreak}d`} sub="days" />
          <Stat label="Longest streak" value={loading ? '—' : `${stats.longestStreak}d`} sub="days" />
          <Stat label="Active days"    value={loading ? '—' : stats.activeDays} sub="this year" />
        </div>

        {/* Calendar */}
        <div className="glass rounded-2xl p-5 sm:p-6 mb-4">
          {loading ? (
            <div className="flex flex-col gap-3">
              <div className="skel h-3 w-48" />
              <div className="skel h-[120px] w-full rounded-xl" />
            </div>
          ) : error ? (
            <div className="text-center py-6">
              <p className="text-white/30 text-sm">Could not load heatmap</p>
              <p className="text-white/20 text-xs font-mono mt-1">{error}</p>
            </div>
          ) : (
            <ContributionCalendar data={heatmap} />
          )}
        </div>

        {/* Monthly + commits */}
        <div className="grid lg:grid-cols-[1fr_360px] gap-4">
          <div className="glass rounded-2xl p-5 sm:p-6">
            {loading
              ? <div className="skel h-32 w-full rounded-xl" />
              : <MonthlyChart data={heatmap} />
            }
          </div>
          <div className="glass rounded-2xl p-5 sm:p-6 overflow-hidden">
            {loading
              ? (
                <div className="flex flex-col gap-4">
                  {[...Array(5)].map((_, i) => (
                    <div key={i} className="flex gap-3">
                      <div className="skel w-2 h-2 rounded-full mt-1.5 flex-shrink-0" />
                      <div className="flex-1">
                        <div className="skel h-2.5 w-1/3 mb-1.5" />
                        <div className="skel h-3.5 w-5/6" />
                      </div>
                    </div>
                  ))}
                </div>
              )
              : <RecentCommits commits={commits} />
            }
          </div>
        </div>

        {/* Repo bar chart */}
        {!loading && repos.length > 0 && (
          <div className="glass rounded-2xl p-5 sm:p-6 mt-4">
            <span className="text-[11px] font-semibold uppercase tracking-[.1em] text-white/30 block mb-5">
              Repository breakdown
            </span>
            <div className="flex flex-col gap-2.5">
              {repos.slice(0, 6).map(r => {
                const maxStars = Math.max(...repos.map(x => x.stars_count), 1);
                const pct = (r.stars_count / maxStars) * 100;
                return (
                  <div key={r.id} className="flex items-center gap-3 group">
                    <a href={r.html_url} target="_blank" rel="noopener noreferrer"
                      className="text-xs font-mono text-white/40 hover:text-white/70 transition-colors w-36 truncate shrink-0">
                      {r.name}
                    </a>
                    <div className="flex-1 h-1.5 bg-white/[0.04] rounded-full overflow-hidden">
                      <div className="h-full rounded-full bg-white/25 transition-all duration-500"
                        style={{ width: `${Math.max(pct, 2)}%` }} />
                    </div>
                    <span className="text-[10px] text-white/25 tabular-nums w-6 text-right">{r.stars_count}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}