"use client";

import * as React from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";

// Types
export interface CollapsiblePreviewItem {
  id: string;
  title: string;
  image: string;
  [key: string]: any;
}

// Context
interface CollapsiblePreviewContextValue {
  items: CollapsiblePreviewItem[];
  visibleItems: CollapsiblePreviewItem[];
  previewItems: CollapsiblePreviewItem[];
  isExpanded: boolean;
  toggleExpand: () => void;
  isExpandable: boolean;
  initialVisibleCount: number;
  hasMoreItems: boolean;
  seeMoreUrl?: string;
  seeMoreText: string;
}

const CollapsiblePreviewContext = React.createContext<CollapsiblePreviewContextValue | undefined>(undefined);

function useCollapsiblePreview() {
  const context = React.useContext(CollapsiblePreviewContext);

  if (!context) {
    throw new Error("useCollapsiblePreview must be used within a CollapsiblePreview");
  }

  return context;
}

// Helper Components
function SeeMoreIcon() {
  return (
    <svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" className="-mr-0.5 w-2.5">
      <path d="M4.85355 0.146423L9.70711 4.99998L4.85355 9.85353L4.14645 9.14642L7.79289 5.49998H0V4.49998H7.79289L4.14645 0.85353L4.85355 0.146423Z"></path>
    </svg>
  );
}

// Main Components
interface CollapsiblePreviewProps {
  title?: string;
  items: CollapsiblePreviewItem[];
  initialVisibleCount?: number;
  seeMoreUrl?: string;
  seeMoreText?: string;
  children: React.ReactNode;
}

export function CollapsiblePreview({
  title,
  items,
  initialVisibleCount = 4,
  seeMoreUrl,
  seeMoreText = "See more",
  children,
}: CollapsiblePreviewProps) {
  const [isExpanded, setIsExpanded] = React.useState(false);

  // If seeMoreUrl is provided, the button will be a link instead of expanding content
  const isExpandable = !seeMoreUrl;

  // Determine which items to show
  const visibleItems = isExpanded ? items : items.slice(0, initialVisibleCount);

  // Items to show in the preview (next row)
  const previewItems = items.slice(initialVisibleCount, initialVisibleCount + 4);

  // Check if there are more items to show
  const hasMoreItems = items.length > initialVisibleCount;

  // Handle expand/collapse
  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
  };

  const value = {
    items,
    visibleItems,
    previewItems,
    isExpanded,
    toggleExpand,
    isExpandable,
    initialVisibleCount,
    hasMoreItems,
    seeMoreUrl,
    seeMoreText,
  };

  return (
    <CollapsiblePreviewContext.Provider value={value}>
      <div className="w-full">
        {title && <h2 className="text-2xl font-semibold mb-6">{title}</h2>}
        {children}
      </div>
    </CollapsiblePreviewContext.Provider>
  );
}

interface CollapsiblePreviewGridProps {
  children: (item: any, index: number) => React.ReactNode;
  className?: string;
  columns?: {
    default: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
  };
  gap?: string;
}

export function CollapsiblePreviewGrid({
  children,
  className = "",
  columns = { default: 1, md: 2, lg: 4 },
  gap = "gap-6",
}: CollapsiblePreviewGridProps) {
  const { visibleItems } = useCollapsiblePreview();

  // Build grid classes based on columns config
  const gridCols = [
    `grid-cols-${columns.default}`,
    columns.sm && `sm:grid-cols-${columns.sm}`,
    columns.md && `md:grid-cols-${columns.md}`,
    columns.lg && `lg:grid-cols-${columns.lg}`,
    columns.xl && `xl:grid-cols-${columns.xl}`,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div className={`grid ${gridCols} ${gap} mb-6 ${className}`}>
      {visibleItems.map((item, index) => children(item, index))}
    </div>
  );
}

interface CollapsiblePreviewMoreProps {
  className?: string;
  buttonClassName?: string;
  gradientClassName?: string;
  renderButton?: (props: {
    isExpanded: boolean;
    toggleExpand: () => void;
    seeMoreText: string;
    seeMoreUrl?: string;
  }) => React.ReactNode;
  renderPreview?: (item: any, index: number) => React.ReactNode;
  previewHeight?: string;
}

