"use client";

import { useState } from "react";
import { ImageIcon, UploadCloud } from "lucide-react";

interface ImageUploadFieldProps {
  name: string;
  label: string;
  defaultImageUrl?: string | null;
  error?: string;
  required?: boolean;
}

export function ImageUploadField({
  name,
  label,
  defaultImageUrl,
  error,
  required,
}: ImageUploadFieldProps) {
  const [preview, setPreview] = useState<string | null>(
    defaultImageUrl ?? null
  );
  const [fileName, setFileName] = useState<string | null>(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      setPreview(URL.createObjectURL(file));
      setFileName(file.name);
    }
  };

  return (
    <div>
      <label className="mb-1.5 block text-[13px] font-semibold text-heading">
        {label}
        {required && !defaultImageUrl && (
          <span className="text-merah-ranata"> *</span>
        )}
      </label>

      <label
        htmlFor={name}
        className={`group relative flex items-center gap-4 rounded-xl border-2 border-dashed p-4 cursor-pointer transition-colors ${
          error
            ? "border-red-300 bg-red-50/50"
            : "border-gray-200 bg-bg-light hover:border-merah-ranata/40 hover:bg-red-50/30"
        }`}
      >
        <div className="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5">
          {preview ? (
            <img
              src={preview}
              alt="Preview"
              className="h-full w-full object-cover"
            />
          ) : (
            <ImageIcon className="h-7 w-7 text-gray-300" />
          )}
        </div>

        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-1.5 text-sm font-semibold text-merah-ranata">
            <UploadCloud className="h-4 w-4 shrink-0" />
            {preview ? "Ganti gambar" : "Klik untuk unggah gambar"}
          </div>
          <p className="mt-0.5 truncate text-xs text-muted">
            {fileName
              ? fileName
              : defaultImageUrl
                ? "Biarkan kosong kalau tidak ingin mengganti gambar."
                : "JPG, PNG, WebP, GIF, atau SVG — maksimal 5MB"}
          </p>
        </div>

        <input
          id={name}
          type="file"
          name={name}
          accept="image/*"
          required={required && !defaultImageUrl}
          onChange={handleChange}
          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
        />
      </label>

      {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
    </div>
  );
}