'use client';

import { getStats } from '@/lib/api';
import { useEffect, useState } from 'react';
import { Brain, FileText, Layers, Tag, Link } from 'lucide-react';

interface Stats {
  total_documents: number;
  total_chunks: number;
  total_relations: number;
  total_tags: number;
  last_indexed: string | null;
  embedding_model: string;
  chat_model: string;
}

export default function HomePage() {
  const [stats, setStats] = useState<Stats | null>(null);

  useEffect(() => {
    getStats().then(setStats).catch(console.error);
  }, []);

  const cards = stats ? [
    { label: 'Documents', value: stats.total_documents, icon: FileText, color: 'text-blue-600' },
    { label: 'Chunks', value: stats.total_chunks, icon: Layers, color: 'text-purple-600' },
    { label: 'Links', value: stats.total_relations, icon: Link, color: 'text-green-600' },
    { label: 'Tags', value: stats.total_tags, icon: Tag, color: 'text-orange-600' },
  ] : [];

  return (
    <div className="max-w-4xl mx-auto">
      <div className="flex items-center gap-3 mb-8">
        <Brain className="text-brain-600" size={36} />
        <div>
          <h1 className="text-3xl font-bold text-slate-900">Second Brain</h1>
          <p className="text-slate-500">Your AI-powered knowledge base</p>
        </div>
      </div>

      {stats && (
        <>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
            {cards.map((card) => (
              <div key={card.label} className="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
                <card.icon className={`${card.color} mb-2`} size={24} />
                <p className="text-2xl font-bold text-slate-900">{card.value.toLocaleString()}</p>
                <p className="text-sm text-slate-500">{card.label}</p>
              </div>
            ))}
          </div>
          <div className="bg-white rounded-xl border border-slate-200 p-5 text-sm text-slate-600">
            <p><span className="font-medium">Embedding model:</span> {stats.embedding_model}</p>
            <p><span className="font-medium">Chat model:</span> {stats.chat_model}</p>
            {stats.last_indexed && (
              <p><span className="font-medium">Last indexed:</span> {new Date(stats.last_indexed).toLocaleString()}</p>
            )}
          </div>
        </>
      )}

      {!stats && (
        <div className="text-slate-400 animate-pulse">Loading stats...</div>
      )}
    </div>
  );
}