"use client";

import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
import type { Session } from "@/lib/types";

export function SessionCard({ session }: { session: Session }) {
  const tokens = session.input_tokens + session.output_tokens;
  const title = session.title || "Untitled session";
  const cost = session.estimated_cost_usd;

  return (
    <Link href={`/history/${session.id}`}>
      <div className="flex items-center gap-3 py-3 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
        <div className="flex-1 min-w-0">
          <div className="text-[14px] text-[var(--text-1)] truncate">{title}</div>
          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
            <span className={`badge ${platformBadgeClass(session.source)}`}>
              {session.source}
            </span>
            <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
              {session.message_count} msgs
            </span>
            {session.model && (
              <span className="text-[11px] font-mono" style={{ color: "var(--text-3)" }}>
                {session.model.split("/").pop()?.replace("claude-", "").slice(0, 12)}
              </span>
            )}
            {tokens > 0 && (
              <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
                {formatTokens(tokens)}
              </span>
            )}
            {cost != null && cost > 0 && (
              <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
                ${cost.toFixed(2)}
              </span>
            )}
            <span className="text-[11px] ml-auto" style={{ color: !session.ended_at ? "var(--accent)" : "var(--text-3)" }}>
              {timeAgo(session.started_at, !session.ended_at)}
            </span>
          </div>
        </div>
        <ChevronRight size={16} style={{ color: "var(--text-3)" }} />
      </div>
    </Link>
  );
}