"use client";

import Link from "next/link";
import { useLang } from "@/context/LanguageContext";
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
import { IncrelogLogo } from "@/components/IncrelogLogo";
import { Button } from "@/components/ui";
import { getGuide } from "@/lib/guide-data";
import { IconArrowRight, IconCheck, IconInfo, IconPlay } from "@/components/icons";

/* User Guide — an info-graphic walkthrough of every module: where to
   start, the full process to the end, and who can access it. Linked from
   the portal/member sidebars; AUTHORIZED ACCESS ONLY — src/middleware.ts
   redirects signed-out visitors to /login?redirect=/guide. */

export default function GuidePage() {
  const { t, locale } = useLang();
  const guide = getGuide(locale === "bn" ? "bn" : "en");

  return (
    <div className="ems-auth-wrapper ems-apply-page">
      <div className="container-fluid py-3">
        <div className="d-flex justify-content-between align-items-center py-2">
          <Link href="/" className="d-flex align-items-center gap-2 text-decoration-none">
            <IncrelogLogo size={34} />
            <h6 className="mb-0 f-w-800 text-dark">IncrelogEMS</h6>
          </Link>
          <LanguageSwitcher />
        </div>

        <div className="ems-apply-wrap">
          <div
            className="login-form card"
            style={{ width: "100%", maxWidth: 980, borderRadius: 12, border: "none", boxShadow: "0 10px 40px rgba(36,105,92,0.12)" }}
          >
            <div className="card-body p-3 p-md-4">
              {/* hero */}
              <div className="text-center mb-4">
                <span className="ems-guide-hero-icon">
                  <IconInfo className="svg-28" />
                </span>
                <h3 className="f-w-800 mb-1 mt-2">{t.guide.title}</h3>
                <h6 className="text-muted f-w-500">{t.guide.subtitle}</h6>
              </div>

              {/* accessibility legend */}
              <div className="ems-guide-legend mb-4">
                <p className="f-w-700 ems-fs-13 mb-2 ems-text-teal">{t.guide.accessibilityTitle}</p>
                <div className="d-flex flex-wrap gap-2">
                  {Object.entries(guide.roleLabels).map(([key, label]) => (
                    <span key={key} className="ems-guide-role">
                      {label}
                    </span>
                  ))}
                </div>
                <p className="ems-fs-11 text-muted mb-0 mt-2">{t.guide.accessibilityHint}</p>
              </div>

              {/* sections → modules */}
              {guide.sections.map((section) => (
                <div key={section.key} className="mb-4">
                  <div className="d-flex align-items-center gap-2 mb-3">
                    <span className="ems-guide-section-dot" />
                    <h5 className="f-w-800 mb-0">{section.title}</h5>
                  </div>

                  {section.modules.map((mod) => (
                    <div key={mod.key} className="ems-guide-module">
                      <div className="ems-guide-module-head">
                        <div className="min-w-0">
                          <h6 className="f-w-700 mb-1">{mod.title}</h6>
                          <p className="ems-fs-12 text-muted mb-0">{mod.summary}</p>
                        </div>
                        <div className="d-flex flex-wrap gap-1 justify-content-md-end flex-shrink-0">
                          {mod.roles.map((r) => (
                            <span key={r} className="ems-guide-role sm">
                              {guide.roleLabels[r]}
                            </span>
                          ))}
                        </div>
                      </div>

                      {/* info-graphic process timeline */}
                      <div className="ems-guide-flow">
                        <span className="ems-guide-chip start">
                          <IconPlay className="svg-12" />
                          <span className="ms-1">{t.guide.startLabel}</span>
                        </span>
                        <div className="ems-guide-steps">
                          {mod.steps.map((step, i) => (
                            <div key={i} className="ems-guide-step">
                              <span className="ems-guide-num">{i + 1}</span>
                              <div className="min-w-0">
                                <p className="f-w-700 ems-fs-13 mb-0">{step.title}</p>
                                <p className="ems-fs-12 text-muted mb-0">{step.text}</p>
                              </div>
                            </div>
                          ))}
                        </div>
                        <span className="ems-guide-chip done">
                          <IconCheck className="svg-12" />
                          <span className="ms-1">{t.guide.doneLabel}</span>
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              ))}

              <div className="text-center mt-4 d-flex justify-content-center gap-2 flex-wrap">
                <Link href="/apply">
                  <Button variant="secondary">
                    {t.applyPage.navLabel}
                    <IconArrowRight className="svg-14 ms-1" />
                  </Button>
                </Link>
                <Link href="/track">
                  <Button variant="secondary">{t.trackPage.title}</Button>
                </Link>
                <Link href="/login">
                  <Button>{t.common.login}</Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}