import React from "react";
import { ArrowLeft, Info } from "lucide-react";
import { Button } from "../../ui/button";

export const ELEMENT_LIBRARY_INSTRUCTION_SECTIONS = [
  {
    title: "Entered on This Template",
    body:
      "When you add these items to your template, the text will be the same on all labels that use this template.",
  },
  {
    title: "Entered on Each Label",
    body:
      "When you add these items to your template, the text will be different on each of the labels that use this template. For example, if you use Label Name as one of your items, one label may have the text 'Chicken' and another 'Pork.'",
  },
  {
    title: "Automatic",
    body:
      "When you add these items to your template, the printed text will be automatically changed according to various factors (location, employee, date, time, product, etc.).",
  },
  {
    title: "Entered When Printing Label",
    body:
      "The person printing the label will use these items to add information to the label at the time of printing.",
  },
] as const;

export const ELEMENT_LIBRARY_INSTRUCTION_INTRO =
  "Click on an item above to add it to your template. Once an item has been placed into your template, there may be additional options for you to select.";

interface ElementsPanelInstructionPageProps {
  onClose: () => void;
}

/** 元素库说明：独立全屏页，由左侧 Instruction 链接进入 */
export function ElementsPanelInstructionPage({ onClose }: ElementsPanelInstructionPageProps) {
  return (
    <div
      className="flex min-h-0 flex-1 flex-col overflow-hidden bg-[#eef3fb]"
      style={{ flex: "1 1 0%", minHeight: 0 }}
    >
      <div className="flex shrink-0 items-center gap-2 border-b border-[#cfd9ea] bg-white px-4 py-2">
        <Button
          type="button"
          size="sm"
          variant="outline"
          className="h-8 shrink-0 text-xs"
          onClick={onClose}
        >
          <ArrowLeft className="mr-1 h-3.5 w-3.5" />
          Back to editor
        </Button>
        <h1 className="text-sm font-semibold text-gray-800">Instruction</h1>
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto p-4">
        <div className="mx-auto max-w-2xl rounded-lg border border-[#c2d1e8] bg-white p-4 shadow-sm">
          <div className="flex gap-3">
            <Info className="mt-0.5 h-5 w-5 shrink-0 text-blue-600" aria-hidden />
            <div className="min-w-0 space-y-4 text-sm leading-relaxed">
              <p className="text-gray-700">{ELEMENT_LIBRARY_INSTRUCTION_INTRO}</p>
              {ELEMENT_LIBRARY_INSTRUCTION_SECTIONS.map((section) => (
                <div key={section.title}>
                  <p className="text-base font-bold text-gray-900 underline underline-offset-2">
                    {section.title}
                  </p>
                  <p className="mt-1.5 text-sm font-normal text-gray-600">{section.body}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}