"use client";

import { IconTrendingUp, IconWorld } from "@tabler/icons-react";
import { m } from "motion/react";

import { cn } from "@/lib/utils";

// GSC intégré — coverage matrix by country: per-property connection,
// quick-wins and a country × intensity heatmap (positions 11-20 highlighted).
const countries = [
  { flag: "🇫🇷", name: "France", cells: [3, 2, 3, 1, 3, 2], wins: 2 },
  { flag: "🇧🇪", name: "Belgium", cells: [2, 1, 2, 3, 1, 2], wins: 1 },
  { flag: "🇨🇭", name: "Switzerland", cells: [1, 2, 1, 1, 2, 0], wins: 0 },
  { flag: "🇨🇦", name: "Canada", cells: [2, 3, 1, 2, 1, 1], wins: 1 },
] as const;

const intensity = [
  "bg-black/[0.04] dark:bg-white/[0.04]",
  "bg-brand-blue/30",
  "bg-brand-orange/50",
  "bg-gradient-brand",
];

export const SkeletonTwo = () => {
  return (
    <div className="absolute inset-x-0 top-6 bottom-0 flex items-end justify-center mask-b-from-90% px-6">
      <m.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5, ease: "easeOut" }}
        className="border-hairline bg-surface shadow-premium w-full max-w-sm rounded-2xl border"
      >
        {/* header */}
        <div className="border-hairline flex items-center justify-between border-b px-4 py-3">
          <div className="text-ink-2 flex items-center gap-2 text-xs font-semibold">
            <IconWorld className="text-brand-blue size-3.5" />
            Coverage by country
          </div>
          <span className="bg-brand-blue/12 rounded-full px-2 py-0.5 text-[10px] font-semibold text-[#0a5dc2] dark:text-[#5aa6ff]">
            seoinsight.app
          </span>
        </div>

        {/* matrix */}
        <div className="flex flex-col gap-2 p-3">
          {countries.map((c, i) => (
            <m.div
              key={c.name}
              initial={{ opacity: 0, x: -8 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.12 + i * 0.1, duration: 0.35 }}
              className="flex items-center gap-2"
            >
              <span className="text-ink-2 w-20 truncate text-[11px] font-medium">
                <span className="mr-1">{c.flag}</span>
                {c.name}
              </span>
              <div className="flex flex-1 gap-1">
                {c.cells.map((v, j) => (
                  <span
                    key={j}
                    className={cn("h-4 flex-1 rounded-[3px]", intensity[v])}
                  />
                ))}
              </div>
              <span className="text-brand-success flex w-8 items-center justify-end gap-0.5 text-[10px] font-bold tabular-nums">
                {c.wins > 0 && <IconTrendingUp className="size-3" />}
                {c.wins}
              </span>
            </m.div>
          ))}
        </div>

        {/* footer note */}
        <div className="border-hairline flex items-center justify-between border-t px-4 py-2.5">
          <p className="text-ink-4 text-[10.5px]">Quick-wins by country</p>
          <p className="text-gradient-brand text-sm font-bold">4 properties</p>
        </div>
      </m.div>
    </div>
  );
};