import { CheckCircle2, XCircle } from "lucide-react";
import { SyncButton } from "@/components/sync-button";
import { formatDate } from "@/lib/format";
import { getLastSyncAt } from "@/lib/models/running";

export const dynamic = "force-dynamic";

function ConfigRow({ label, configured }: { label: string; configured: boolean }) {
  return (
    <div className="flex items-center justify-between rounded-lg border border-muted/40 bg-surface p-4">
      <span className="text-fg">{label}</span>
      {configured ? (
        <span className="flex items-center gap-1.5 text-sm text-fg/70">
          <CheckCircle2 size={16} className="text-accent" />
          Skonfigurowano
        </span>
      ) : (
        <span className="flex items-center gap-1.5 text-sm text-fg/50">
          <XCircle size={16} />
          Brak w .env.local
        </span>
      )}
    </div>
  );
}

export default async function SettingsPage() {
  const lastSyncAt = await getLastSyncAt();

  const mongoConfigured = Boolean(process.env.MONGODB_URI);
  const garminConfigured = Boolean(process.env.GARMIN_EMAIL && process.env.GARMIN_PASSWORD);
  const claudeConfigured = Boolean(process.env.ANTHROPIC_API_KEY);

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-bold text-fg">Ustawienia</h1>
        <p className="mt-1 text-sm text-fg/60">Status konfiguracji i synchronizacja Garmin.</p>
      </div>

      <section className="flex flex-col gap-3">
        <h2 className="text-lg font-semibold text-fg">Konfiguracja</h2>
        <ConfigRow label="MongoDB" configured={mongoConfigured} />
        <ConfigRow label="Garmin Connect" configured={garminConfigured} />
        <ConfigRow label="Claude API" configured={claudeConfigured} />
      </section>

      <section className="flex flex-col gap-3">
        <h2 className="text-lg font-semibold text-fg">Synchronizacja z Garmin</h2>
        <div className="flex items-center justify-between rounded-lg border border-muted/40 bg-surface p-4">
          <span className="text-sm text-fg/70">
            {lastSyncAt ? `Ostatnia synchronizacja: ${formatDate(lastSyncAt)}` : "Jeszcze nie zsynchronizowano"}
          </span>
          <SyncButton />
        </div>
      </section>
    </div>
  );
}