import type { WallpaperBundle, AppIconBundle } from "./WallpaperGeneratePanel";

function downloadPng(base64: string, filename: string) {
  const byteString = atob(base64);
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  const blob = new Blob([ab], { type: "image/png" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

interface WallpaperPreviewProps {
  bundle: WallpaperBundle | AppIconBundle;
}

export function WallpaperPreview({ bundle }: WallpaperPreviewProps) {
  if (!bundle) {
    return (
      <div className="flex flex-col items-center gap-2 py-8 text-center">
        <p className="text-xl font-semibold">No image yet</p>
        <p className="text-sm text-muted-foreground">
          Describe a scene or mood and pick a platform size to generate a ready-to-use image.
        </p>
      </div>
    );
  }

  if (bundle.type === "wallpaper-bundle") {
    const altText = bundle.prompt.slice(0, 100);
    const filename = `wallpaper-${bundle.platform}.png`;

    return (
      <div className="flex flex-col gap-3">
        <div className="flex items-center justify-center rounded-lg overflow-hidden bg-muted">
          <img
            src={`data:image/png;base64,${bundle.pngBase64}`}
            alt={altText}
            className="max-h-80 object-contain"
          />
        </div>
        <div className="flex items-center justify-between gap-3">
          <button
            type="button"
            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
            onClick={() => downloadPng(bundle.pngBase64, filename)}
          >
            Download PNG
          </button>
          <span className="text-xs font-mono text-muted-foreground">
            {bundle.width} × {bundle.height}
          </span>
        </div>
      </div>
    );
  }

  if (bundle.type === "app-icon-bundle") {
    return (
      <div className="flex flex-col gap-3">
        <p className="text-sm font-medium">App Icon sizes</p>
        <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5">
          {bundle.sizes.map(({ size, pngBase64 }) => (
            <div
              key={size}
              className="flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-3"
            >
              <img
                src={`data:image/png;base64,${pngBase64}`}
                alt={`App icon ${size}×${size}`}
                className="size-10 object-contain"
              />
              <span className="text-xs font-mono text-muted-foreground">
                {size} × {size}
              </span>
              <button
                type="button"
                className="text-xs text-primary underline underline-offset-2 hover:no-underline"
                onClick={() => downloadPng(pngBase64, `app-icon-${size}.png`)}
              >
                Download
              </button>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // Fallback empty state
  return (
    <div className="flex flex-col items-center gap-2 py-8 text-center">
      <p className="text-xl font-semibold">No image yet</p>
      <p className="text-sm text-muted-foreground">
        Describe a scene or mood and pick a platform size to generate a ready-to-use image.
      </p>
    </div>
  );
}
