import Link from "next/link";
import { z } from "zod";
import { registerSection } from "./registry";
import { registerSchema } from "./schemas";
import { SectionIcon } from "./icons";

const LAYOUT = "contact_methods";

export const ContactMethodsSchema = z.object({
  eyebrow: z.string().default(""),
  title_lines: z.array(z.string()).default([]),
  methods: z
    .array(
      z.object({
        tone: z.enum(["default", "green", "sand"]).default("default"),
        icon: z.string().default(""),
        title: z.string().default(""),
        value: z.string().default(""),
        href: z.string().default("#"),
      }),
    )
    .default([]),
  info_card: z
    .object({
      title: z.string().default(""),
      body: z.string().default(""),
    })
    .optional(),
});

export type ContactMethodsData = z.infer<typeof ContactMethodsSchema>;

export function ContactMethods({ data }: { data: ContactMethodsData }) {
  return (
    <section className="sec" data-screen-label="Contact Methods">
      <div className="wrap" style={{ maxWidth: 720 }}>
      {data.eyebrow ? (
        <span className="eyebrow">
          <span className="pip" />
          {data.eyebrow}
        </span>
      ) : null}
      {data.title_lines.length > 0 ? (
        <h2 className="h-section" style={{ fontSize: 32, margin: "8px 0 20px" }}>
          {data.title_lines.map((line, i) => (
            <span
              key={i}
              dangerouslySetInnerHTML={{ __html: line + (i < data.title_lines.length - 1 ? "<br/>" : "") }}
            />
          ))}
        </h2>
      ) : null}
      <div className="methods">
        {data.methods.map((method, i) => {
          const className = method.tone === "default" ? "method" : `method ${method.tone}`;
          const isExternal = method.href.startsWith("http");
          const isInternal = method.href.startsWith("/") && !method.href.startsWith("//");
          const inner = (
            <>
              <span className="ic">
                <SectionIcon name={method.icon} size={20} />
              </span>
              <div>
                <div className="ttl">{method.title}</div>
                <div className="v" style={method.icon === "map-pin" ? { direction: "rtl", textAlign: "right" } : undefined}>
                  {method.value}
                </div>
              </div>
            </>
          );
          if (isInternal) {
            return (
              <Link key={i} className={className} href={method.href}>
                {inner}
              </Link>
            );
          }
          return (
            <a
              key={i}
              className={className}
              href={method.href}
              target={isExternal ? "_blank" : undefined}
              rel={isExternal ? "noopener noreferrer" : undefined}
            >
              {inner}
            </a>
          );
        })}
      </div>
      {data.info_card ? (
        <div className="info-card">
          {data.info_card.title ? <h3>{data.info_card.title}</h3> : null}
          {data.info_card.body ? <p>{data.info_card.body}</p> : null}
        </div>
      ) : null}
      </div>
    </section>
  );
}

registerSection<ContactMethodsData>(LAYOUT, ContactMethods);
registerSchema(LAYOUT, ContactMethodsSchema);