"use client";

import { Button, Drawer, Image, Segmented, Tooltip, Typography } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";
import { useState } from "react";
import type { Guide } from "@/lib/guides/types";

/**
 * The "i" button beside a page title. Opens a side drawer with a step-by-step
 * guide: each step has a short instruction, an annotated screenshot where it
 * helps, and a link to the right page. A guide can also carry a short
 * walkthrough video. Content lives in lib/guides/*.ts, not in the page.
 */
export function PageGuide({ guides, label = "Page guide", defaultKey }: { guides: Guide[]; label?: string; defaultKey?: string }) {
  const [isOpen, setIsOpen] = useState(false);
  const [pickedKey, setPickedKey] = useState<string | undefined>();
  const activeKey = pickedKey ?? defaultKey ?? guides[0]?.key;
  const guide = guides.find((g) => g.key === activeKey) ?? guides[0];

  if (!guide) return null;

  return (
    <>
      <Tooltip title={label}>
        <Button
          shape="circle"
          size="small"
          icon={<InfoCircleOutlined />}
          aria-label={label}
          onClick={() => {
            setPickedKey(undefined);
            setIsOpen(true);
          }}
          className="dms_page_guide_btn"
        />
      </Tooltip>
      <Drawer
        title={label}
        open={isOpen}
        onClose={() => setIsOpen(false)}
        size={760}
        destroyOnHidden
        className="dms_page_guide_drawer"
        footer={
          <Button onClick={() => setIsOpen(false)} className="dms_page_guide_close_btn">
            Close
          </Button>
        }
      >
        <div className="flex flex-col gap-5">
          {guides.length > 1 && (
            <Segmented
              block
              value={guide.key}
              onChange={(value) => setPickedKey(String(value))}
              options={guides.map((g) => ({ value: g.key, label: g.title }))}
              className="dms_page_guide_switch"
            />
          )}

          <div>
            <Typography.Title level={4} style={{ marginTop: 0 }}>
              {guide.title}
            </Typography.Title>
            <Typography.Paragraph type="secondary" style={{ marginBottom: 0 }}>
              {guide.summary}
            </Typography.Paragraph>
          </div>

          {guide.video && (
            <div className="flex flex-col gap-1 dms_page_guide_video">
              <video
                key={guide.video.src}
                controls
                preload="metadata"
                src={guide.video.src}
                poster={guide.video.poster}
                className="w-full rounded-lg border"
                style={{ borderColor: "var(--dms-border)" }}
              />
              <Typography.Text type="secondary" className="text-xs">
                {guide.video.caption}
              </Typography.Text>
            </div>
          )}

          <ol className="flex flex-col gap-5 list-none p-0 m-0">
            {guide.steps.map((step, index) => (
              <li key={step.title} className="flex gap-3 dms_page_guide_step">
                <span
                  className="shrink-0 flex items-center justify-center rounded-full font-semibold text-white"
                  style={{ width: 28, height: 28, background: "var(--dms-accent)" }}
                >
                  {index + 1}
                </span>
                <div className="flex flex-col gap-2 min-w-0 flex-1">
                  <Typography.Text strong>{step.title}</Typography.Text>
                  <Typography.Text>{step.body}</Typography.Text>
                  {step.image && (
                    <Image
                      src={step.image}
                      alt={step.imageAlt ?? step.title}
                      className="rounded-lg"
                      style={{ border: "1px solid var(--dms-border)", maxWidth: "100%" }}
                    />
                  )}
                  {step.link && (
                    <a href={step.link.href} target="_blank" rel="noopener noreferrer" className="w-fit">
                      {step.link.label} &#8599;
                    </a>
                  )}
                </div>
              </li>
            ))}
          </ol>
        </div>
      </Drawer>
    </>
  );
}