"use client";

import { useEffect, useState } from "react";
import { useRouter } 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;
};

export default function ContactInfoListPage() {
  const router = useRouter();

  const [contacts, setContacts] = useState<ContactInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [deletingId, setDeletingId] = useState<number | null>(null);

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

      const response = await fetch("/api/contact-info", {
        cache: "no-store",
      });

      const result = await response.json();

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

      if (result.data) {
        setContacts([result.data]);
      } else {
        setContacts([]);
      }
    } catch (err) {
      setError(
        err instanceof Error ? err.message : "Gagal mengambil data."
      );
    } finally {
      setLoading(false);
    }
  };

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

  const handleDelete = async (id: number) => {
    const confirmed = window.confirm(
      "Yakin ingin menghapus Contact Information ini?"
    );

    if (!confirmed) return;

    try {
      setDeletingId(id);
      setError("");

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

      const result = await response.json();

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

      await loadContacts();
    } catch (err) {
      const message =
        err instanceof Error ? err.message : "Gagal menghapus data.";

      setError(message);
      alert(message);
    } finally {
      setDeletingId(null);
    }
  };

  const totalContact = contacts.length;

  const activeContact = contacts.filter(
    (contact) => contact.active
  ).length;

  const inactiveContact = contacts.filter(
    (contact) => !contact.active
  ).length;

  const socialCount = contacts.reduce((total, contact) => {
    let count = 0;

    if (contact.github) count++;
    if (contact.linkedin) count++;
    if (contact.facebook) count++;
    if (contact.instagram) count++;
    if (contact.twitter) count++;
    if (contact.youtube) count++;
    if (contact.tiktok) count++;

    return total + count;
  }, 0);

  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);
          min-width: 0;
        }

        /* =========================
           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;
          min-width: 0;
        }

        .topbar-right {
          gap: 10px;
          flex-shrink: 0;
        }

        .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;
        }

        .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;
          width: 100%;
        }

        .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;
        }

        .add-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          min-height: 44px;
          padding: 10px 17px;
          border-radius: 10px;
          background: #198754;
          color: #ffffff;
          text-decoration: none;
          font-size: 13px;
          font-weight: 600;
          border: 1px solid #198754;
          box-shadow: 0 7px 18px rgba(25, 135, 84, 0.16);
          transition: all 0.2s ease;
          cursor: pointer;
        }

        .add-button:hover {
          background: #157347;
          color: #ffffff;
          transform: translateY(-1px);
          box-shadow: 0 10px 22px rgba(25, 135, 84, 0.2);
        }

        /* =========================
           STATISTICS
        ========================= */

        .stats-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 16px;
          margin-bottom: 24px;
        }

        .stat-card {
          background: #ffffff;
          border: 1px solid #eaecf0;
          border-radius: 14px;
          padding: 18px;
          display: flex;
          align-items: center;
          gap: 14px;
          min-width: 0;
          box-shadow: 0 2px 7px rgba(16, 24, 40, 0.025);
          transition: all 0.25s ease;
        }

        .stat-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 9px 24px rgba(16, 24, 40, 0.07);
        }

        .stat-icon {
          width: 43px;
          height: 43px;
          border-radius: 11px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 17px;
          flex-shrink: 0;
        }

        .stat-icon.green {
          background: #e9f7ef;
          color: #198754;
        }

        .stat-icon.success {
          background: #eaf8f0;
          color: #198754;
        }

        .stat-icon.secondary {
          background: #f2f4f7;
          color: #667085;
        }

        .stat-icon.blue {
          background: #eef4ff;
          color: #3b82f6;
        }

        .stat-label {
          font-size: 11px;
          color: #98a2b3;
          font-weight: 600;
          margin-bottom: 3px;
        }

        .stat-value {
          font-size: 21px;
          line-height: 1;
          font-weight: 750;
          color: #101828;
        }

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

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

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

        .content-card-header > div:first-child {
          min-width: 0;
        }

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

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

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

        .content-card-count {
          min-width: 38px;
          height: 38px;
          padding: 0 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          border-radius: 10px;
          background: #f5f7f9;
          color: #667085;
          font-size: 12px;
          font-weight: 700;
          flex-shrink: 0;
        }

        /* =====================================================
           CONTACT TABLE / DETAILS
        ===================================================== */

        .contact-list {
          padding: 18px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          min-width: 0;
        }

        /*
         * DESKTOP:
         *
         * 1. Icon
         * 2. Contact
         * 3. Description
         * 4. Location / Website
         * 5. Status / Social
         * 6. Actions
         *
         * Setiap kolom mempunyai batas yang jelas sehingga
         * action tidak pernah terdorong oleh isi kolom lain.
         */

        .contact-item {
          display: grid;
          grid-template-columns:
            52px
            minmax(190px, 1.05fr)
            minmax(210px, 1.25fr)
            minmax(180px, 1fr)
            minmax(125px, 0.75fr)
            minmax(170px, 180px);

          align-items: center;
          gap: 16px;

          width: 100%;
          min-width: 0;

          padding: 17px;

          border: 1px solid #edf0f2;
          border-radius: 13px;
          background: #ffffff;

          transition:
            border-color 0.25s ease,
            background 0.25s ease,
            box-shadow 0.25s ease;
        }

        .contact-item:hover {
          border-color: #cfe8d9;
          background: #fcfffd;
          box-shadow: 0 7px 20px rgba(25, 135, 84, 0.055);
        }

        .contact-avatar {
          width: 50px;
          height: 50px;
          border-radius: 12px;
          background: #e9f7ef;
          color: #198754;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 19px;
          flex-shrink: 0;
        }

        .contact-main,
        .contact-description,
        .contact-meta,
        .contact-status,
        .contact-actions {
          min-width: 0;
          max-width: 100%;
        }

        .contact-label {
          font-size: 10px;
          font-weight: 700;
          color: #98a2b3;
          letter-spacing: 0.8px;
          text-transform: uppercase;
          margin-bottom: 5px;
        }

        .contact-email {
          color: #101828;
          font-size: 14px;
          font-weight: 700;
          line-height: 1.45;

          overflow-wrap: anywhere;
          word-break: break-word;
        }

        .contact-phone {
          margin-top: 4px;
          color: #198754;
          font-size: 11px;
          line-height: 1.5;

          overflow-wrap: anywhere;
          word-break: break-word;
        }

        .contact-description {
          color: #667085;
          font-size: 12px;
          line-height: 1.65;
          text-align: justify;

          overflow-wrap: anywhere;
          word-break: break-word;

          /*
           * Agar description panjang tidak membuat
           * tinggi baris menjadi berlebihan.
           */
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .contact-meta {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .contact-meta-row {
          display: flex;
          align-items: flex-start;
          gap: 8px;

          color: #667085;
          font-size: 11px;
          line-height: 1.55;

          margin-bottom: 8px;
          min-width: 0;
        }

        .contact-meta-row:last-child {
          margin-bottom: 0;
        }

        .contact-meta-row i {
          width: 15px;
          color: #198754;
          flex-shrink: 0;
          text-align: center;
          padding-top: 1px;
        }

        .contact-meta-row span {
          min-width: 0;
          max-width: 100%;

          overflow-wrap: anywhere;
          word-break: break-word;
        }

        .contact-website {
          color: #667085;
          text-decoration: none;
          transition: color 0.2s ease;

          overflow-wrap: anywhere;
          word-break: break-word;
        }

        .contact-website:hover {
          color: #198754;
        }

        /* =========================
           STATUS + SOCIAL
        ========================= */

        .contact-status {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
        }

        .status-badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 5px;

          min-width: 78px;
          min-height: 27px;

          padding: 5px 9px;
          border-radius: 7px;

          font-size: 10px;
          font-weight: 700;

          margin-bottom: 9px;
        }

        .status-active {
          background: #e9f7ef;
          color: #198754;
        }

        .status-inactive {
          background: #f2f4f7;
          color: #667085;
        }

        .social-links {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 5px;

          width: 100%;
          max-width: 100%;
        }

        .social-link {
          width: 29px;
          height: 29px;

          border-radius: 7px;

          display: inline-flex;
          align-items: center;
          justify-content: center;

          text-decoration: none;
          font-size: 12px;

          flex: 0 0 29px;

          transition:
            transform 0.2s ease,
            filter 0.2s ease;
        }

        .social-link.github,
        .social-link.twitter,
        .social-link.tiktok {
          color: #344054;
          background: #f2f4f7;
          border: 1px solid #e4e7ec;
        }

        .social-link.linkedin,
        .social-link.facebook {
          color: #0d6efd;
          background: #eef5ff;
          border: 1px solid #dbeafe;
        }

        .social-link.instagram,
        .social-link.youtube {
          color: #dc3545;
          background: #fff1f2;
          border: 1px solid #ffd9dc;
        }

        .social-link:hover {
          transform: translateY(-1px);
          filter: brightness(0.96);
        }

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

        .contact-actions {
          width: 100%;
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 7px;
          align-items: center;
        }

        .action-button {
          width: 100%;
          min-width: 0;
          min-height: 36px;

          padding: 7px 8px;

          border-radius: 8px;

          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 5px;

          font-size: 11px;
          font-weight: 600;

          cursor: pointer;
          text-decoration: none;
          white-space: nowrap;

          transition:
            background 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
        }

        .action-button:hover {
          transform: translateY(-1px);
        }

        .action-button i {
          flex-shrink: 0;
        }

        .edit-button {
          color: #0d6efd;
          background: #f0f6ff;
          border: 1px solid #dbeafe;
        }

        .edit-button:hover {
          color: #ffffff;
          background: #0d6efd;
          border-color: #0d6efd;
        }

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

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

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

        /* =====================================================
           TABLE HEADER
        ===================================================== */

        .contact-table-header {
          display: grid;
          grid-template-columns:
            52px
            minmax(190px, 1.05fr)
            minmax(210px, 1.25fr)
            minmax(180px, 1fr)
            minmax(125px, 0.75fr)
            minmax(170px, 180px);

          gap: 16px;
          padding: 0 17px 9px;

          color: #98a2b3;
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.8px;
          text-transform: uppercase;
        }

        .contact-table-header > div {
          min-width: 0;
        }

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

        .admin-error {
          margin-bottom: 20px;
          padding: 13px 16px;

          border: 1px solid #ffd6d9;
          border-radius: 11px;

          background: #fff5f5;
          color: #b42318;

          font-size: 12px;
          line-height: 1.6;
        }

        /* =========================
           LOADING
        ========================= */

        .loading-state {
          min-height: 300px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 40px 20px;
        }

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

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

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

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }

        /* =========================
           EMPTY
        ========================= */

        .empty-state {
          min-height: 330px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 45px 20px;
        }

        .empty-icon {
          width: 66px;
          height: 66px;
          border-radius: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f2f4f7;
          color: #98a2b3;
          font-size: 27px;
          margin-bottom: 17px;
        }

        .empty-state h5 {
          font-size: 16px;
          font-weight: 750;
          color: #344054;
          margin-bottom: 6px;
        }

        .empty-state p {
          color: #98a2b3;
          font-size: 12px;
          max-width: 420px;
          line-height: 1.7;
          text-align: center;
          margin-bottom: 18px;
        }

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

        .admin-page-footer {
          padding: 22px 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);
        }

        /* =====================================================
           1450+
        ===================================================== */

        @media (min-width: 1450px) {
          .contact-item,
          .contact-table-header {
            grid-template-columns:
              52px
              minmax(205px, 1.05fr)
              minmax(250px, 1.35fr)
              minmax(200px, 1fr)
              minmax(140px, 0.75fr)
              180px;
          }
        }

        /* =====================================================
           1300 - 1449
        ===================================================== */

        @media (max-width: 1449.98px) {
          .contact-item,
          .contact-table-header {
            grid-template-columns:
              52px
              minmax(175px, 1fr)
              minmax(190px, 1.15fr)
              minmax(170px, 0.95fr)
              minmax(120px, 0.7fr)
              170px;
          }

          .contact-item {
            gap: 13px;
          }

          .contact-table-header {
            gap: 13px;
          }

          .contact-actions {
            grid-template-columns: 1fr;
            gap: 6px;
          }
        }

        /* =====================================================
           1200 - 1299
        ===================================================== */

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

          /*
           * Mulai dari sini layout Contact menjadi
           * 2 baris agar tidak terlalu sempit.
           */

          .contact-table-header {
            display: none;
          }

          .contact-item {
            grid-template-columns:
              52px
              minmax(190px, 1fr)
              minmax(210px, 1.1fr)
              minmax(155px, 0.9fr);

            gap: 15px;
          }

          .contact-status {
            grid-column: 4;
            grid-row: 1;
          }

          .contact-actions {
            grid-column: 2 / 5;
            grid-row: 2;

            width: 100%;
            display: grid;
            grid-template-columns: 130px 130px;
            justify-content: start;
          }
        }

        /* =====================================================
           1199
        ===================================================== */

        @media (max-width: 1199.98px) {
          .stats-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .contact-item {
            grid-template-columns:
              52px
              minmax(0, 1.1fr)
              minmax(0, 1fr);

            align-items: start;
          }

          .contact-main {
            grid-column: 2;
            grid-row: 1;
          }

          .contact-description {
            grid-column: 3;
            grid-row: 1;
          }

          .contact-meta {
            grid-column: 2 / 4;
            grid-row: 2;

            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
          }

          .contact-status {
            grid-column: 2;
            grid-row: 3;
          }

          .contact-actions {
            grid-column: 3;
            grid-row: 3;

            display: grid;
            grid-template-columns: minmax(110px, 150px) minmax(110px, 150px);
            justify-content: end;
          }
        }

        /* =====================================================
           992
        ===================================================== */

        @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%;
          }

          .add-button {
            width: 100%;
          }

          /*
           * Tablet:
           * Contact dibuat 2 kolom.
           */

          .contact-item {
            grid-template-columns: 52px minmax(0, 1fr);
            gap: 13px;
            padding: 16px;
          }

          .contact-main {
            grid-column: 2;
            grid-row: 1;
          }

          .contact-description {
            grid-column: 1 / -1;
            grid-row: 2;
          }

          .contact-meta {
            grid-column: 1 / -1;
            grid-row: 3;

            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
          }

          .contact-status {
            grid-column: 1 / -1;
            grid-row: 4;

            width: 100%;
          }

          .contact-actions {
            grid-column: 1 / -1;
            grid-row: 5;

            width: 100%;
            grid-template-columns: minmax(130px, 160px) minmax(130px, 160px);
            justify-content: start;
          }
        }

        /* =====================================================
           767
        ===================================================== */

        @media (max-width: 767.98px) {
          .content-card-header {
            align-items: flex-start;
          }

          .contact-list {
            padding: 13px;
          }

          .contact-item {
            border-radius: 12px;
            padding: 15px;
          }

          .contact-meta {
            grid-template-columns: 1fr;
            gap: 8px;
          }

          .contact-meta-row {
            margin-bottom: 0;
          }

          .contact-actions {
            grid-template-columns: 1fr 1fr;
          }

          .action-button {
            min-height: 39px;
          }
        }

        /* =====================================================
           575
        ===================================================== */

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

          .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;
          }

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

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

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

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

          .page-description {
            font-size: 12px;
            text-align: justify;
          }

          .stats-grid {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
          }

          .stat-card {
            padding: 13px;
            gap: 10px;
          }

          .stat-icon {
            width: 36px;
            height: 36px;
            font-size: 14px;
          }

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

          .stat-value {
            font-size: 17px;
          }

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

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

          .content-card-description {
            font-size: 11px;
          }

          .content-card-count {
            min-width: 34px;
            height: 34px;
            padding: 0 8px;
          }

          .contact-list {
            padding: 10px;
            gap: 10px;
          }

          /*
           * Mobile benar-benar menjadi card.
           * Tidak ada lagi kolom horizontal yang
           * dapat menyebabkan overflow.
           */

          .contact-item {
            display: flex;
            flex-direction: column;
            align-items: stretch;

            width: 100%;
            gap: 13px;

            padding: 14px;
          }

          .contact-avatar {
            width: 43px;
            height: 43px;
            border-radius: 11px;
            font-size: 16px;
          }

          .contact-main,
          .contact-description,
          .contact-meta,
          .contact-status,
          .contact-actions {
            width: 100%;
            grid-column: auto;
            grid-row: auto;
          }

          .contact-main {
            display: block;
          }

          .contact-email {
            font-size: 13px;
          }

          .contact-phone {
            font-size: 11px;
          }

          .contact-description {
            font-size: 11px;
            line-height: 1.7;

            -webkit-line-clamp: 6;
          }

          .contact-meta {
            display: flex;
            flex-direction: column;
            gap: 8px;
          }

          .contact-meta-row {
            font-size: 11px;
          }

          .contact-status {
            width: 100%;
            padding-top: 2px;
          }

          .status-badge {
            margin-bottom: 8px;
          }

          .social-links {
            gap: 6px;
          }

          .social-link {
            width: 32px;
            height: 32px;
            flex-basis: 32px;
          }

          .contact-actions {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;

            padding-top: 2px;
          }

          .action-button {
            width: 100%;
            min-height: 40px;
          }

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

        /* =====================================================
           380
        ===================================================== */

        @media (max-width: 380px) {
          .admin-content {
            padding-left: 11px;
            padding-right: 11px;
          }

          .stats-grid {
            gap: 8px;
          }

          .stat-card {
            padding: 11px;
          }

          .stat-icon {
            width: 33px;
            height: 33px;
          }

          .contact-item {
            padding: 13px;
          }

          .contact-actions {
            grid-template-columns: 1fr;
          }

          .action-button {
            min-height: 40px;
          }
        }
      `}</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">

            {/* BRAND */}
            <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>

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

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

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

            <nav className="sidebar-nav">

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
                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>
              </a>

              <a
  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>
</a>

<a
  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>
</a>

            </nav>

            {/* BOTTOM */}
            <div className="sidebar-bottom">
              <a href="/" className="sidebar-website">
                <i className="bi bi-globe2"></i>
                <span>View Website</span>
                <i className="bi bi-arrow-up-right ms-auto"></i>
              </a>
            </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">

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

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

            </div>

          </header>

          {/* CONTENT */}
          <main className="admin-content">

            {/* PAGE HEADING */}
            <section className="page-heading">

              <div className="page-heading-left">

                <a
                  href="/secure-panel"
                  className="back-dashboard"
                >
                  <i className="bi bi-arrow-left"></i>
                  <span>Kembali ke Dashboard</span>
                </a>

                <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">
                      Contact Information
                    </h1>

                    <p className="page-description">
                      Kelola informasi kontak, alamat, website,
                      dan sosial media yang ditampilkan pada
                      website portfolio GloVaTech.
                    </p>

                  </div>

                </div>

              </div>

              <div className="page-heading-action">

                <button
                  type="button"
                  className="add-button"
                  onClick={() =>
                    router.push("/secure-panel/contact-info")
                  }
                >
                  <i className="bi bi-plus-lg"></i>
                  <span>Tambah Contact</span>
                </button>

              </div>

            </section>

            {/* ERROR */}
            {error && (
              <div className="admin-error">
                <i className="bi bi-exclamation-triangle me-2"></i>
                {error}
              </div>
            )}

            {/* STATISTICS */}
            <section className="stats-grid">

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

                <div>
                  <div className="stat-label">
                    Total Contact
                  </div>

                  <div className="stat-value">
                    {loading ? "—" : totalContact}
                  </div>
                </div>
              </div>

              <div className="stat-card">
                <div className="stat-icon success">
                  <i className="bi bi-check-circle"></i>
                </div>

                <div>
                  <div className="stat-label">
                    Active
                  </div>

                  <div className="stat-value">
                    {loading ? "—" : activeContact}
                  </div>
                </div>
              </div>

              <div className="stat-card">
                <div className="stat-icon secondary">
                  <i className="bi bi-pause-circle"></i>
                </div>

                <div>
                  <div className="stat-label">
                    Inactive
                  </div>

                  <div className="stat-value">
                    {loading ? "—" : inactiveContact}
                  </div>
                </div>
              </div>

              <div className="stat-card">
                <div className="stat-icon blue">
                  <i className="bi bi-share"></i>
                </div>

                <div>
                  <div className="stat-label">
                    Social Media
                  </div>

                  <div className="stat-value">
                    {loading ? "—" : socialCount}
                  </div>
                </div>
              </div>

            </section>

            {/* CONTENT CARD */}
            <section className="content-card">

              <div className="content-card-header">

                <div>

                  <div className="content-card-eyebrow">
                    CONTENT MANAGEMENT
                  </div>

                  <h2 className="content-card-title">
                    Contact Details
                  </h2>

                  <p className="content-card-description">
                    Informasi kontak dan sosial media yang
                    digunakan pada section Contact di website.
                  </p>

                </div>

                <div className="content-card-count">
                  <i className="bi bi-file-person"></i>

                  <span>
                    {loading ? "..." : totalContact}
                  </span>
                </div>

              </div>

              {loading ? (

                <div className="loading-state">

                  <div className="loading-spinner"></div>

                  <h5>
                    Memuat Contact Information
                  </h5>

                  <p>
                    Sedang mengambil informasi dari database...
                  </p>

                </div>

              ) : contacts.length === 0 ? (

                <div className="empty-state">

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

                  <h5>
                    Belum ada Contact Information
                  </h5>

                  <p>
                    Belum terdapat informasi kontak. Tambahkan
                    Contact Information untuk menampilkan data
                    kontak dan sosial media pada website utama.
                  </p>

                  <button
                    type="button"
                    className="add-button"
                    onClick={() =>
                      router.push("/secure-panel/contact-info")
                    }
                  >
                    <i className="bi bi-plus-lg"></i>
                    <span>Tambah Contact</span>
                  </button>

                </div>

              ) : (

                <div className="contact-list">

                  {/* TABLE HEADER - DESKTOP */}
                  <div className="contact-table-header">

                    <div></div>

                    <div>
                      Contact
                    </div>

                    <div>
                      Description
                    </div>

                    <div>
                      Location & Website
                    </div>

                    <div>
                      Status & Social
                    </div>

                    <div>
                      Actions
                    </div>

                  </div>

                  {contacts.map((contact) => (

                    <article
                      className="contact-item"
                      key={contact.id}
                    >

                      {/* ICON */}
                      <div className="contact-avatar">
                        <i className="bi bi-person-lines-fill"></i>
                      </div>

                      {/* MAIN CONTACT */}
                      <div className="contact-main">

                        <div className="contact-label">
                          Contact
                        </div>

                        <div className="contact-email">
                          {contact.email ||
                            "Email belum tersedia"}
                        </div>

                        <div className="contact-phone">
                          <i className="bi bi-telephone me-1"></i>

                          {contact.phone ||
                            "Nomor telepon belum tersedia"}
                        </div>

                      </div>

                      {/* DESCRIPTION */}
                      <div className="contact-description">
                        {contact.description ||
                          "Tidak ada deskripsi Contact Information."}
                      </div>

                      {/* META */}
                      <div className="contact-meta">

                        <div className="contact-meta-row">
                          <i className="bi bi-geo-alt-fill"></i>

                          <span>
                            {contact.location ||
                              "Lokasi belum tersedia"}
                          </span>
                        </div>

                        <div className="contact-meta-row">
                          <i className="bi bi-globe2"></i>

                          <span>
                            {contact.website ? (
                              <a
                                href={contact.website}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="contact-website"
                              >
                                {contact.website}
                              </a>
                            ) : (
                              "Website belum tersedia"
                            )}
                          </span>
                        </div>

                      </div>

                      {/* STATUS + SOCIAL */}
                      <div className="contact-status">

                        {contact.active ? (
                          <span className="status-badge status-active">
                            <i className="bi bi-check-circle"></i>
                            Active
                          </span>
                        ) : (
                          <span className="status-badge status-inactive">
                            <i className="bi bi-pause-circle"></i>
                            Inactive
                          </span>
                        )}

                        <div className="social-links">

                          {contact.github && (
                            <a
                              href={contact.github}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="social-link github"
                              title="GitHub"
                              aria-label="GitHub"
                            >
                              <i className="bi bi-github"></i>
                            </a>
                          )}

                          {contact.linkedin && (
                            <a
                              href={contact.linkedin}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="social-link linkedin"
                              title="LinkedIn"
                              aria-label="LinkedIn"
                            >
                              <i className="bi bi-linkedin"></i>
                            </a>
                          )}

                          {contact.facebook && (
                            <a
                              href={contact.facebook}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="social-link facebook"
                              title="Facebook"
                              aria-label="Facebook"
                            >
                              <i className="bi bi-facebook"></i>
                            </a>
                          )}

                          {contact.instagram && (
                            <a
                              href={contact.instagram}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="social-link instagram"
                              title="Instagram"
                              aria-label="Instagram"
                            >
                              <i className="bi bi-instagram"></i>
                            </a>
                          )}

                          {contact.twitter && (
                            <a
                              href={contact.twitter}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="social-link twitter"
                              title="Twitter / X"
                              aria-label="Twitter / X"
                            >
                              <i className="bi bi-twitter-x"></i>
                            </a>
                          )}

                          {contact.youtube && (
                            <a
                              href={contact.youtube}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="social-link youtube"
                              title="YouTube"
                              aria-label="YouTube"
                            >
                              <i className="bi bi-youtube"></i>
                            </a>
                          )}

                          {contact.tiktok && (
                            <a
                              href={contact.tiktok}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="social-link tiktok"
                              title="TikTok"
                              aria-label="TikTok"
                            >
                              <i className="bi bi-tiktok"></i>
                            </a>
                          )}

                        </div>

                      </div>

                      {/* ACTIONS */}
                      <div className="contact-actions">

                        <button
                          type="button"
                          className="action-button edit-button"
                          onClick={() =>
                            router.push(
                              `/secure-panel/contact-info?id=${contact.id}`
                            )
                          }
                          title="Edit Contact"
                        >
                          <i className="bi bi-pencil"></i>
                          <span>Edit</span>
                        </button>

                        <button
                          type="button"
                          className="action-button delete-button"
                          disabled={deletingId === contact.id}
                          onClick={() =>
                            handleDelete(contact.id)
                          }
                          title="Hapus Contact"
                        >
                          {deletingId === contact.id ? (
                            <>
                              <i className="bi bi-arrow-repeat"></i>
                              <span>...</span>
                            </>
                          ) : (
                            <>
                              <i className="bi bi-trash"></i>
                              <span>Hapus</span>
                            </>
                          )}
                        </button>

                      </div>

                    </article>

                  ))}

                </div>

              )}

            </section>

            {/* 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>

              <a href="/secure-panel">
                <i className="bi bi-arrow-left me-1"></i>
                Dashboard
              </a>

            </footer>

          </main>

        </div>

      </div>
    </>
  );
}