import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import type { ResourceEmailEditorDialogProps } from "./types";

const EDITOR_CONTENT_TYPES = [
  "Columns",
  "Button",
  "Divider",
  "Heading",
  "Paragraph",
  "Image",
  "Social",
  "Menu",
  "HTML",
] as const;

/**
 * @deprecated Batch-send era — the Resource Center email editor is superseded
 * by the Email Marketing Hub editor (template editor with subject/category and
 * merge-tag reference). Removed at the next major.
 */
export function ResourceEmailEditorDialog({
  open,
  onClose,
  onSave,
  editorSlot,
}: ResourceEmailEditorDialogProps) {
  const [templateName, setTemplateName] = useState("");

  function handleSave() {
    onSave(templateName);
  }

  function handleClose() {
    setTemplateName("");
    onClose();
  }

  return (
    <Dialog open={open} onOpenChange={(v) => !v && handleClose()}>
      <DialogContent
        size="4xl"
        className="flex flex-col gap-0 p-0 overflow-hidden h-[90vh]"
      >
        {/* Template name header */}
        <div className="shrink-0 border-b border-border px-6 py-4">
          <p className="text-label-small text-muted-foreground mb-1">
            Template Name
          </p>
          <Input
            placeholder="Enter template name"
            value={templateName}
            onChange={(e) => setTemplateName(e.target.value)}
            className="border-none shadow-none px-0 text-body-medium h-auto focus-visible:ring-0 bg-transparent"
          />
        </div>

        {/* Editor area */}
        <div className="flex-1 overflow-hidden">
          {editorSlot ?? <EditorPlaceholder />}
        </div>

        {/* Footer */}
        <div className="shrink-0 flex items-center justify-between border-t border-border px-6 py-4">
          <Button variant="outline" onClick={handleClose}>
            Back
          </Button>
          <Button variant="default" onClick={handleSave}>
            Save Email
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}

/** Shown when no editorSlot is provided (e.g. in Storybook). */
function EditorPlaceholder() {
  return (
    <div className="flex h-full">
      {/* Canvas */}
      <div className="flex flex-1 items-center justify-center bg-[#f4f4f4]">
        <div className="max-w-[500px] w-full border-2 border-dashed border-[#9ecbf0] bg-[#e8f4ff] px-16 py-10 text-center">
          <p className="text-body-small text-[#5c9fd8]">
            No content here. Drag content from right.
          </p>
        </div>
      </div>

      {/* Content sidebar */}
      <div className="w-[280px] shrink-0 flex flex-col border-l border-border bg-background">
        <div className="flex border-b border-border">
          {(["Content", "Blocks", "Body"] as const).map((tab, i) => (
            <button
              key={tab}
              type="button"
              className={cn(
                "flex flex-1 flex-col items-center gap-1 py-3 text-caption",
                i === 0
                  ? "text-foreground border-b-2 border-foreground"
                  : "text-muted-foreground",
              )}
            >
              {tab}
            </button>
          ))}
        </div>

        <div className="grid grid-cols-3 gap-2 p-3">
          {EDITOR_CONTENT_TYPES.map((item) => (
            <div
              key={item}
              className="flex flex-col items-center gap-1.5 border border-border p-2 hover:bg-muted transition-colors cursor-grab"
            >
              <div className="size-6 bg-foreground/10 flex items-center justify-center">
                <span className="text-[10px] text-foreground/40">▤</span>
              </div>
              <span className="text-[11px] text-foreground leading-none text-center">
                {item}
              </span>
            </div>
          ))}
        </div>

        <div className="mt-auto border-t border-border py-2.5 text-center">
          <span className="text-caption text-muted-foreground">
            ⚡ by Unlayer Editor
          </span>
        </div>
      </div>
    </div>
  );
}