'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;

const LEVELS = [
  'rgba(15,23,42,0.05)',
  'rgba(15,23,42,0.12)',
  'rgba(15,23,42,0.22)',
  'rgba(15,23,42,0.38)',
  'rgba(15,23,42,0.62)',
];

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 item ──
function Stat({
  label,
  value,
  sub,
}: {
  label: string;
  value: string | number;
  sub: string;
}) {
  return (
    <div className="min-w-0">
      <span className="block text-[10px] font-semibold uppercase tracking-[.14em] text-slate-400 mb-1">
        {label}
      </span>
      <span className="block text-[clamp(1.4rem,3vw,2rem)] font-black text-slate-900 tabular-nums leading-none">
        {value}
      </span>
      <span className="block text-xs text-slate-500 mt-1">{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]);

  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 min-w-0">
      <div className="flex items-center justify-between gap-4 mb-4 flex-wrap">
        <span className="text-[11px] font-semibold uppercase tracking-[.14em] text-slate-400">
        </span>
        <div className="flex items-center gap-1.5 text-[10px] text-slate-400">
          <span>Less</span>
          {LEVELS.map((c, i) => (
            <span
              key={i}
              className="rounded-sm inline-block w-2.5 h-2.5 flex-shrink-0 border border-slate-200"
              style={{ background: c }}
              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">
          {monthLabels.map((m, i) => (
            <text
              key={i}
              x={m.x}
              y={10}
              fontSize={9}
              fill="rgba(15,23,42,0.35)"
              fontFamily="var(--font-geist-mono, monospace)"
            >
              {m.label}
            </text>
          ))}

          {['', 'Mon', '', 'Wed', '', 'Fri', ''].map((d, i) =>
            d ? (
              <text
                key={i}
                x={DAY_LABEL_W - 4}
                y={17 + i * STEP + CELL}
                fontSize={9}
                fill="rgba(15,23,42,0.28)"
                textAnchor="end"
                fontFamily="var(--font-geist-mono, monospace)"
              >
                {d}
              </text>
            ) : null
          )}

          <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 && (
        <div
          className="fixed z-50 pointer-events-none px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-900 bg-white/95 border border-slate-200 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-slate-500 ml-1.5">{tooltip.date}</span>
        </div>
      )}
    </div>
  );
}

// ── Monthly 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);

  return (
    <div className="min-w-0">
      <span className="text-[11px] font-semibold uppercase tracking-[.14em] text-slate-400 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 min-w-0">
              <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 bg-slate-900/10"
                  style={{
                    height: `${Math.max(pct, 2)}%`,
                    opacity: 0.18 + (pct / 100) * 0.55,
                  }}
                  title={`${m.label}: ${m.count} contributions`}
                />
              </div>
              <span className="text-[9px] text-slate-400 font-mono">{m.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── Recent commits ──
function RecentCommits({ commits }: { commits: GiteaCommit[] }) {
  if (!commits.length) {
    return <p className="text-sm text-slate-500 py-4">No recent commits.</p>;
  }

  return (
    <div className="min-w-0">
      <span className="text-[11px] font-semibold uppercase tracking-[.14em] text-slate-400 block mb-5">
        Recent commits
      </span>

      <ol className="grid gap-3" aria-label="Recent commit list">
        {commits.slice(0, 10).map((c) => {
          const sha = (c.sha || '').slice(0, 7);
          const msg = (c.commit?.message || '').split('\n')[0].slice(0, 72);
          const date = c.created || c.commit?.author?.date;

          return (
            <li
              key={c.sha}
              className="rounded-2xl border border-slate-200/80 bg-white/55 px-4 py-3 min-w-0"
            >
              <div className="flex items-start gap-3 min-w-0">
                <span className="mt-1.5 block w-2 h-2 rounded-full bg-slate-300 flex-shrink-0" aria-hidden="true" />
                <div className="min-w-0 flex-1">
                  <div className="flex items-baseline gap-2 mb-1 flex-wrap min-w-0">
                    <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400">
                      {c._repo}
                    </span>
                    <a
                      href={c._repoUrl ? `${c._repoUrl}/commit/${c.sha}` : '#'}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="font-mono text-[10px] text-slate-500 hover:text-slate-900 transition-colors px-1.5 py-0.5 rounded-md bg-slate-100 border border-slate-200"
                      aria-label={`View commit ${sha}`}
                    >
                      {sha}
                    </a>
                    <span className="text-[10px] text-slate-400 ml-auto">
                      {date ? timeAgo(date) : ''}
                    </span>
                  </div>
                  <p className="text-sm text-slate-700 truncate leading-snug">{msg}</p>
                </div>
              </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 min-w-0">
        <h2
          id="activity-heading"
          className="text-[clamp(1.8rem,4vw,2.5rem)] font-black tracking-tight text-slate-900 mb-8"
        >
        </h2>

        <div className="relative glass rounded-[28px] p-5 sm:p-7 md:p-8 overflow-visible">
          <div className="relative grid gap-8 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
            {/* Left side */}
            <div className="min-w-0 grid gap-6">
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 border-b border-slate-200/80 pb-6 min-w-0">
                <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>

              <div className="min-w-0">
                {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="py-6">
                    <p className="text-slate-500 text-sm">Could not load heatmap</p>
                    <p className="text-slate-400 text-xs font-mono mt-1">{error}</p>
                  </div>
                ) : (
                  <ContributionCalendar data={heatmap} />
                )}
              </div>
            </div>

            {/* Right side */}
            <div className="min-w-0 grid gap-6 lg:border-l lg:border-slate-200/80 lg:pl-8">
              <div className="min-w-0">
                {loading ? (
                  <div className="skel h-32 w-full rounded-xl" />
                ) : (
                  <MonthlyChart data={heatmap} />
                )}
              </div>

              <div className="min-w-0">
                {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 min-w-0">
                          <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>

              {!!repos.length && (
                <div className="pt-2 border-t border-slate-200/80 min-w-0">
                  <span className="text-[11px] font-semibold uppercase tracking-[.14em] text-slate-400 block mb-4">
                    Projects
                  </span>
                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5 min-w-0">
                    {repos.slice(0, 6).map((repo) => (
                      <a
                        key={repo.id ?? repo.name}
                        href={repo.html_url || repo.website || '#'}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="rounded-2xl border border-slate-200/80 bg-white/50 px-3 py-3 text-sm text-slate-700 hover:text-slate-900 hover:border-slate-300 transition-colors min-w-0"
                      >
                        <span className="block truncate font-medium">{repo.name}</span>
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}