'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { TrendingUp } from 'lucide-react';

interface Prediction {
  id: string;
  question: string;
  outcomes: { name: string; probability?: number }[];
  volume?: number;
  endDate?: string | null;
  _stub?: boolean;
}

export default function PredictionPage() {
  const params = useParams();
  const id = params?.id as string;
  const [data, setData] = useState<Prediction | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!id) return;
    const fetchData = async () => {
      try {
        const res = await fetch(`/api/v1/finance/predictions/${id}`);
        if (res.ok) {
          const json = await res.json();
          setData(json);
        }
      } catch {
        setData(null);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [id]);

  if (!id) {
    return (
      <div className="flex flex-col pt-10 pb-28 px-4 max-w-4xl mx-auto">
        <p className="text-black/60 dark:text-white/60">Invalid prediction ID</p>
        <Link href="/finance" className="mt-4 text-[#7C3AED] hover:underline">
          ← Back to Finance
        </Link>
      </div>
    );
  }

  if (loading || !data) {
    return (
      <div className="flex flex-col pt-10 pb-28 px-4 max-w-4xl mx-auto">
        <div className="animate-pulse h-8 bg-light-200 dark:bg-dark-200 rounded w-48 mb-4" />
        <div className="animate-pulse h-4 bg-light-200 dark:bg-dark-200 rounded w-full max-w-md" />
      </div>
    );
  }

  return (
    <div className="flex flex-col pt-10 pb-28 px-4 max-w-4xl mx-auto">
      <div className="flex items-center gap-3 border-b border-light-200/20 dark:border-dark-200/20 pb-6">
        <TrendingUp size={32} className="text-[#7C3AED]" />
        <h1 className="text-3xl font-normal">Prediction Market</h1>
      </div>

      {data._stub ? (
        <div className="mt-6 p-6 rounded-2xl bg-light-secondary dark:bg-dark-secondary">
          <p className="text-black/60 dark:text-white/60">
            Polymarket prediction markets integration coming soon. Use the search to
            explore prediction markets.
          </p>
        </div>
      ) : (
        <div className="mt-6">
          <h2 className="text-xl font-medium">{data.question}</h2>
          {data.outcomes?.length > 0 && (
            <ul className="mt-4 space-y-2">
              {data.outcomes.map((o, i) => (
                <li
                  key={i}
                  className="flex justify-between py-2 px-4 rounded-lg bg-light-secondary dark:bg-dark-secondary"
                >
                  <span>{o.name}</span>
                  {o.probability != null && (
                    <span>{(o.probability * 100).toFixed(0)}%</span>
                  )}
                </li>
              ))}
            </ul>
          )}
        </div>
      )}

      <div className="mt-8">
        <Link href="/finance" className="text-sm text-[#7C3AED] hover:underline">
          ← Back to Finance
        </Link>
      </div>
    </div>
  );
}
