import * as React from "react";
import { UploadIcon } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

/**
 * UploadCard — WealthX DS
 *
 * A dashed-border upload zone used in forms that accept file input.
 * Comes in two sizes:
 *   - `sm` — compact, fixed max-width (e.g. logo / photo uploads)
 *   - `lg` — full-width, taller drop zone (e.g. bulk CSV upload)
 *
 * WealthX overrides:
 *   - No border-radius — sharp corners per WealthX DS
 */

const uploadCardVariants = cva(
  [
    "flex flex-col items-center justify-center gap-2",
    "border border-dashed border-border",
    "cursor-pointer text-muted-foreground",
    "hover:bg-muted/50 bg-muted/20 transition-colors",
  ],
  {
    variants: {
      size: {
        sm: "w-[200px] py-4 px-3",
        lg: "w-full py-8 px-6",
      },
    },
    defaultVariants: {
      size: "sm",
    },
  },
);

export type UploadCardProps = React.ComponentProps<"label"> &
  VariantProps<typeof uploadCardVariants> & {
    /** Label text shown below the upload icon */
    label?: string;
    /** Helper text shown below the label */
    description?: string;
    /** File types to accept, passed to the hidden <input> */
    accept?: string;
    /** Called when the user selects a file */
    onFileChange?: (file: File | null) => void;
  };

function UploadCard({
  label = "Upload image",
  description,
  accept = ".png,.jpg,.jpeg",
  size,
  onFileChange,
  className,
  ...props
}: UploadCardProps) {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onFileChange?.(e.target.files?.[0] ?? null);
  };

  return (
    <label
      className={cn(uploadCardVariants({ size }), className)}
      data-slot="upload-card"
      data-size={size ?? "sm"}
      {...props}
    >
      <UploadIcon
        className={cn("text-primary", size === "lg" ? "size-6" : "size-4")}
      />
      <span
        className={cn("font-medium", size === "lg" ? "text-sm" : "text-xs")}
      >
        {label}
      </span>
      {description && (
        <p
          className={cn(
            "text-center leading-relaxed",
            size === "lg" ? "text-sm" : "text-xs",
          )}
        >
          {description}
        </p>
      )}
      <input
        type="file"
        accept={accept}
        className="sr-only"
        onChange={handleChange}
      />
    </label>
  );
}

export { UploadCard, uploadCardVariants };