"use client";

import { Upload } from "lucide-react";
import { ChangeEvent, DragEvent, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const MAX_BYTES = 2 * 1024 * 1024;
const ACCEPT = ["image/png", "image/jpeg", "image/webp", "image/svg+xml"];

interface LogoUploadProps {
  logoDataUrl: string | null;
  logoFileName: string | null;
  onLogoChange: (data: { logoDataUrl: string | null; logoFileName: string | null }) => void;
}

export function LogoUpload({ logoDataUrl, logoFileName, onLogoChange }: LogoUploadProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [error, setError] = useState("");
  const [dragOver, setDragOver] = useState(false);

  const processFile = (file: File) => {
    setError("");
    if (!ACCEPT.includes(file.type)) {
      setError("Use PNG or JPG for the most accurate logo on banners (WebP/SVG also accepted).");
      return;
    }
    if (file.size > MAX_BYTES) {
      setError("File must be under 2 MB.");
      return;
    }

    const reader = new FileReader();
    reader.onload = () => {
      onLogoChange({
        logoDataUrl: typeof reader.result === "string" ? reader.result : null,
        logoFileName: file.name,
      });
    };
    reader.onerror = () => setError("Could not read file.");
    reader.readAsDataURL(file);
  };

  const onFileInput = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) processFile(file);
    e.target.value = "";
  };

  const onDrop = (e: DragEvent) => {
    e.preventDefault();
    setDragOver(false);
    const file = e.dataTransfer.files?.[0];
    if (file) processFile(file);
  };

  return (
    <div className="flex w-full flex-col items-center">
      <input
        ref={inputRef}
        type="file"
        accept={ACCEPT.join(",")}
        className="hidden"
        onChange={onFileInput}
      />

      <button
        type="button"
        onClick={() => inputRef.current?.click()}
        onDragOver={(e) => {
          e.preventDefault();
          setDragOver(true);
        }}
        onDragLeave={() => setDragOver(false)}
        onDrop={onDrop}
        className={cn(
          "flex w-full flex-col items-center justify-center rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors",
          dragOver
            ? "border-brand-600 bg-brand-50/50"
            : "border-gray-200 bg-gray-50/50 hover:border-gray-300",
        )}
      >
        {logoDataUrl ? (
          <img
            src={logoDataUrl}
            alt="Company logo preview"
            className="mb-3 h-32 w-32 rounded-lg object-contain"
          />
        ) : (
          <Upload className="mb-3 h-8 w-8 text-gray-400" />
        )}
        <p className="text-sm text-gray-600">
          {logoDataUrl ? logoFileName ?? "Logo uploaded" : "Drag & drop or click to upload"}
        </p>
        <p className="mt-1 text-xs text-gray-400">PNG, JPG, WebP, SVG · max 2 MB</p>
      </button>

      {error && <p className="mt-2 text-sm text-red-600">{error}</p>}

      <div className="mt-4 flex gap-2">
        <Button
          type="button"
          variant="secondary"
          onClick={() => inputRef.current?.click()}
        >
          {logoDataUrl ? "Change Logo" : "Upload Logo"}
        </Button>
        {logoDataUrl && (
          <Button
            type="button"
            variant="ghost"
            onClick={() => onLogoChange({ logoDataUrl: null, logoFileName: null })}
          >
            Remove
          </Button>
        )}
      </div>
    </div>
  );
}