import React, { useState } from "react";
import { Download, Play } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ResourceModal } from "./resource-modal";
import type {
  ResourceVideoCardProps,
  ResourceEmailTemplateCardProps,
  ResourceDocumentCardProps,
} from "./types";

export function ResourceVideoCard({ video }: ResourceVideoCardProps) {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <>
      <button
        type="button"
        onClick={() => setModalOpen(true)}
        className="group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        {/* Thumbnail */}
        <div className="relative w-full overflow-hidden bg-muted aspect-video">
          {video.thumbnailUrl ? (
            <img
              src={video.thumbnailUrl}
              alt={video.title}
              className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center">
              <Play className="size-10 text-muted-foreground opacity-40" />
            </div>
          )}

          {/* Play overlay on hover */}
          <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
            <div className="flex size-12 items-center justify-center bg-background/90">
              <Play className="size-5 text-foreground" />
            </div>
          </div>

          {/* Duration badge */}
          {video.duration && (
            <span className="absolute bottom-2 right-2 bg-black/70 px-1.5 py-0.5 text-caption text-white">
              {video.duration}
            </span>
          )}
        </div>

        {/* Title */}
        <p className="text-body-medium font-semibold text-foreground leading-snug line-clamp-2">
          {video.title}
        </p>
      </button>

      <ResourceModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        title={video.title}
        videoUrl={video.videoUrl}
        tags={video.tags}
        attachments={video.attachments}
      />
    </>
  );
}

/**
 * @deprecated Batch-send era — the Resource Center no longer manages email
 * templates. Use the Email Marketing Hub template components instead
 * (EmailTemplateCard flow in the backoffice hub). Removed at the next major.
 */
export function ResourceEmailTemplateCard({
  template,
  onClick,
}: ResourceEmailTemplateCardProps) {
  if (template.isAddTemplate) {
    return (
      <button
        type="button"
        onClick={onClick}
        className={cn(
          "flex w-full flex-col items-center justify-center gap-3",
          "border-2 border-dashed border-border bg-muted/40",
          "aspect-video hover:border-primary hover:bg-muted/70 transition-colors",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        )}
      >
        <div className="flex size-10 items-center justify-center border-2 border-dashed border-muted-foreground/40">
          <span className="text-2xl text-muted-foreground/60">+</span>
        </div>
        <p className="text-body-small font-medium text-muted-foreground">
          Add Template
        </p>
      </button>
    );
  }

  return (
    <button
      type="button"
      onClick={onClick}
      className="group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
    >
      {/* Preview area */}
      <div className="relative w-full overflow-hidden border border-border bg-background aspect-video">
        {template.htmlContent ? (
          <iframe
            srcDoc={template.htmlContent}
            title={template.title}
            className="h-full w-full pointer-events-none"
            style={{
              transform: "scale(0.5)",
              transformOrigin: "top left",
              width: "200%",
              height: "200%",
            }}
            sandbox="allow-same-origin"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center bg-muted">
            <p className="text-caption text-muted-foreground">
              No preview available
            </p>
          </div>
        )}

        {/* Hover overlay */}
        <div className="absolute inset-0 flex items-center justify-center bg-foreground/60 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
          <span className="text-body-small font-medium text-white">
            Use Template
          </span>
        </div>
      </div>

      {/* Meta */}
      <div className="flex items-center justify-between gap-2">
        <p className="text-body-small font-medium text-foreground leading-snug line-clamp-1">
          {template.title}
        </p>
        {template.type && (
          <Badge variant="secondary" className="shrink-0">
            {template.type === "system" ? "System" : "Company"}
          </Badge>
        )}
      </div>
    </button>
  );
}

export function ResourceDocumentCard({
  document,
  onClick,
}: ResourceDocumentCardProps) {
  return (
    <div className="flex w-full flex-col gap-2">
      {/* PDF preview */}
      <button
        type="button"
        onClick={onClick}
        className="group relative w-full overflow-hidden border border-border bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aspect-video"
      >
        {document.pdfUrl ? (
          <iframe
            src={document.pdfUrl}
            title={document.title}
            className="h-full w-full pointer-events-none"
          />
        ) : document.thumbnailUrl ? (
          <img
            src={document.thumbnailUrl}
            alt={document.title}
            className="h-full w-full object-cover"
          />
        ) : (
          <div className="flex h-full w-full flex-col items-center justify-center gap-2">
            <div className="flex items-center justify-center bg-muted-foreground/10 p-4">
              <Download className="size-8 text-muted-foreground opacity-50" />
            </div>
            <span className="text-caption text-muted-foreground">
              {document.title}
            </span>
          </div>
        )}

        <div className="absolute inset-0 bg-foreground/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
      </button>

      {/* Footer: tags + download */}
      <div className="flex items-center justify-between gap-2">
        <div className="flex flex-col gap-1 min-w-0">
          <p className="text-body-small font-medium text-foreground leading-snug line-clamp-1">
            {document.title}
          </p>
          {document.tags && document.tags.length > 0 && (
            <div className="flex flex-wrap gap-1">
              {document.tags.map((tag) => (
                <Badge key={tag} variant="secondary">
                  {tag}
                </Badge>
              ))}
            </div>
          )}
        </div>
        {document.downloadUrl && (
          <a
            href={document.downloadUrl}
            download
            onClick={(e) => e.stopPropagation()}
            className="shrink-0"
            aria-label={`Download ${document.title}`}
          >
            <Button variant="outline" size="icon" className="size-8">
              <Download className="size-4" />
            </Button>
          </a>
        )}
      </div>
    </div>
  );
}