import { useRef } from "react";
import { Button } from "@/components/ui/button";
import type { LogoPosition } from "@/lib/types";

const LOGO_POSITIONS: { value: LogoPosition; label: string }[] = [
  { value: "top_right", label: "Top right" },
  { value: "top_left", label: "Top left" },
  { value: "bottom_right", label: "Bottom right" },
  { value: "bottom_left", label: "Bottom left" },
];

interface LogoEditorProps {
  logo: string | null;
  logoPosition: LogoPosition;
  logoOpacity: number;
  onLogoChange: (logo: string | null) => void;
  onPositionChange: (position: LogoPosition) => void;
  onOpacityChange: (opacity: number) => void;
}

export function LogoEditor({
  logo,
  logoPosition,
  logoOpacity,
  onLogoChange,
  onPositionChange,
  onOpacityChange,
}: LogoEditorProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      const result = ev.target?.result;
      if (typeof result === "string") onLogoChange(result);
    };
    reader.readAsDataURL(file);
    e.target.value = "";
  };

  return (
    <div className="space-y-3 rounded-md border border-zinc-700/50 bg-zinc-800/50 p-3">
      <div className="flex gap-2">
        <Button
          type="button"
          variant="outline"
          size="xs"
          className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
          onClick={() => fileInputRef.current?.click()}
        >
          Upload image
        </Button>
        {logo && (
          <Button
            type="button"
            variant="ghost"
            size="xs"
            className="text-zinc-500 hover:text-red-400"
            onClick={() => onLogoChange(null)}
          >
            Clear
          </Button>
        )}
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          className="hidden"
          onChange={handleFile}
        />
      </div>

      <div className="space-y-1.5">
        <label className="block text-xs font-medium text-zinc-400">
          URL or SVG
        </label>
        <textarea
          rows={2}
          value={logo ?? ""}
          onChange={(e) => onLogoChange(e.target.value || null)}
          placeholder="https://example.com/logo.png or <svg>…</svg>"
          className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
        />
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div className="space-y-1.5">
          <label className="block text-xs font-medium text-zinc-400">
            Position
          </label>
          <select
            value={logoPosition}
            onChange={(e) => onPositionChange(e.target.value as LogoPosition)}
            className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none"
          >
            {LOGO_POSITIONS.map((p) => (
              <option key={p.value} value={p.value}>
                {p.label}
              </option>
            ))}
          </select>
        </div>

        <div className="space-y-1.5">
          <label className="block text-xs font-medium text-zinc-400">
            Opacity ({logoOpacity}%)
          </label>
          <input
            type="range"
            min={0}
            max={100}
            value={logoOpacity}
            onChange={(e) => onOpacityChange(Number(e.target.value))}
            className="w-full accent-zinc-400"
          />
        </div>
      </div>

      {logo && (
        <div className="flex items-center justify-center rounded-md border border-zinc-700/50 bg-zinc-900 p-2">
          {logo.trimStart().startsWith("<") ? (
            <div
              dangerouslySetInnerHTML={{ __html: logo }}
              className="h-10 w-auto"
              style={{ opacity: logoOpacity / 100 }}
            />
          ) : (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={logo}
              alt="Logo preview"
              className="h-10 w-auto object-contain"
              style={{ opacity: logoOpacity / 100 }}
            />
          )}
        </div>
      )}
    </div>
  );
}