export function CollapsiblePreviewMore({
  className = "",
  buttonClassName = "pointer-events-auto gap-2 inline-flex justify-center rounded-full px-4 py-2 text-sm font-semibold bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
  gradientClassName = "pointer-events-none absolute inset-x-0 bottom-0 z-10 flex h-40 items-end justify-center bg-gradient-to-t from-background to-transparent pb-8",
  renderButton,
  renderPreview,
  previewHeight = "120px",
}: CollapsiblePreviewMoreProps) {
  const { previewItems, isExpanded, toggleExpand, isExpandable, hasMoreItems, seeMoreUrl, seeMoreText } =
    useCollapsiblePreview();

  // Don't render anything if there are no more items or if expanded
  if (!hasMoreItems || (isExpanded && isExpandable)) {
    return null;
  }

  // Default button renderer
  const defaultButtonRenderer = () => {
    if (isExpandable) {
      return (
        <Button onClick={toggleExpand} className={buttonClassName}>
          {seeMoreText}
          <SeeMoreIcon />
        </Button>
      );
    } else {
      return (
        <Link href={seeMoreUrl || "#"} className={buttonClassName}>
          {seeMoreText}
          <SeeMoreIcon />
        </Link>
      );
    }
  };

  // Default preview renderer
  const defaultPreviewRenderer = (item: any, index: number) => (
    <div key={item.id} className="flex flex-col items-center">
      <div className="relative w-full aspect-[4/3] mb-3 rounded-lg overflow-hidden border border-border">
        {/* Browser-like header */}
        <div className="absolute top-0 left-0 right-0 h-6 bg-muted flex items-center px-2 z-10">
          <div className="flex space-x-1.5">
            <div className="w-2 h-2 rounded-full bg-red-400"></div>
            <div className="w-2 h-2 rounded-full bg-yellow-400"></div>
            <div className="w-2 h-2 rounded-full bg-green-400"></div>
          </div>
        </div>

        {/* Image with gradient overlay */}
        <div className="absolute inset-0 pt-6">
          <div className="relative w-full h-full">
            <img
              src={item.image || "/placeholder.svg"}
              alt={item.title}
              className="w-full h-full object-cover opacity-70"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/20 to-background/40"></div>
          </div>
        </div>
      </div>
      <span className="text-sm text-muted-foreground">{item.title}</span>
    </div>
  );

  return (
    <div className={`relative ${className}`}>
      <div
        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 overflow-hidden"
        style={{ maxHeight: previewHeight }}
      >
        {previewItems.map((item, index) =>
          renderPreview ? renderPreview(item, index) : defaultPreviewRenderer(item, index)
        )}
      </div>

      {/* Gradient overlay with button */}
      <div className={gradientClassName}>
        {renderButton ? renderButton({ isExpanded, toggleExpand, seeMoreText, seeMoreUrl }) : defaultButtonRenderer()}
      </div>
    </div>
  );
}

interface CollapsiblePreviewLessProps {
  className?: string;
  buttonClassName?: string;
  buttonText?: string;
  renderButton?: (props: { toggleExpand: () => void }) => React.ReactNode;
}

export function CollapsiblePreviewLess({
  className = "flex justify-center mt-6",
  buttonClassName = "gap-2 inline-flex justify-center rounded-full px-4 py-2 text-sm font-semibold border-border hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
  buttonText = "See less",
  renderButton,
}: CollapsiblePreviewLessProps) {
  const { isExpanded, toggleExpand, isExpandable, hasMoreItems } = useCollapsiblePreview();

  // Only show if expanded, expandable, and has more items
  if (!isExpanded || !isExpandable || !hasMoreItems) {
    return null;
  }

  return (
    <div className={className}>
      {renderButton ?
        renderButton({ toggleExpand })
      : <Button onClick={toggleExpand} variant="outline" size="sm" className={buttonClassName}>
          {buttonText}
        </Button>
      }
    </div>
  );
}

// Export the hook for custom components
export { useCollapsiblePreview };