import { apiFetch } from "@/lib/api";

interface Entry {
  id: string;
  hours: number;
  description: string;
  date: string;
  client: { name: string; hourlyRate: number; currency: string };
}

async function load(): Promise<Entry[]> {
  const res = await apiFetch("/v1/entries");
  if (!res.ok) return [];
  return res.json();
}

export default async function EntriesPage() {
  const entries = await load();
  return (
    <div>
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-1">Entries this month</h1>
        <p className="text-white/50 text-sm">All time logged via Telegram bot.</p>
      </div>
      {entries.length === 0 ? (
        <div className="bg-ink-800/50 border border-white/10 rounded-xl p-10 text-center text-white/50">
          <div className="text-4xl mb-3">⏱</div>
          <p className="mb-1">No entries this month.</p>
          <p className="text-xs">
            Open <a href="https://t.me/timechat_tracker_bot" target="_blank" rel="noreferrer" className="text-accent-400 underline">@timechat_tracker_bot</a> in Telegram and type: <code className="bg-ink-700 px-1 rounded">Acme 2.5h client call</code>
          </p>
        </div>
      ) : (
        <div className="space-y-2">
          {entries.map((e) => (
            <div key={e.id} className="bg-ink-800/50 border border-white/10 rounded-lg p-4 flex items-center gap-4">
              <div className="text-center min-w-[60px]">
                <div className="text-xs text-white/40 uppercase font-mono">{new Date(e.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })}</div>
              </div>
              <div className="flex-1 min-w-0">
                <div className="font-semibold">{e.description}</div>
                <div className="text-xs text-white/40">{e.client.name}</div>
              </div>
              <div className="text-right">
                <div className="font-bold">{e.hours.toFixed(1)}h</div>
                <div className="text-xs text-white/40">${(e.hours * e.client.hourlyRate).toFixed(0)} {e.client.currency}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}