"use client";

import Link from "next/link";
import { useState } from "react";
import { Avatar } from "@/components/ui/Avatar";
import { CellarChoiceBadge } from "@/components/labels/CellarChoiceBadge";

export interface LabelCardData {
  id: string;
  fileUrl: string;
  brandName: string;
  brandSlug: string;
  blendName: string;
  blendSlug: string;
  uploaderUsername: string;
  uploaderAvatarUrl: string | null;
  uploaderHighestBadgeName: string | null;
  thumbsUpCount: number;
  isCellarChoice: boolean;
  isRequestFulfillment: boolean;
}

function BadgeIcon({ name }: { name: string }) {
  return (
    <span title={name} aria-label={name} className="inline-flex text-gold">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M9 13.8L5 22l7-3.2L19 22l-4-8.2" />
        <circle cx="12" cy="8" r="6" />
      </svg>
    </span>
  );
}

export function LabelCard({ label }: { label: LabelCardData }) {
  const [previewOpen, setPreviewOpen] = useState(false);

  return (
    <>
      <div className="group relative">
        <Link href={`/labels/${label.id}`} className="block">
          <div className="relative">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={label.fileUrl}
              alt={`${label.brandName} ${label.blendName} label`}
              className="aspect-square w-full rounded-full border border-charcoal/10 object-cover"
            />
            <button
              type="button"
              aria-label="Quick preview"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                setPreviewOpen(true);
              }}
              className="absolute inset-0 flex items-center justify-center rounded-full bg-black/0 opacity-0 transition-opacity group-hover:bg-black/30 group-hover:opacity-100 focus-visible:opacity-100"
            >
              <span className="rounded-full bg-warm-white px-3 py-1 text-xs font-medium text-charcoal shadow">
                Quick preview
              </span>
            </button>
          </div>

          <div className="mt-3 text-center">
            <p className="font-heading text-lg font-semibold text-charcoal">
              {label.brandName}
            </p>
            <p className="text-sm text-charcoal/60">{label.blendName}</p>
            <div className="mt-1 flex items-center justify-center gap-1.5 text-xs text-charcoal/50">
              <span>by {label.uploaderUsername}</span>
              {label.uploaderHighestBadgeName && (
                <BadgeIcon name={label.uploaderHighestBadgeName} />
              )}
              <span aria-hidden="true">&middot;</span>
              <span>{label.thumbsUpCount} &#9650;</span>
            </div>
            {label.isCellarChoice && (
              <div className="mt-2 flex justify-center">
                <CellarChoiceBadge />
              </div>
            )}
            {label.isRequestFulfillment && (
              <p className="mt-1 text-xs text-charcoal/50">
                Made by request
              </p>
            )}
          </div>
        </Link>
      </div>

      {previewOpen && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-6"
          onClick={() => setPreviewOpen(false)}
        >
          <div
            className="max-w-sm rounded-lg bg-warm-white p-6 text-center shadow-xl"
            onClick={(e) => e.stopPropagation()}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={label.fileUrl}
              alt={`${label.brandName} ${label.blendName} label`}
              className="mx-auto h-64 w-64 rounded-full border border-charcoal/10 object-cover"
            />
            <p className="mt-4 font-heading text-xl font-semibold text-charcoal">
              {label.brandName} - {label.blendName}
            </p>
            <div className="mt-1 flex items-center justify-center gap-2 text-sm text-charcoal/60">
              <Avatar
                username={label.uploaderUsername}
                avatarUrl={label.uploaderAvatarUrl}
                size="sm"
              />
              <span>by {label.uploaderUsername}</span>
            </div>
            <div className="mt-5 flex justify-center gap-3">
              <Link
                href={`/labels/${label.id}`}
                className="rounded-full bg-terracotta px-5 py-2 text-sm font-medium text-white hover:bg-terracotta/90"
              >
                View label
              </Link>
              <button
                type="button"
                onClick={() => setPreviewOpen(false)}
                className="rounded-full border border-charcoal/20 px-5 py-2 text-sm font-medium text-charcoal hover:bg-charcoal/5"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}