import React, { useState } from "react";
import { FaExclamationCircle, FaArrowLeft } from "react-icons/fa";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import Header from "./Header";
import Footer from "./Footer";
import { getComplaintById } from "../../shared/services/complaintService";

const FollowCompliant = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [searchButton, setSearchButton] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [searchId, setSearchId] = useState("");
  const [formValues, setFormValues] = useState({
    complaintNumber: "",
    status: "",
    createdAt: "",
    message: "",
  });

  const handleSubmit = async (id: string) => {
    try {
      setLoading(true); // start spinner
      const response = await getComplaintById(id);

      if (response) {
        setFormValues({
          complaintNumber: response.data.complaintNumber || "",
          status: response.data.status || "",
          createdAt: response.data.createdAt || "",
          message: response.data.message || "",
        });
      }
    } catch (error) {
      setError(t("complaint.errorMsg"));
    } finally {
      setLoading(false); // stop spinner
    }
  };

  return (
    <div>
      <Header />
      <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col pt-16 md:pt-20">
        {/* Hero Section */}
        <div className="bg-primary py-16 text-center text-white relative overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
          <h1 className="text-4xl md:text-5xl font-bold mb-4 relative z-10 animate-fade-in">
            {t("complaint.followTitle")}
          </h1>
          <p className="max-w-2xl mx-auto text-lg opacity-90 relative z-10">
            {t("complaint.followSubtitle")}
          </p>
        </div>

        {/* Main Form */}
        <div className="flex-1 flex justify-center p-6">
          <div className="w-full max-w-3xl bg-white shadow-2xl rounded-2xl p-8 relative border border-gray-100">
            {/* Floating circles */}
            <div className="absolute -top-6 -left-6 w-16 h-16 bg-blue-100 rounded-full opacity-30 animate-pulse"></div>

            <h2 className="text-2xl font-semibold text-blue-800 mb-8 text-center">
              {t("complaint.followTitle")}
            </h2>

            {error && (
              <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div className="flex items-center gap-2">
                  <FaExclamationCircle className="text-red-500" />
                  <span className="text-red-700 font-medium">
                    {t("complaint.error")}
                  </span>
                </div>
                <p className="text-red-600 text-sm mt-1">{error}</p>
              </div>
            )}
            <form className="space-y-6 animate-fade-in">
              {/* View Fields */}
              <div className="flex gap-2">
                <label htmlFor="complaintId" className="self-center">
                  {t("complaint.compliantId")}
                </label>
                <input
                  id="complaintId"
                  type="text"
                  value={searchId}
                  onChange={(e) => {
                    const value = e.target.value;
                    setSearchId(value);
                    setSearchButton(value.trim() !== "");
                  }}
                  placeholder={t("complaint.enterComNum")}
                  className="border rounded px-3 py-2 w-full"
                />

                <button
                  type="button"
                  disabled={!searchButton || loading}
                  onClick={() => handleSubmit(searchId)}
                  className={`flex items-center justify-center gap-2 px-4 py-2 rounded transition ${
                    searchButton && !loading
                      ? "bg-primary text-primary-foreground hover:bg-primary/90"
                      : "bg-gray-300 text-gray-500 cursor-not-allowed"
                  }`}
                >
                  {loading ? (
                    <svg
                      className="animate-spin h-5 w-5 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
                      ></path>
                    </svg>
                  ) : (
                    t("userRecord.Search")
                  )}
                </button>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <p className="w-full p-3 border rounded-lg bg-gray-50 text-gray-700">
                  {formValues.complaintNumber || t("complaint.complaintNo")}
                </p>
                <p className="w-full p-3 border rounded-lg bg-gray-50 text-gray-700">
                  {formValues.status || t("userRecord.Status")}
                </p>
                <p className="w-full p-3 border rounded-lg bg-gray-50 text-gray-700">
                  {formValues.createdAt || t("userRecord.createdAt")}
                </p>
              </div>

              {/* Message in full width */}
              <div className="mt-6">
                <p className="w-full min-h-[120px] p-3 border rounded-lg bg-gray-50 text-gray-700 whitespace-pre-line">
                  {formValues.message || t("complaint.message")}
                </p>
              </div>

              {/* Back */}
              <div className="flex justify-end items-center gap-4">
                <button
                  type="button"
                  onClick={() => navigate("/")}
                  className="flex items-center cursor-pointer gap-2 px-5 py-3 bg-gray-300 text-gray-800 rounded-lg shadow hover:bg-gray-400 transition"
                >
                  <FaArrowLeft /> {t("complaint.back")}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default FollowCompliant;
