import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";

export default function ReviewPage() {
  const navigate = useNavigate();
  const { projectId } = useParams();
  const { t } = useTranslation();

  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">
          {t("Review & Validate")}
        </h1>
        <p className="text-gray-600 mb-6">
          {t("Step 4 of 4: Review extracted entities and relations")}
        </p>

        <div className="grid grid-cols-2 gap-6 mb-6">
          <div className="bg-white rounded-lg shadow p-6">
            <h3 className="font-semibold text-lg mb-2">
              {t("Phase 5 Entity Merges")}
            </h3>
            <p className="text-gray-500">{t("Review merge suggestions")}</p>
          </div>
          <div className="bg-white rounded-lg shadow p-6">
            <h3 className="font-semibold text-lg mb-2">
              {t("Phase 7 Extractions")}
            </h3>
            <p className="text-gray-500">{t("Validate extracted claims")}</p>
          </div>
        </div>

        <div className="flex gap-4">
          <button
            onClick={() => navigate(`/crawl/${projectId}`)}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition"
          >
            {t("Back")}
          </button>
          <button
            onClick={() => navigate("/")}
            className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
          >
            {t("Complete")}
          </button>
        </div>
      </div>
    </div>
  );
}