"use client";

import { TPortal } from "@/lib/api";
import { truncateString } from "@/utils/shared";
import gsap from "gsap";
import { useLayoutEffect, useRef } from "react";
import { GlobeIcon } from "./icons";

type Props = {
  portals: TPortal[];
  isLoading: boolean;
};

export function ScrapePortals({ portals, isLoading }: Props) {
  const rootRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const root = rootRef.current;
    if (!root) return;

    const reduced =
      typeof window !== "undefined" &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const ctx = gsap.context(() => {
      if (reduced) return;
      gsap.from(root, {
        opacity: 0,
        y: 24,
        duration: 0.6,
        ease: "power3.out",
        delay: 0.35,
      });

      const rows = root.querySelectorAll("[data-portal-row]");
      if (rows.length > 0) {
        gsap.from(rows, {
          x: 24,
          opacity: 0,
          duration: 0.5,
          stagger: 0.06,
          delay: 0.55,
          ease: "power2.out",
        });
      }
    }, root);
    return () => ctx.revert();
  }, [portals.length, isLoading]);

  return (
    <div
      ref={rootRef}
      className="flex h-full flex-col overflow-hidden rounded-2xl bg-white shadow-1 ring-1 ring-stroke dark:bg-gray-dark dark:shadow-card dark:ring-stroke-dark"
    >
      <div className="flex items-center justify-between border-b border-stroke px-5 py-4 dark:border-stroke-dark">
        <div className="flex items-center gap-2">
          <span className="inline-flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
            <GlobeIcon className="size-5" />
          </span>
          <div>
            <h2 className="text-base font-bold text-dark dark:text-white">
              Scrape Portals
            </h2>
            <p className="text-xs text-dark-6">
              Tender sources monitored by the pipeline
            </p>
          </div>
        </div>
        {!isLoading && portals.length > 0 && (
          <span className="rounded-full bg-gray-2 px-2.5 py-1 text-xs font-semibold tabular-nums text-dark-5 dark:bg-dark-3 dark:text-dark-6">
            {portals.length}
          </span>
        )}
      </div>

      <ul className="max-h-[420px] flex-1 divide-y divide-stroke overflow-y-auto dark:divide-stroke-dark">
        {isLoading
          ? Array.from({ length: 5 }).map((_, i) => (
              <li
                key={i}
                className="flex animate-pulse items-center gap-3 px-5 py-3.5"
              >
                <div className="size-8 rounded-lg bg-gray-2 dark:bg-dark-3" />
                <div className="h-3 flex-1 rounded bg-gray-2 dark:bg-dark-3" />
              </li>
            ))
          : portals.map((portal, index) => (
              <li key={`${portal}-${index}`} data-portal-row>
                <p


                  rel="noopener noreferrer"
                  className="group flex items-center gap-3 px-5 py-3.5 transition-colors hover:bg-gray-2 dark:hover:bg-dark-2"
                >
                  <span className="inline-flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-xs font-bold text-primary">
                    {index + 1}
                  </span>
                  <span className="min-w-0 flex-1 text-sm font-medium text-dark transition-colors group-hover:text-primary dark:text-white">
                    {portal.length > 60
                      ? truncateString(portal, 28, 28)
                      : portal}
                  </span>
                </p>
              </li>
            ))}
        {!isLoading && portals.length === 0 && (
          <li className="px-5 py-10 text-center text-sm text-dark-6">
            No portals configured.
          </li>
        )}
      </ul>
    </div>
  );
}
