import Link from "next/link";
import { Activity } from "lucide-react";
import { EmptyState } from "@/components/empty-state";
import { SyncButton } from "@/components/sync-button";
import { formatDateShort, formatDistance, formatDuration, formatPace } from "@/lib/format";
import { listRunningActivities } from "@/lib/models/running";

export const dynamic = "force-dynamic";

export default async function RunningPage() {
  const activities = await listRunningActivities();

  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-fg">Bieganie</h1>
          <p className="mt-1 text-sm text-fg/60">Aktywności zsynchronizowane z Garmin Connect.</p>
        </div>
        <SyncButton />
      </div>

      {activities.length === 0 ? (
        <EmptyState
          icon={<Activity size={32} />}
          title="Brak biegów"
          description="Zsynchronizuj aktywności z Garmin Connect, aby zobaczyć tutaj swoje biegi."
        />
      ) : (
        <ul className="flex flex-col gap-3">
          {activities.map((activity) => (
            <li key={activity._id.toString()}>
              <Link
                href={`/running/${activity._id.toString()}`}
                className="flex items-center justify-between rounded-lg border border-muted/40 bg-surface p-4 transition-colors hover:border-accent/60"
              >
                <div>
                  <div className="font-semibold text-fg">{activity.name}</div>
                  <div className="text-sm text-fg/60">{formatDateShort(activity.startTime)}</div>
                </div>
                <div className="flex flex-col items-end text-sm text-fg/60">
                  <span>{formatDistance(activity.distanceM)}</span>
                  <span>
                    {formatDuration(activity.durationSec)} · {formatPace(activity.avgPaceSecPerKm)}
                  </span>
                </div>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}