"use client";

import { FiEdit2, FiEye } from "react-icons/fi";
import Link from "next/link";
import { useModal } from "../../../../../lib/modal-system/ModalContext";
import useFetchSecuritySettings from "../../../../../hooks/features/admin/settings/security/useFetchSecuritySettings";
import CustomLink from "../../../../ui/CustomLink";
import SomethingWentWrong from "../../../../SomethingWentWrong";

interface SecurityItem {
  id: string;
  title: string;
  modalType: "TERMS_AND_CONDITIONS" | "PRIVACY_POLICY";
  viewUrl: string;
}

export default function SecuritySettings() {
  const { openModal } = useModal();
  const {
    securitySettings,
    loading: fetchingSecuritySettings,
    isError,
  } = useFetchSecuritySettings();

  const securityItems: SecurityItem[] = [
    {
      id: "terms",
      title: "Terms and Conditions",
      modalType: "TERMS_AND_CONDITIONS",
      viewUrl: "/terms-and-conditions",
    },
    {
      id: "privacy",
      title: "Privacy Policy",
      modalType: "PRIVACY_POLICY",
      viewUrl: "/privacy-policy",
    },
  ];

  if (fetchingSecuritySettings) {
    return <SecuritySettingsSkeleton />;
  }

  if (isError) {
    return (
      <SomethingWentWrong
        variant="section"
        title="Unable to load security settings"
        description="This settings section failed to load, but other settings remain available."
        onRetry={() => window.location.reload()}
        buttonText=""
      />
    );
  }

  return (
    <div>
      <div className="glass-card-v2 rounded-xl p-4 xl:p-6">
        <div className="mb-5">
          <h2 className="font-body text-base xl:text-lg 2xl:text-xl font-semibold text-table-text">
            Security Settings
          </h2>
        </div>

        <div className="space-y-6 sm:space-y-2.5">
          {securityItems.map((item) => (
            <div
              key={item.id}
              className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
            >
              <h3 className="text-sm xl:text-base 2xl:text-lg font-medium text-table-text">
                {item.title}
              </h3>

              <div className="flex flex-wrap gap-3 2lx:gap-5">
                <button
                  onClick={() =>
                    openModal(item.modalType, {
                      initialContent:
                        item.modalType === "PRIVACY_POLICY"
                          ? (securitySettings?.privacyPolicy ?? "")
                          : (securitySettings?.termsAndConditions ?? ""),
                      fieldKey:
                        item.modalType === "PRIVACY_POLICY"
                          ? "privacyPolicy"
                          : "termsAndConditions",
                    })
                  }
                  className="flex items-center gap-1 2xl:gap-2 rounded-md 2xl:rounded-xl border border-link-1/20 bg-white px-3 py-1.5 2xl:py-3 text-sm 2xl:text-base font-medium text-link transition-all hover:border-link-1 hover:bg-link-1 hover:text-white cursor-pointer
                  "
                >
                  <span className="flex h-4.5 w-4.5 items-center justify-center md:h-6 md:w-6">
                    <FiEdit2 size={16} />
                  </span>
                  Edit
                </button>

                <CustomLink
                  href={item.viewUrl}
                  target="_blank"
                  className="flex items-center gap-1 2xl:gap-2 rounded-md 2xl:rounded-xl border border-link-1/20 bg-white px-3 py-1.5 2xl:py-3 text-sm 2xl:text-base font-medium text-link transition-all hover:border-link-1 hover:bg-link-1 hover:text-white cursor-pointer"
                >
                  <span className="flex h-4.5 w-4.5 items-center justify-center md:h-6 md:w-6">
                    <FiEye size={16} />
                  </span>
                  Show
                </CustomLink>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SecuritySettingsSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="glass-card-v2 rounded-xl p-4 xl:p-6">
        <div className="mb-6 h-7 w-48 rounded bg-gray-200" />
        <div className="space-y-4">
          {[...Array(2)].map((_, index) => (
            <div
              key={index}
              className="flex items-center justify-between rounded-xl border border-gray-100 bg-gray-50 p-4"
            >
              <div className="h-6 w-40 rounded bg-gray-200" />
              <div className="flex gap-3">
                <div className="h-10 w-24 rounded-xl bg-gray-200" />
                <div className="h-10 w-24 rounded-xl bg-gray-200" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
