"use client";

import { useTranslations } from "next-intl";
import {
  BookOpen,
  Building2,
  GitBranch,
  HelpCircle,
  MapPin,
  MonitorPlay,
  Shield,
  UserCheck,
  Users,
  VenetianMask,
} from "lucide-react";

type HelpScope = "admin" | "business";

const ADMIN_ICONS: Record<string, React.ReactNode> = {
  gettingStarted: <BookOpen className="h-4 w-4" />,
  accountTypes: <HelpCircle className="h-4 w-4" />,
  employees: <UserCheck className="h-4 w-4" />,
  users: <Users className="h-4 w-4" />,
  businesses: <Building2 className="h-4 w-4" />,
  roles: <Shield className="h-4 w-4" />,
  impersonation: <VenetianMask className="h-4 w-4" />,
};

const BUSINESS_ICONS: Record<string, React.ReactNode> = {
  gettingStarted: <BookOpen className="h-4 w-4" />,
  overview: <BookOpen className="h-4 w-4" />,
  menuBoards: <MonitorPlay className="h-4 w-4" />,
  locations: <MapPin className="h-4 w-4" />,
  franchises: <GitBranch className="h-4 w-4" />,
  staff: <Users className="h-4 w-4" />,
  roles: <Shield className="h-4 w-4" />,
  support: <HelpCircle className="h-4 w-4" />,
};

interface HelpManualProps {
  scope: HelpScope;
  sectionIds: readonly string[];
}

function asStringArray(value: unknown): string[] {
  if (!Array.isArray(value)) return [];
  return value.filter((item): item is string => typeof item === "string");
}

export default function HelpManual({ scope, sectionIds }: HelpManualProps) {
  const t = useTranslations(`help.${scope}`);

  const icons = scope === "admin" ? ADMIN_ICONS : BUSINESS_ICONS;

  return (
    <div className="space-y-6">
      <div className="relative overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--bg)]/50 p-5 sm:p-6">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_0%_0%,var(--accent-muted),transparent_55%)]" />
        <div className="relative">
          <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--bg-elevated)] px-2.5 py-1 text-[11px] font-medium text-[var(--text-muted)]">
            <BookOpen className="h-3.5 w-3.5 text-[var(--accent)]" />
            {t("badge")}
          </div>
          <h2 className="text-lg font-semibold tracking-tight sm:text-xl">{t("introTitle")}</h2>
          <p className="mt-1.5 max-w-2xl text-sm leading-relaxed text-[var(--text-muted)]">
            {t("introBody")}
          </p>
        </div>
      </div>

      <div>
        <p className="mb-3 text-[11px] font-semibold uppercase tracking-widest text-[var(--text-faint)]">
          {t("quickNav")}
        </p>
        <div className="flex flex-wrap gap-2">
          {sectionIds.map((id) => (
            <a
              key={id}
              href={`#help-${id}`}
              className="inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-[var(--border)] bg-[var(--bg)] px-3 py-1.5 text-xs font-medium text-[var(--text-muted)] transition-colors hover:border-[var(--accent)]/35 hover:text-[var(--text)]"
            >
              {icons[id]}
              {t(`sections.${id}.title`)}
            </a>
          ))}
        </div>
      </div>

      <div className="space-y-4">
        {sectionIds.map((id) => {
          const steps = asStringArray(t.raw(`sections.${id}.steps`));
          const tips = asStringArray(t.raw(`sections.${id}.tips`));

          return (
            <section
              key={id}
              id={`help-${id}`}
              className="scroll-mt-24 rounded-2xl border border-[var(--border)] bg-[var(--bg)]/40 p-4 sm:p-5"
            >
              <div className="flex items-start gap-3">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--accent-muted)] text-[var(--accent)]">
                  {icons[id]}
                </div>
                <div className="min-w-0 flex-1">
                  <h3 className="text-base font-semibold text-[var(--text)]">
                    {t(`sections.${id}.title`)}
                  </h3>
                  <p className="mt-1 text-sm leading-relaxed text-[var(--text-muted)]">
                    {t(`sections.${id}.summary`)}
                  </p>
                </div>
              </div>

              {steps.length > 0 && (
                <ol className="mt-4 space-y-2 ps-1">
                  {steps.map((step, index) => (
                    <li
                      key={index}
                      className="flex gap-3 text-sm leading-relaxed text-[var(--text-muted)]"
                    >
                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--accent-muted)] text-[11px] font-semibold text-[var(--accent)]">
                        {index + 1}
                      </span>
                      <span className="pt-0.5">{step}</span>
                    </li>
                  ))}
                </ol>
              )}

              {tips.length > 0 && (
                <div className="mt-4 rounded-xl border border-amber-500/20 bg-amber-500/5 p-3.5">
                  <p className="text-[11px] font-semibold uppercase tracking-widest text-amber-400/90">
                    {t("tipsLabel")}
                  </p>
                  <ul className="mt-2 space-y-1.5">
                    {tips.map((tip, index) => (
                      <li
                        key={index}
                        className="flex gap-2 text-sm leading-relaxed text-[var(--text-muted)]"
                      >
                        <span className="text-amber-400/80" aria-hidden>
                          •
                        </span>
                        <span>{tip}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </section>
          );
        })}
      </div>
    </div>
  );
}