/**
 * GnVerificationCard — verification status panel.
 *
 * Figma: Characteristics Container.
 *
 * @typedef {Object} GnVerificationCardProps
 * @property {string} title
 * @property {string} [status='verified'] - verified | warning | danger
 * @property {string} [statusText='']
 * @property {Array<{label:string,icon?:string,checked?:boolean}>} [items=[]]
 * @property {string} [body='']
 * @property {string} [cta='']
 * @property {Function} [onCta]
 * @property {Object} [notice] - { title, text, action, onAction }
 * @property {string} [timestamp='']
 */

import { defineComponent, h } from "vue";
import { cx, iconNode } from "../utils.js";

export default defineComponent({
	name: "GnVerificationCard",
	inheritAttrs: false,
	props: {
		title: { type: String, required: true },
		status: { type: String, default: "verified" },
		statusText: { type: String, default: "" },
		items: { type: Array, default: () => [] },
		body: { type: String, default: "" },
		cta: { type: String, default: "" },
		notice: { type: Object, default: null },
		timestamp: { type: String, default: "" }
	},
	emits: ["cta", "notice-action"],
	setup(props, { attrs, slots, emit }) {
		const statusMap = {
			verified: "ph-check-circle",
			warning: "ph-warning-circle",
			danger: "ph-warning-circle"
		};

		return () => h("article", {
			...attrs,
			class: cx("verification-card", `verification-card--${props.status}`, attrs.class)
		}, [
			h("div", { class: "verification-card__header" }, [
				h("h3", { class: "verification-card__title" }, slots.title?.() || props.title),
				(props.statusText || slots.status) && h("span", { class: "verification-card__status" }, [
					iconNode(statusMap[props.status] || "ph-check-circle"),
					slots.status?.() || props.statusText
				])
			]),
			(props.items.length || slots.items) && h("ul", { class: "verification-card__list" }, [
				props.items.map(item => h("li", { class: "verification-card__item" }, [
					iconNode(item.icon || (item.checked !== false ? "ph-check-circle" : "ph-warning-circle")),
					item.label
				])),
				slots.items?.()
			]),
			(props.body || slots.body) && h("div", { class: "verification-card__body" }, slots.body?.() || props.body),
			(props.cta || slots.cta) && h("div", { class: "verification-card__cta" }, [
				h("button", {
					class: cx("btn", "btn-secondary", "btn-sm"),
					type: "button",
					onClick: () => emit("cta")
				}, slots.cta?.() || props.cta)
			]),
			(props.notice || slots.notice) && h("div", { class: "verification-card__notice" }, [
				props.notice?.title && h("h4", { class: "verification-card__notice-title" }, props.notice.title),
				props.notice?.text && h("p", { class: "verification-card__notice-text" }, props.notice.text),
				props.notice?.action && h("button", {
					class: "verification-card__notice-action",
					type: "button",
					onClick: () => emit("notice-action", props.notice)
				}, [
					props.notice.action,
					iconNode("ph-chevron-right")
				]),
				slots.notice?.()
			]),
			(props.timestamp || slots.timestamp) && h("footer", { class: "verification-card__footer" }, slots.timestamp?.() || props.timestamp)
		]);
	}
});