import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router";

interface Props {
  ticker: string;
}

export default function JobHistory({ ticker }: Props) {
  const [jobs, setJobs] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [selected, setSelected] = useState<any | null>(null);

  const fetchJobs = async () => {
    setLoading(true);
    try {
      const res = await fetch(`/api/jobs?ticker=${encodeURIComponent(ticker)}`);
      if (!res.ok) {
        setJobs([]);
      } else {
        const data = await res.json();
        setJobs(data.jobs || []);
      }
    } catch (e) {
      console.warn("Failed to fetch jobs:", e);
      setJobs([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchJobs();
    const id = setInterval(fetchJobs, 8000);
    return () => clearInterval(id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ticker]);

  const fetchDetails = async (jobId: string) => {
    try {
      const res = await fetch(`/api/jobs/${jobId}`);
      if (!res.ok) {
        setSelected({ id: jobId, error: true });
        return;
      }
      const data = await res.json();
      setSelected(data);
    } catch (e) {
      console.warn("Failed to fetch job details:", e);
      setSelected({ id: jobId, error: true });
    }
  };

  return (
    <div className="mt-4">
      <h3 className="text-sm font-semibold text-gray-800 mb-2">Job History</h3>
      <div className="flex items-center gap-2 mb-2">
        <button onClick={fetchJobs} className="text-sm text-blue-600 hover:underline">Refresh</button>
        <span className="text-xs text-gray-500">{loading ? "Loading..." : `${jobs.length} jobs`}</span>
      </div>
      <div className="space-y-2">
        {jobs.length === 0 ? (
          <p className="text-gray-500">No recent jobs for {ticker}</p>
        ) : (
          jobs.map((j: any) => (
            <div key={j.id} className="p-3 border border-gray-200 rounded bg-gray-50">
              <div className="flex items-center justify-between">
                <div className="text-sm">
                  <div className="font-medium">Job: <span className="text-blue-600">{j.id}</span></div>
                  <div className="text-xs text-gray-600">State: <strong>{j.state}</strong></div>
                </div>
                <div className="flex items-center gap-2">
                  <a href={`/api/jobs/${j.id}`} target="_blank" rel="noreferrer" className="text-sm text-blue-600 hover:underline">API</a>
                  <button
                    onClick={() => navigate(`/jobs/${j.id}`)}
                    className="text-sm text-gray-700 underline"
                  >
                    Details
                  </button>
                </div>
              </div>

              {selected?.id === j.id && (
                <pre className="mt-2 text-xs bg-white p-2 rounded overflow-x-auto">{JSON.stringify(selected, null, 2)}</pre>
              )}
            </div>
          ))
        )}
      </div>
    </div>
  );
}