import { useEffect } from "react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { AlertCircle, Building2, Search, UserRound } from "lucide-react";
import { toast } from "sonner";
import { startComplaintFaydaAuth } from "@/shared/utils/faydaOidc";
import { ComplaintPageLayout } from "../components/ComplaintPageLayout";
import { clearComplaintVerification } from "../utils/complaintVerificationStorage";

export default function ComplaintMethodChoicePage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const error = searchParams.get("error");

  useEffect(() => {
    clearComplaintVerification();
  }, []);

  useEffect(() => {
    if (error) {
      toast.error(error);
      setSearchParams({}, { replace: true });
    }
  }, [error, setSearchParams]);

  const authOptions = [
    {
      provider: "fayda" as const,
      title: t("registration.auth.continueWithFayda"),
      description: t("registration.auth.faydaDescription"),
      icon: UserRound,
      onClick: () => startComplaintFaydaAuth(),
    },
    {
      provider: "etrade" as const,
      title: t("registration.auth.continueWithEtrade"),
      description: t("registration.auth.etradeDescription"),
      icon: Building2,
      onClick: () => navigate("/complaints/tin"),
    },
  ];

  return (
    <ComplaintPageLayout
      heroTitle={t("complaint.choice.title")}
      heroSubtitle={t("complaint.choice.subtitle")}>
      <div className="w-full max-w-3xl space-y-8">
        {error && (
          <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
            <AlertCircle className="mt-0.5 h-5 w-5 shrink-0 text-red-500" />
            <p className="text-sm text-red-700">{error}</p>
          </div>
        )}

        <p className="text-center text-sm text-gray-600">
          {t("complaint.choice.prompt")}
        </p>

        <div className="grid gap-6 md:grid-cols-2">
          {authOptions.map((option) => {
            const Icon = option.icon;
            return (
              <button
                key={option.provider}
                type="button"
                onClick={option.onClick}
                className="group rounded-2xl border border-gray-200 bg-white p-6 text-left transition hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary">
                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary transition group-hover:bg-primary group-hover:text-white">
                  <Icon className="h-6 w-6" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900">
                  {option.title}
                </h3>
                <p className="mt-2 text-sm leading-6 text-gray-600">
                  {option.description}
                </p>
              </button>
            );
          })}
        </div>

        <div className="border-t border-gray-100 pt-6 text-center">
          <Link
            to="/follow-complaint"
            className="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline">
            <Search className="h-4 w-4" />
            {t("complaint.followTitle")}
          </Link>
        </div>
      </div>
    </ComplaintPageLayout>
  );
}
