"use client";

import { Suspense, useEffect, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";

type ContactInfo = {
  id: number;
  description: string | null;
  email: string | null;
  phone: string | null;
  location: string | null;
  website: string | null;
  github: string | null;
  linkedin: string | null;
  facebook: string | null;
  instagram: string | null;
  twitter: string | null;
  youtube: string | null;
  tiktok: string | null;
  active: boolean;
  createdAt: string;
  updatedAt: string;
};

function ContactInfoEditPage() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const id = searchParams.get("id");

  const [data, setData] = useState<ContactInfo | null>(null);

  const [description, setDescription] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [location, setLocation] = useState("");
  const [website, setWebsite] = useState("");

  const [github, setGithub] = useState("");
  const [linkedin, setLinkedin] = useState("");
  const [facebook, setFacebook] = useState("");
  const [instagram, setInstagram] = useState("");
  const [twitter, setTwitter] = useState("");
  const [youtube, setYoutube] = useState("");
  const [tiktok, setTiktok] = useState("");

  const [active, setActive] = useState(true);

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    if (!id) {
      setError("ID Contact Information tidak ditemukan.");
      setLoading(false);
      return;
    }

    const loadContact = async () => {
      try {
        setLoading(true);
        setError("");

        const response = await fetch(
          `/api/contact-info?id=${encodeURIComponent(id)}`,
          {
            method: "GET",
            cache: "no-store",
          }
        );

        const result = await response.json();

        if (!response.ok) {
          throw new Error(
            result.message ||
              "Gagal mengambil Contact Information."
          );
        }

        if (!result.data) {
          throw new Error(
            "Contact Information tidak ditemukan."
          );
        }

        const contact = result.data as ContactInfo;

        setData(contact);

        setDescription(contact.description ?? "");
        setEmail(contact.email ?? "");
        setPhone(contact.phone ?? "");
        setLocation(contact.location ?? "");
        setWebsite(contact.website ?? "");

        setGithub(contact.github ?? "");
        setLinkedin(contact.linkedin ?? "");
        setFacebook(contact.facebook ?? "");
        setInstagram(contact.instagram ?? "");
        setTwitter(contact.twitter ?? "");
        setYoutube(contact.youtube ?? "");
        setTiktok(contact.tiktok ?? "");

        setActive(contact.active ?? true);
      } catch (err) {
        setError(
          err instanceof Error
            ? err.message
            : "Gagal mengambil data."
        );
      } finally {
        setLoading(false);
      }
    };

    loadContact();
  }, [id]);

  const handleSubmit = async (
    e: React.FormEvent<HTMLFormElement>
  ) => {
    e.preventDefault();

    if (!data) return;

    try {
      setSaving(true);
      setError("");

      const response = await fetch("/api/contact-info", {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          id: data.id,

          description: description.trim(),
          email: email.trim(),
          phone: phone.trim(),
          location: location.trim(),
          website: website.trim(),

          github: github.trim(),
          linkedin: linkedin.trim(),
          facebook: facebook.trim(),
          instagram: instagram.trim(),
          twitter: twitter.trim(),
          youtube: youtube.trim(),
          tiktok: tiktok.trim(),

          active,
        }),
      });

      const result = await response.json();

      if (!response.ok) {
        throw new Error(
          result.message ||
            "Gagal memperbarui Contact Information."
        );
      }

      router.push("/secure-panel/contact-info/list");
      router.refresh();
    } catch (err) {
      setError(
        err instanceof Error
          ? err.message
          : "Gagal memperbarui data."
      );

      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!data) return;

    const confirmed = window.confirm(
      "Yakin ingin menghapus Contact Information ini?"
    );

    if (!confirmed) return;

    try {
      setSaving(true);
      setError("");

      const response = await fetch(
        `/api/contact-info?id=${data.id}`,
        {
          method: "DELETE",
        }
      );

      const result = await response.json();

      if (!response.ok) {
        throw new Error(
          result.message ||
            "Gagal menghapus Contact Information."
        );
      }

      router.push("/secure-panel/contact-info/list");
      router.refresh();
    } catch (err) {
      setError(
        err instanceof Error
          ? err.message
          : "Gagal menghapus data."
      );

      setSaving(false);
    }
  };

  if (loading) {
    return (
      <>
        <style>{`
          * {
            box-sizing: border-box;
          }

          .admin-layout {
            min-height: 100vh;
            background: #f5f7f9;
            color: #1f2937;
          }

          .admin-loading {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
          }

          .loading-box {
            text-align: center;
          }

          .loading-spinner {
            width: 42px;
            height: 42px;
            border: 3px solid #dcefe4;
            border-top-color: #198754;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 15px;
          }

          .loading-box h5 {
            font-size: 15px;
            font-weight: 700;
            color: #344054;
            margin-bottom: 5px;
          }

          .loading-box p {
            color: #98a2b3;
            font-size: 12px;
            margin: 0;
          }

          @keyframes spin {
            to {
              transform: rotate(360deg);
            }
          }
        `}</style>

        <div className="admin-layout">
          <main className="admin-loading">
            <div className="loading-box">
              <div className="loading-spinner"></div>

              <h5>Memuat Contact Information</h5>

              <p>
                Sedang mengambil informasi dari database...
              </p>
            </div>
          </main>
        </div>
      </>
    );
  }

  if (!data) {
    return (
      <>
        <style>{`
          * {
            box-sizing: border-box;
          }

          .admin-layout {
            min-height: 100vh;
            background: #f5f7f9;
            color: #1f2937;
          }

          .error-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 20px;
          }

          .error-card {
            width: 100%;
            max-width: 600px;
            background: #ffffff;
            border: 1px solid #eaecf0;
            border-radius: 16px;
            padding: 35px;
            text-align: center;
            box-shadow: 0 3px 12px rgba(16, 24, 40, 0.035);
          }

          .error-icon {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            background: #fff5f5;
            color: #dc3545;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 18px;
            font-size: 26px;
          }

          .error-card h4 {
            font-size: 18px;
            font-weight: 750;
            color: #101828;
            margin-bottom: 8px;
          }

          .error-card p {
            color: #667085;
            font-size: 13px;
            line-height: 1.7;
            text-align: justify;
            margin-bottom: 22px;
          }

          .error-button {
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 9px 16px;
            border-radius: 9px;
            border: 0;
            background: #198754;
            color: #ffffff;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
          }

          .error-button:hover {
            background: #157347;
          }
        `}</style>

        <div className="admin-layout">
          <main className="error-page">
            <div className="error-card">
              <div className="error-icon">
                <i className="bi bi-exclamation-triangle"></i>
              </div>

              <h4>Contact Information Tidak Ditemukan</h4>

              <p>
                {error ||
                  "Contact Information yang Anda cari tidak tersedia atau telah dihapus."}
              </p>

              <button
                type="button"
                className="error-button"
                onClick={() =>
                  router.push(
                    "/secure-panel/contact-info/list"
                  )
                }
              >
                <i className="bi bi-arrow-left"></i>
                Kembali ke List
              </button>
            </div>
          </main>
        </div>
      </>
    );
  }

  return (
    <>
      <style>{`
        * {
          box-sizing: border-box;
        }

        .admin-layout {
          min-height: 100vh;
          background: #f5f7f9;
          color: #1f2937;
        }

        /* =========================
           SIDEBAR
        ========================= */

        .admin-sidebar {
          position: fixed;
          top: 0;
          left: 0;
          width: 260px;
          height: 100vh;
          background: #ffffff;
          border-right: 1px solid #e9ecef;
          z-index: 1050;
          transition: transform 0.3s ease;
          overflow-y: auto;
        }

        .sidebar-inner {
          min-height: 100%;
          display: flex;
          flex-direction: column;
          padding: 22px 16px;
        }

        .sidebar-brand {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 4px 8px 24px;
          border-bottom: 1px solid #eef0f2;
        }

        .brand-icon {
          width: 42px;
          height: 42px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #198754;
          color: #ffffff;
          font-size: 19px;
          box-shadow: 0 8px 20px rgba(25, 135, 84, 0.18);
          flex-shrink: 0;
        }

        .brand-text {
          min-width: 0;
          line-height: 1.15;
        }

        .brand-text strong {
          display: block;
          font-size: 15px;
          font-weight: 700;
          color: #17202a;
        }

        .brand-text span {
          display: block;
          margin-top: 4px;
          font-size: 11px;
          color: #8a94a6;
          letter-spacing: 0.4px;
        }

        .sidebar-close {
          margin-left: auto;
          border: 0;
          background: transparent;
          color: #6c757d;
          font-size: 18px;
        }

        .sidebar-section-label {
          padding: 20px 10px 8px;
          font-size: 10px;
          font-weight: 700;
          color: #a0a8b3;
          letter-spacing: 1.1px;
        }

        .sidebar-nav {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .sidebar-link {
          display: flex;
          align-items: center;
          gap: 12px;
          min-height: 44px;
          padding: 9px 12px;
          border-radius: 10px;
          color: #667085;
          text-decoration: none;
          font-size: 13px;
          font-weight: 500;
          transition:
            background 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
        }

        .sidebar-link:hover {
          background: #f0f9f4;
          color: #198754;
          transform: translateX(2px);
        }

        .sidebar-link.active {
          background: #e9f7ef;
          color: #198754;
          font-weight: 600;
        }

        .sidebar-link-icon {
          width: 20px;
          display: flex;
          justify-content: center;
          font-size: 16px;
          flex-shrink: 0;
        }

        .sidebar-bottom {
          margin-top: auto;
          padding-top: 20px;
          border-top: 1px solid #eef0f2;
        }

        .sidebar-website {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 11px 12px;
          border-radius: 10px;
          color: #667085;
          text-decoration: none;
          font-size: 13px;
          transition: all 0.2s ease;
        }

        .sidebar-website:hover {
          background: #f5f7f9;
          color: #198754;
        }

        /* =========================
           MAIN
        ========================= */

        .admin-main {
          margin-left: 260px;
          min-height: 100vh;
          width: calc(100% - 260px);
        }

        /* =========================
           TOPBAR
        ========================= */

        .admin-topbar {
          height: 76px;
          background: rgba(255, 255, 255, 0.96);
          border-bottom: 1px solid #e9ecef;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 32px;
          position: sticky;
          top: 0;
          z-index: 1000;
          backdrop-filter: blur(12px);
        }

        .topbar-left,
        .topbar-right {
          display: flex;
          align-items: center;
        }

        .topbar-left {
          gap: 14px;
        }

        .topbar-right {
          gap: 10px;
        }

        .mobile-menu-button {
          width: 40px;
          height: 40px;
          border: 1px solid #e5e7eb;
          background: #ffffff;
          color: #475467;
          border-radius: 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          cursor: pointer;
        }

        .mobile-menu-button:hover {
          background: #f5f7f9;
          color: #198754;
          border-color: #cfe8d9;
        }

        .topbar-label {
          font-size: 10px;
          font-weight: 700;
          color: #98a2b3;
          letter-spacing: 1px;
          margin-bottom: 2px;
        }

        .topbar-title {
          font-size: 15px;
          font-weight: 700;
          color: #1d2939;
        }

        .topbar-website,
        .topbar-logout {
          min-height: 40px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 8px 13px;
          border-radius: 9px;
          text-decoration: none;
          font-size: 13px;
          font-weight: 600;
          transition: all 0.2s ease;
          white-space: nowrap;
        }

        .topbar-website {
          color: #475467;
          border: 1px solid #e4e7ec;
          background: #ffffff;
        }

        .topbar-website:hover {
          color: #198754;
          border-color: #b7dfc9;
          background: #f4fbf7;
        }

        .topbar-logout {
          color: #dc3545;
          background: #fff5f5;
          border: 1px solid #ffd6d9;
        }

        .topbar-logout:hover {
          background: #dc3545;
          border-color: #dc3545;
          color: #ffffff;
        }

        /* =========================
           CONTENT
        ========================= */

        .admin-content {
          padding: 32px;
          max-width: 1600px;
          margin: 0 auto;
        }

        .page-heading {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: 25px;
          margin-bottom: 28px;
        }

        .page-heading-left {
          min-width: 0;
        }

        .back-dashboard {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          color: #667085;
          text-decoration: none;
          font-size: 12px;
          font-weight: 600;
          margin-bottom: 17px;
          transition: color 0.2s ease;
        }

        .back-dashboard:hover {
          color: #198754;
        }

        .page-title-row {
          display: flex;
          align-items: center;
          gap: 14px;
        }

        .page-title-icon {
          width: 48px;
          height: 48px;
          border-radius: 13px;
          background: #e9f7ef;
          color: #198754;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 21px;
          flex-shrink: 0;
        }

        .page-eyebrow {
          color: #198754;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 1.2px;
          margin-bottom: 4px;
        }

        .page-title {
          margin: 0;
          font-size: clamp(24px, 3vw, 32px);
          line-height: 1.15;
          font-weight: 750;
          color: #101828;
        }

        .page-description {
          margin: 7px 0 0;
          color: #667085;
          font-size: 13px;
          line-height: 1.7;
          max-width: 680px;
          text-align: justify;
        }

        .page-heading-action {
          flex-shrink: 0;
        }

        .back-button {
          min-height: 44px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 10px 17px;
          border-radius: 10px;
          color: #667085;
          border: 1px solid #e4e7ec;
          background: #ffffff;
          text-decoration: none;
          font-size: 13px;
          font-weight: 600;
          transition: all 0.2s ease;
        }

        .back-button:hover {
          color: #198754;
          border-color: #b7dfc9;
          background: #f4fbf7;
        }

        /* =========================
           ALERT
        ========================= */

        .error-alert {
          display: flex;
          align-items: flex-start;
          gap: 11px;
          padding: 13px 15px;
          margin-bottom: 22px;
          border: 1px solid #ffd6d9;
          border-radius: 11px;
          background: #fff5f5;
          color: #b42318;
          font-size: 12px;
          line-height: 1.6;
        }

        .error-alert i {
          font-size: 16px;
          margin-top: 1px;
          flex-shrink: 0;
        }

        /* =========================
           FORM CARD
        ========================= */

        .form-card {
          background: #ffffff;
          border: 1px solid #eaecf0;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 3px 12px rgba(16, 24, 40, 0.035);
          margin-bottom: 22px;
        }

        .form-card-header {
          padding: 21px 24px;
          border-bottom: 1px solid #eaecf0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
        }

        .form-card-header-content {
          min-width: 0;
        }

        .form-card-eyebrow {
          font-size: 10px;
          font-weight: 700;
          color: #198754;
          letter-spacing: 1px;
          margin-bottom: 4px;
        }

        .form-card-title {
          font-size: 17px;
          font-weight: 750;
          color: #101828;
          margin: 0;
        }

        .form-card-description {
          margin: 5px 0 0;
          color: #667085;
          font-size: 12px;
          line-height: 1.65;
          text-align: justify;
          max-width: 760px;
        }

        .form-card-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #e9f7ef;
          color: #198754;
          font-size: 17px;
          flex-shrink: 0;
        }

        .form-card-body {
          padding: 24px;
        }

        /* =========================
           FORM
        ========================= */

        .field-group {
          margin-bottom: 20px;
        }

        .field-group:last-child {
          margin-bottom: 0;
        }

        .form-label-custom {
          display: block;
          color: #344054;
          font-size: 12px;
          font-weight: 700;
          margin-bottom: 8px;
        }

        .form-label-custom i {
          color: #198754;
          margin-right: 7px;
        }

        .form-control-custom {
          display: block;
          width: 100%;
          min-height: 43px;
          padding: 10px 12px;
          border: 1px solid #d0d5dd;
          border-radius: 9px;
          background: #ffffff;
          color: #344054;
          font-size: 13px;
          line-height: 1.5;
          outline: none;
          transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
        }

        .form-control-custom::placeholder {
          color: #98a2b3;
        }

        .form-control-custom:focus {
          border-color: #198754;
          box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.1);
        }

        textarea.form-control-custom {
          min-height: 120px;
          resize: vertical;
        }

        .field-help {
          margin-top: 6px;
          color: #98a2b3;
          font-size: 10px;
          line-height: 1.5;
        }

        /* =========================
           SOCIAL GRID
        ========================= */

        .social-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 20px;
        }

        .social-field {
          min-width: 0;
        }

        .social-label-icon {
          width: 26px;
          height: 26px;
          border-radius: 7px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: #f2f4f7;
          color: #667085;
          margin-right: 7px;
          font-size: 13px;
          vertical-align: middle;
        }

        /* =========================
           STATUS CARD
        ========================= */

        .status-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          padding: 17px;
          border: 1px solid #edf0f2;
          border-radius: 12px;
          background: #fcfdfd;
          margin-bottom: 22px;
        }

        .status-content {
          min-width: 0;
        }

        .status-title {
          color: #344054;
          font-size: 13px;
          font-weight: 700;
          margin-bottom: 4px;
        }

        .status-description {
          color: #667085;
          font-size: 11px;
          line-height: 1.6;
          text-align: justify;
          margin: 0;
          max-width: 680px;
        }

        .switch-wrapper {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .switch {
          position: relative;
          width: 48px;
          height: 26px;
          flex-shrink: 0;
        }

        .switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        .switch-slider {
          position: absolute;
          cursor: pointer;
          inset: 0;
          background: #d0d5dd;
          border-radius: 30px;
          transition: 0.25s ease;
        }

        .switch-slider::before {
          content: "";
          position: absolute;
          width: 20px;
          height: 20px;
          left: 3px;
          top: 3px;
          background: #ffffff;
          border-radius: 50%;
          box-shadow: 0 2px 5px rgba(16, 24, 40, 0.2);
          transition: 0.25s ease;
        }

        .switch input:checked + .switch-slider {
          background: #198754;
        }

        .switch input:checked + .switch-slider::before {
          transform: translateX(22px);
        }

        .switch-label {
          color: #344054;
          font-size: 12px;
          font-weight: 700;
          white-space: nowrap;
        }

        /* =========================
           ACTIONS
        ========================= */

        .action-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 18px;
          padding-top: 20px;
          border-top: 1px solid #eaecf0;
        }

        .action-left {
          display: flex;
          align-items: center;
          gap: 9px;
          flex-wrap: wrap;
        }

        .action-button {
          min-height: 42px;
          padding: 9px 15px;
          border-radius: 9px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          font-size: 12px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .save-button {
          border: 1px solid #198754;
          background: #198754;
          color: #ffffff;
          box-shadow: 0 6px 16px rgba(25, 135, 84, 0.14);
        }

        .save-button:hover {
          background: #157347;
          border-color: #157347;
          transform: translateY(-1px);
        }

        .delete-button {
          border: 1px solid #ffd6d9;
          background: #fff5f5;
          color: #dc3545;
        }

        .delete-button:hover {
          background: #dc3545;
          border-color: #dc3545;
          color: #ffffff;
        }

        .cancel-button {
          border: 1px solid #e4e7ec;
          background: #ffffff;
          color: #667085;
        }

        .cancel-button:hover {
          background: #f5f7f9;
          color: #344054;
          border-color: #d0d5dd;
        }

        .action-button:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          transform: none;
        }

        .action-note {
          color: #98a2b3;
          font-size: 10px;
          line-height: 1.5;
          text-align: right;
        }

        /* =========================
           FOOTER
        ========================= */

        .admin-page-footer {
          padding: 4px 2px 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 15px;
          color: #98a2b3;
          font-size: 11px;
        }

        .admin-page-footer-left {
          display: flex;
          align-items: center;
          gap: 7px;
        }

        .admin-page-footer a {
          color: #667085;
          text-decoration: none;
          font-weight: 600;
        }

        .admin-page-footer a:hover {
          color: #198754;
        }

        /* =========================
           OVERLAY
        ========================= */

        .sidebar-overlay {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(15, 23, 42, 0.38);
          z-index: 1040;
          backdrop-filter: blur(2px);
        }

        /* =========================
           TABLET
        ========================= */

        @media (max-width: 1199.98px) {
          .admin-content {
            padding: 28px;
          }

          .social-grid {
            gap: 17px;
          }
        }

        /* =========================
           MOBILE / TABLET
        ========================= */

        @media (max-width: 991.98px) {
          .admin-sidebar {
            transform: translateX(-100%);
            box-shadow: 12px 0 30px rgba(15, 23, 42, 0.1);
          }

          .admin-sidebar.sidebar-open {
            transform: translateX(0);
          }

          .sidebar-overlay.sidebar-overlay-show {
            display: block;
          }

          .admin-main {
            width: 100%;
            margin-left: 0;
          }

          .admin-topbar {
            padding: 0 20px;
          }

          .admin-content {
            padding: 25px 20px;
          }

          .page-heading {
            align-items: flex-start;
            flex-direction: column;
          }

          .page-heading-action {
            width: 100%;
          }

          .back-button {
            width: 100%;
          }

          .form-card-body {
            padding: 22px;
          }

          .social-grid {
            grid-template-columns: 1fr;
          }

          .action-footer {
            align-items: flex-start;
            flex-direction: column;
          }

          .action-note {
            text-align: left;
          }
        }

        /* =========================
           SMALL MOBILE
        ========================= */

        @media (max-width: 575.98px) {
          .admin-topbar {
            height: 68px;
            padding: 0 14px;
          }

          .topbar-left {
            gap: 10px;
          }

          .topbar-right {
            gap: 6px;
          }

          .topbar-website,
          .topbar-logout {
            width: 38px;
            height: 38px;
            min-height: 38px;
            padding: 0;
          }

          .topbar-website span,
          .topbar-logout span {
            display: none !important;
          }

          .topbar-label {
            font-size: 9px;
          }

          .topbar-title {
            font-size: 13px;
          }

          .admin-content {
            padding: 20px 14px;
          }

          .page-title-row {
            align-items: flex-start;
            gap: 11px;
          }

          .page-title-icon {
            width: 43px;
            height: 43px;
            border-radius: 11px;
            font-size: 18px;
          }

          .page-title {
            font-size: 25px;
          }

          .page-description {
            font-size: 12px;
            line-height: 1.65;
          }

          .back-dashboard {
            margin-bottom: 14px;
          }

          .form-card {
            border-radius: 14px;
            margin-bottom: 16px;
          }

          .form-card-header {
            padding: 17px;
            gap: 12px;
          }

          .form-card-title {
            font-size: 15px;
          }

          .form-card-description {
            font-size: 11px;
            line-height: 1.65;
          }

          .form-card-icon {
            width: 36px;
            height: 36px;
            font-size: 15px;
          }

          .form-card-body {
            padding: 17px;
          }

          .field-group {
            margin-bottom: 17px;
          }

          .form-label-custom {
            font-size: 11px;
          }

          .form-control-custom {
            min-height: 41px;
            font-size: 12px;
            padding: 9px 10px;
          }

          textarea.form-control-custom {
            min-height: 110px;
          }

          .social-grid {
            gap: 17px;
          }

          .status-box {
            align-items: flex-start;
            flex-direction: column;
            padding: 14px;
            gap: 14px;
          }

          .switch-wrapper {
            width: 100%;
            justify-content: space-between;
          }

          .status-description {
            font-size: 10px;
          }

          .action-footer {
            padding-top: 17px;
          }

          .action-left {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
          }

          .action-button {
            width: 100%;
            min-height: 41px;
            padding: 8px 10px;
            font-size: 11px;
          }

          .save-button {
            grid-column: 1 / -1;
          }

          .admin-page-footer {
            flex-direction: column;
            align-items: flex-start;
            padding-top: 6px;
          }

          .error-card {
            padding: 25px 18px;
          }
        }
      `}</style>

      <div className="admin-layout">
        {/* MOBILE OVERLAY */}
        <div
          className={`sidebar-overlay ${
            sidebarOpen ? "sidebar-overlay-show" : ""
          }`}
          onClick={() => setSidebarOpen(false)}
        />

        {/* SIDEBAR */}
        <aside
          className={`admin-sidebar ${
            sidebarOpen ? "sidebar-open" : ""
          }`}
        >
          <div className="sidebar-inner">
            <div className="sidebar-brand">
              <div className="brand-icon">
                <i className="bi bi-grid-1x2-fill"></i>
              </div>

              <div className="brand-text">
                <strong>GloVaTech</strong>
                <span>Admin Panel</span>
              </div>

              <button
                type="button"
                className="sidebar-close d-lg-none"
                onClick={() => setSidebarOpen(false)}
                aria-label="Tutup sidebar"
              >
                <i className="bi bi-x-lg"></i>
              </button>
            </div>

            <div className="sidebar-section-label">
              MAIN MENU
            </div>

            <nav className="sidebar-nav">
              <Link
                href="/secure-panel"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-speedometer2"></i>
                </span>
                <span>Dashboard</span>
              </Link>
            </nav>

            <div className="sidebar-section-label">
              CONTENT
            </div>

            <nav className="sidebar-nav">
              <Link
                href="/secure-panel/hero"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-stars"></i>
                </span>
                <span>Hero</span>
              </Link>

              <Link
                href="/secure-panel/about"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-person-vcard"></i>
                </span>
                <span>About</span>
              </Link>

              <Link
                href="/secure-panel/about/stats"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-bar-chart"></i>
                </span>
                <span>About Stats</span>
              </Link>

              <Link
                href="/secure-panel/education"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-mortarboard"></i>
                </span>
                <span>Education</span>
              </Link>

              <Link
                href="/secure-panel/skills"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-tools"></i>
                </span>
                <span>Skills</span>
              </Link>

              <Link
                href="/secure-panel/experience"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-briefcase"></i>
                </span>
                <span>Experience</span>
              </Link>

              <Link
                href="/secure-panel/projects"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-code-square"></i>
                </span>
                <span>Projects</span>
              </Link>

              <Link
                href="/secure-panel/certifications"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-patch-check"></i>
                </span>
                <span>Certification</span>
              </Link>

              <Link
                href="/secure-panel/achievements"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-trophy"></i>
                </span>
                <span>Achievement</span>
              </Link>

              <Link
                href="/secure-panel/services"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-gear-wide-connected"></i>
                </span>
                <span>Services</span>
              </Link>

              <Link
                href="/secure-panel/gallery"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-images"></i>
                </span>
                <span>Gallery</span>
              </Link>

              <Link
                href="/secure-panel/contact-info"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-person-lines-fill"></i>
                </span>
                <span>Contact</span>
              </Link>

              <Link
                href="/secure-panel/contact-info/list"
                className="sidebar-link active"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-share-fill"></i>
                </span>
                <span>Contact Sosial Media</span>
              </Link>

              <Link
                href="/secure-panel/articles"
                className="sidebar-link"
                onClick={() => setSidebarOpen(false)}
              >
                <span className="sidebar-link-icon">
                  <i className="bi bi-journal-text"></i>
                </span>
                <span>Articles</span>
              </Link>

              <Link
  href="/secure-panel/contact-messages"
  className="sidebar-link"
  onClick={() => setSidebarOpen(false)}
>
  <span className="sidebar-link-icon">
    <i className="bi bi-chat-left-text"></i>
  </span>
  <span>Contact Messages</span>
</Link>

<Link
  href="/secure-panel/contact-users"
  className="sidebar-link"
  onClick={() => setSidebarOpen(false)}
>
  <span className="sidebar-link-icon">
    <i className="bi bi-people-fill"></i>
  </span>
  <span>Contact User</span>
</Link>
            </nav>

            <div className="sidebar-bottom">
              <Link
                href="/"
                className="sidebar-website"
                onClick={() => setSidebarOpen(false)}
              >
                <i className="bi bi-globe2"></i>
                <span>View Website</span>
                <i className="bi bi-arrow-up-right ms-auto"></i>
              </Link>
            </div>
          </div>
        </aside>

        {/* MAIN */}
        <div className="admin-main">
          {/* TOPBAR */}
          <header className="admin-topbar">
            <div className="topbar-left">
              <button
                type="button"
                className="mobile-menu-button d-lg-none"
                onClick={() => setSidebarOpen(true)}
                aria-label="Buka menu"
              >
                <i className="bi bi-list"></i>
              </button>

              <div>
                <div className="topbar-label">
                  ADMIN PANEL
                </div>

                <h6 className="topbar-title mb-0">
                  Contact Management
                </h6>
              </div>
            </div>

            <div className="topbar-right">
              <Link
                href="/"
                className="topbar-website"
                title="Lihat Website"
              >
                <i className="bi bi-globe2"></i>
                <span>Website</span>
              </Link>

              <Link
                href="/secure-panel/login"
                className="topbar-logout"
                title="Logout"
              >
                <i className="bi bi-box-arrow-right"></i>
                <span>Logout</span>
              </Link>
            </div>
          </header>

          {/* CONTENT */}
          <main className="admin-content">
            {/* PAGE HEADING */}
            <section className="page-heading">
              <div className="page-heading-left">
                <Link
                  href="/secure-panel/contact-info/list"
                  className="back-dashboard"
                >
                  <i className="bi bi-arrow-left"></i>
                  <span>Kembali ke Contact</span>
                </Link>

                <div className="page-title-row">
                  <div className="page-title-icon">
                    <i className="bi bi-person-lines-fill"></i>
                  </div>

                  <div>
                    <div className="page-eyebrow">
                      WEBSITE CONTENT
                    </div>

                    <h1 className="page-title">
                      Edit Contact
                    </h1>

                    <p className="page-description">
                      Perbarui informasi kontak, lokasi,
                      website, dan sosial media yang digunakan
                      pada halaman Contact website portfolio
                      GloVaTech.
                    </p>
                  </div>
                </div>
              </div>

              <div className="page-heading-action">
                <Link
                  href="/secure-panel/contact-info/list"
                  className="back-button"
                >
                  <i className="bi bi-arrow-left"></i>
                  <span>Kembali</span>
                </Link>
              </div>
            </section>

            {/* ERROR */}
            {error && (
              <div className="error-alert">
                <i className="bi bi-exclamation-triangle"></i>

                <div>{error}</div>
              </div>
            )}

            <form onSubmit={handleSubmit}>
              {/* CONTACT INFORMATION */}
              <section className="form-card">
                <div className="form-card-header">
                  <div className="form-card-header-content">
                    <div className="form-card-eyebrow">
                      CONTACT INFORMATION
                    </div>

                    <h2 className="form-card-title">
                      Informasi Kontak
                    </h2>

                    <p className="form-card-description">
                      Kelola informasi utama yang dapat
                      digunakan pengunjung untuk menghubungi
                      dan menemukan Anda melalui website.
                    </p>
                  </div>

                  <div className="form-card-icon">
                    <i className="bi bi-person-lines-fill"></i>
                  </div>
                </div>

                <div className="form-card-body">
                  {/* DESCRIPTION */}
                  <div className="field-group">
                    <label className="form-label-custom">
                      <i className="bi bi-card-text"></i>
                      Description
                    </label>

                    <textarea
                      className="form-control-custom"
                      rows={4}
                      value={description}
                      onChange={(e) =>
                        setDescription(e.target.value)
                      }
                      placeholder="Masukkan deskripsi contact..."
                    />

                    <div className="field-help">
                      Deskripsi singkat mengenai informasi
                      kontak Anda.
                    </div>
                  </div>

                  <div className="row g-4">
                    {/* EMAIL */}
                    <div className="col-md-6">
                      <div className="field-group">
                        <label className="form-label-custom">
                          <i className="bi bi-envelope"></i>
                          Email
                        </label>

                        <input
                          type="email"
                          className="form-control-custom"
                          value={email}
                          onChange={(e) =>
                            setEmail(e.target.value)
                          }
                          placeholder="email@example.com"
                        />
                      </div>
                    </div>

                    {/* PHONE */}
                    <div className="col-md-6">
                      <div className="field-group">
                        <label className="form-label-custom">
                          <i className="bi bi-telephone"></i>
                          Phone
                        </label>

                        <input
                          type="text"
                          className="form-control-custom"
                          value={phone}
                          onChange={(e) =>
                            setPhone(e.target.value)
                          }
                          placeholder="+62..."
                        />
                      </div>
                    </div>

                    {/* LOCATION */}
                    <div className="col-md-6">
                      <div className="field-group">
                        <label className="form-label-custom">
                          <i className="bi bi-geo-alt"></i>
                          Location
                        </label>

                        <input
                          type="text"
                          className="form-control-custom"
                          value={location}
                          onChange={(e) =>
                            setLocation(e.target.value)
                          }
                          placeholder="Padang, Sumatera Barat, Indonesia"
                        />
                      </div>
                    </div>

                    {/* WEBSITE */}
                    <div className="col-md-6">
                      <div className="field-group">
                        <label className="form-label-custom">
                          <i className="bi bi-globe"></i>
                          Website
                        </label>

                        <input
                          type="url"
                          className="form-control-custom"
                          value={website}
                          onChange={(e) =>
                            setWebsite(e.target.value)
                          }
                          placeholder="https://example.com"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </section>

              {/* SOCIAL MEDIA */}
              <section className="form-card">
                <div className="form-card-header">
                  <div className="form-card-header-content">
                    <div className="form-card-eyebrow">
                      SOCIAL MEDIA
                    </div>

                    <h2 className="form-card-title">
                      Social Media
                    </h2>

                    <p className="form-card-description">
                      Perbarui tautan sosial media yang
                      ditampilkan pada website. Kosongkan
                      field jika akun sosial media tidak
                      digunakan.
                    </p>
                  </div>

                  <div className="form-card-icon">
                    <i className="bi bi-share-fill"></i>
                  </div>
                </div>

                <div className="form-card-body">
                  <div className="social-grid">
                    {/* GITHUB */}
                    <div className="social-field">
                      <label className="form-label-custom">
                        <span className="social-label-icon">
                          <i className="bi bi-github"></i>
                        </span>
                        GitHub
                      </label>

                      <input
                        type="url"
                        className="form-control-custom"
                        value={github}
                        onChange={(e) =>
                          setGithub(e.target.value)
                        }
                        placeholder="https://github.com/username"
                      />
                    </div>

                    {/* LINKEDIN */}
                    <div className="social-field">
                      <label className="form-label-custom">
                        <span className="social-label-icon">
                          <i className="bi bi-linkedin"></i>
                        </span>
                        LinkedIn
                      </label>

                      <input
                        type="url"
                        className="form-control-custom"
                        value={linkedin}
                        onChange={(e) =>
                          setLinkedin(e.target.value)
                        }
                        placeholder="https://linkedin.com/in/username"
                      />
                    </div>

                    {/* FACEBOOK */}
                    <div className="social-field">
                      <label className="form-label-custom">
                        <span className="social-label-icon">
                          <i className="bi bi-facebook"></i>
                        </span>
                        Facebook
                      </label>

                      <input
                        type="url"
                        className="form-control-custom"
                        value={facebook}
                        onChange={(e) =>
                          setFacebook(e.target.value)
                        }
                        placeholder="https://facebook.com/username"
                      />
                    </div>

                    {/* INSTAGRAM */}
                    <div className="social-field">
                      <label className="form-label-custom">
                        <span className="social-label-icon">
                          <i className="bi bi-instagram"></i>
                        </span>
                        Instagram
                      </label>

                      <input
                        type="url"
                        className="form-control-custom"
                        value={instagram}
                        onChange={(e) =>
                          setInstagram(e.target.value)
                        }
                        placeholder="https://instagram.com/username"
                      />
                    </div>

                    {/* TWITTER / X */}
                    <div className="social-field">
                      <label className="form-label-custom">
                        <span className="social-label-icon">
                          <i className="bi bi-twitter-x"></i>
                        </span>
                        Twitter / X
                      </label>

                      <input
                        type="url"
                        className="form-control-custom"
                        value={twitter}
                        onChange={(e) =>
                          setTwitter(e.target.value)
                        }
                        placeholder="https://x.com/username"
                      />
                    </div>

                    {/* YOUTUBE */}
                    <div className="social-field">
                      <label className="form-label-custom">
                        <span className="social-label-icon">
                          <i className="bi bi-youtube"></i>
                        </span>
                        YouTube
                      </label>

                      <input
                        type="url"
                        className="form-control-custom"
                        value={youtube}
                        onChange={(e) =>
                          setYoutube(e.target.value)
                        }
                        placeholder="https://youtube.com/@channel"
                      />
                    </div>

                    {/* TIKTOK */}
                    <div className="social-field">
                      <label className="form-label-custom">
                        <span className="social-label-icon">
                          <i className="bi bi-tiktok"></i>
                        </span>
                        TikTok
                      </label>

                      <input
                        type="url"
                        className="form-control-custom"
                        value={tiktok}
                        onChange={(e) =>
                          setTiktok(e.target.value)
                        }
                        placeholder="https://tiktok.com/@username"
                      />
                    </div>
                  </div>
                </div>
              </section>

              {/* STATUS & ACTION */}
              <section className="form-card">
                <div className="form-card-header">
                  <div className="form-card-header-content">
                    <div className="form-card-eyebrow">
                      SETTINGS
                    </div>

                    <h2 className="form-card-title">
                      Status & Action
                    </h2>

                    <p className="form-card-description">
                      Atur status Contact Information dan
                      simpan perubahan yang telah dilakukan.
                    </p>
                  </div>

                  <div className="form-card-icon">
                    <i className="bi bi-sliders"></i>
                  </div>
                </div>

                <div className="form-card-body">
                  <div className="status-box">
                    <div className="status-content">
                      <div className="status-title">
                        Aktifkan Contact Information
                      </div>

                      <p className="status-description">
                        Jika status aktif, informasi kontak
                        ini dapat digunakan pada bagian
                        Contact website utama.
                      </p>
                    </div>

                    <div className="switch-wrapper">
                      <label className="switch">
                        <input
                          type="checkbox"
                          checked={active}
                          onChange={(e) =>
                            setActive(e.target.checked)
                          }
                          disabled={saving}
                        />

                        <span className="switch-slider"></span>
                      </label>

                      <span className="switch-label">
                        {active ? "Active" : "Inactive"}
                      </span>
                    </div>
                  </div>

                  <div className="action-footer">
                    <div className="action-left">
                      <button
                        type="submit"
                        className="action-button save-button"
                        disabled={saving}
                      >
                        {saving ? (
                          <>
                            <span
                              className="spinner-border spinner-border-sm"
                              role="status"
                            ></span>
                            <span>Menyimpan...</span>
                          </>
                        ) : (
                          <>
                            <i className="bi bi-save"></i>
                            <span>
                              Update Contact Information
                            </span>
                          </>
                        )}
                      </button>

                      <button
                        type="button"
                        className="action-button delete-button"
                        onClick={handleDelete}
                        disabled={saving}
                      >
                        <i className="bi bi-trash"></i>
                        <span>Hapus</span>
                      </button>

                      <button
                        type="button"
                        className="action-button cancel-button"
                        onClick={() =>
                          router.push(
                            "/secure-panel/contact-info/list"
                          )
                        }
                        disabled={saving}
                      >
                        <i className="bi bi-x-lg"></i>
                        <span>Batal</span>
                      </button>
                    </div>

                    <div className="action-note">
                      Perubahan akan disimpan ke database
                      Contact Information.
                    </div>
                  </div>
                </div>
              </section>
            </form>

            {/* FOOTER */}
            <footer className="admin-page-footer">
              <div className="admin-page-footer-left">
                <i className="bi bi-shield-check"></i>

                <span>
                  Admin Content Management System
                </span>
              </div>

              <Link href="/secure-panel">
                <i className="bi bi-arrow-left me-1"></i>
                Dashboard
              </Link>
            </footer>
          </main>
        </div>
      </div>
    </>
  );
}
export default function ContactInfoEditPageWithSuspense() {
  return (
    <Suspense
      fallback={
        <div
          style={{
            minHeight: "100vh",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          Memuat Contact Information...
        </div>
      }
    >
      <ContactInfoEditPage />
    </Suspense>
  );
}