import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { CheckCircle, Search } from "lucide-react";
import { Button } from "@/shared/common/ui/button";
import { ComplaintPageLayout } from "../components/ComplaintPageLayout";
import { clearComplaintVerification } from "../utils/complaintVerificationStorage";

export default function ComplaintSuccessPage() {
  const { t } = useTranslation();

  const handleDone = () => {
    clearComplaintVerification();
  };

  return (
    <ComplaintPageLayout
      heroTitle={t("complaint.success")}
      heroSubtitle={t("complaint.fayda.successSubtitle")}>
      <div className="w-full max-w-lg bg-white shadow-2xl rounded-2xl p-8 border border-gray-100 text-center">
        <CheckCircle className="mx-auto mb-4 h-16 w-16 text-primary" />
        <h2 className="mb-2 text-xl font-semibold text-gray-900">
          {t("complaint.fayda.successMessage")}
        </h2>
        <p className="mb-6 text-gray-600">
          {t("complaint.fayda.successNote")}
        </p>

        <div className="flex flex-col gap-3">
          <Button asChild onClick={handleDone}>
            <Link to="/">{t("complaint.fayda.backToHome")}</Link>
          </Button>
          <Button asChild variant="outline" onClick={handleDone}>
            <Link
              to="/follow-complaint"
              className="inline-flex items-center gap-2">
              <Search className="h-4 w-4" />
              {t("complaint.followTitle")}
            </Link>
          </Button>
        </div>
      </div>
    </ComplaintPageLayout>
  );
}
