'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { FiClock, FiTarget, FiTrendingUp } from 'react-icons/fi';
import type { DiscoverySummary } from '../types';

export default function DiscoveriesPage() {
  const [discoveries, setDiscoveries] = useState<DiscoverySummary[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/discoveries')
      .then(res => res.json())
      .then(data => {
        setDiscoveries(data.discoveries || []);
        setLoading(false);
      })
      .catch(err => {
        console.error('Failed to load discoveries:', err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-gray-500">Loading discoveries...</div>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">
          <span className="gradient-text">Discovery History</span>
        </h1>
        <p className="text-gray-400">
          Previous technology scouting searches
        </p>
      </div>

      {discoveries.length === 0 ? (
        <div className="bg-[#12121a] rounded-2xl border border-[#1e1e2e] p-12 text-center">
          <FiTarget className="mx-auto text-4xl text-gray-600 mb-4" />
          <p className="text-gray-500 mb-4">No discoveries yet</p>
          <Link
            href="/"
            className="inline-block px-6 py-3 bg-gradient-to-r from-[#00d4ff] to-[#7c3aed] rounded-lg font-semibold hover:opacity-90 transition-opacity"
          >
            Start Your First Search
          </Link>
        </div>
      ) : (
        <div className="space-y-4">
          {discoveries.map(discovery => (
            <Link
              key={discovery.id}
              href={`/discoveries/${discovery.id}`}
              className="block bg-[#12121a] rounded-xl border border-[#1e1e2e] p-6 hover:border-[#00d4ff]/50 transition-all group"
            >
              <div className="flex items-start justify-between mb-3">
                <div className="flex items-center gap-2 text-sm text-gray-500">
                  <FiClock />
                  {new Date(discovery.timestamp).toLocaleString()}
                </div>
                <div className="flex items-center gap-4">
                  <div className="text-right">
                    <div className="text-sm text-gray-500">Candidates</div>
                    <div className="text-lg font-semibold text-[#00d4ff]">
                      {discovery.candidate_count}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-sm text-gray-500">Top Score</div>
                    <div className="text-lg font-semibold text-[#22c55e]">
                      {(discovery.top_score * 100).toFixed(0)}%
                    </div>
                  </div>
                </div>
              </div>

              <h2 className="text-lg font-medium text-white group-hover:text-[#00d4ff] transition-colors">
                {discovery.capability_gap}
              </h2>

              <div className="mt-4 flex items-center gap-2 text-sm text-gray-500 group-hover:text-[#00d4ff] transition-colors">
                <FiTrendingUp />
                View Results
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}