import { For, Show, createMemo, createSignal, onMount } from "solid-js";
import { BTN_GHOST, BTN_PRIMARY, CARD } from "~/components/DashboardShell";
import { Camera, Scissors, GraduationCap, Code2, Clapperboard, PenTool, Megaphone, Dumbbell, UtensilsCrossed, Briefcase, Globe, Users, UserCircle, FileText, TrendingUp, Award, BarChart3, ShieldCheck } from "lucide-solid";

const NAVY = "#0D0D2A";
const ORANGE = "#FF5E13";

const API = "";

const MAIN_ROLES = [
  { key: "COMPANY", name: "Company", Icon: Users, subtitle: "Hire talent, post jobs, and manage applications in one path." },
  { key: "JOB_SEEKER", name: "Job Seeker", Icon: UserCircle, subtitle: "Explore opportunities and apply to roles with your profile." },
  { key: "CUSTOMER", name: "Service Seeker", Icon: FileText, subtitle: "Post requirements and connect with verified professionals." },
];

const PROFESSIONAL_ROLES = [
  { key: "PHOTOGRAPHER", name: "Photographer", Icon: Camera },
  { key: "MAKEUP_ARTIST", name: "Makeup Artist", Icon: Scissors },
  { key: "TUTOR", name: "Tutor", Icon: GraduationCap },
  { key: "DEVELOPER", name: "Developer", Icon: Code2 },
  { key: "VIDEO_EDITOR", name: "Video Editor", Icon: Clapperboard },
  { key: "UGC_CONTENT_CREATOR", name: "UGC Content Creator", Icon: Clapperboard },
  { key: "GRAPHIC_DESIGNER", name: "Graphic Designer", Icon: PenTool },
  { key: "SOCIAL_MEDIA_MANAGER", name: "Social Media Manager", Icon: Megaphone },
  { key: "FITNESS_TRAINER", name: "Fitness Trainer", Icon: Dumbbell },
  { key: "CATERING_SERVICES", name: "Catering Services", Icon: UtensilsCrossed },
];

type RoleCard = {
  key: string;
  title: string;
  subtitle: string;
  action: string;
  Icon: any;
  status: "Active" | "Registered" | "Available";
};

async function apiFetch(path: string, opts?: RequestInit) {
  const token =
    typeof window !== "undefined"
      ? window.sessionStorage.getItem("nxtgauge_access_token") || ""
      : "";
  return fetch(`${API}${path}`, {
    ...opts,
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
      ...(opts?.headers ?? {}),
    },
  });
}

function toTitle(value: string): string {
  return String(value || "")
    .toLowerCase()
    .replace(/_/g, " ")
    .replace(/\b\w/g, (c) => c.toUpperCase());
}

function StatusBadge(props: { status: "Active" | "Registered" | "Available" }) {
  const { status } = props;
  const isActive = status === "Active";
  const isRegistered = status === "Registered";
  return (
    <span
      style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${isActive ? "#FFD8C2" : "#D1D5DB"};background:${isActive ? "#FFF1EB" : isRegistered ? "#F3F4F6" : "#F3F4F6"};color:${isActive ? ORANGE : isRegistered ? "#4B5563" : "#4B5563"};padding:2px 10px;font-size:12px;font-weight:500`}
    >
      <span
        style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${isActive ? ORANGE : "#9CA3AF"};margin-right:5px;flex-shrink:0`}
      />
      {status}
    </span>
  );
}

export default function ExploreServicesPage() {
  const [activeRoles, setActiveRoles] = createSignal<string[]>([]);
  const [currentRole, setCurrentRole] = createSignal("");
  const [loading, setLoading] = createSignal(true);
  const [busyRoleKey, setBusyRoleKey] = createSignal<string | null>(null);
  const [msg, setMsg] = createSignal("");
  const [err, setErr] = createSignal("");

  const activeRoleSet = createMemo(() => new Set(activeRoles()));

  const cards = createMemo((): RoleCard[] =>
    PROFESSIONAL_ROLES.map(({ key, name, Icon }) => {
      const upperKey = key;
      const isRegistered = activeRoleSet().has(upperKey);
      const isCurrent = currentRole() === upperKey;
      let status: "Active" | "Registered" | "Available" = "Available";
      if (isCurrent) status = "Active";
      else if (isRegistered) status = "Registered";
      return {
        key: upperKey,
        title: name,
        subtitle: isCurrent
          ? "This is your current active role."
          : isRegistered
            ? "Role is linked to your account. Switch instantly."
            : "Add this role to unlock its dashboard and workflows.",
        action: isCurrent ? "Current Role" : isRegistered ? "Switch" : "Register",
        Icon,
        status,
      };
    })
  );

  const load = async () => {
    setLoading(true);
    setErr("");
    try {
      if (typeof window !== "undefined") {
        const raw =
          window.sessionStorage.getItem("nxtgauge_auth_user") ||
          window.sessionStorage.getItem("nxtgauge_user") ||
          window.localStorage.getItem("nxtgauge_auth_user") ||
          window.localStorage.getItem("nxtgauge_user");
        if (raw) {
          try {
            const parsed = JSON.parse(raw);
            setCurrentRole(String(parsed?.active_role || parsed?.role || "").toUpperCase());
          } catch {
            setCurrentRole("");
          }
        }
      }

      const res = await apiFetch("/api/users/roles");
      const data = await res.json().catch(() => ({}));
      if (res.ok) {
        const roles: string[] = Array.isArray(data) ? data : Array.isArray(data?.data) ? data.data : [];
        setActiveRoles(roles.map((r) => String(typeof r === "string" ? r : (r as any).role_key || (r as any).key || "").toUpperCase()));
      } else {
        setActiveRoles([]);
      }
    } catch {
      setActiveRoles([]);
    } finally {
      setLoading(false);
    }
  };

  onMount(() => {
    void load();
  });

  const registerRole = async (roleKey: string) => {
    setBusyRoleKey(roleKey);
    setMsg("");
    setErr("");
    try {
      const res = await apiFetch("/api/users/roles/register", {
        method: "POST",
        body: JSON.stringify({ role_key: roleKey }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setErr(String(data?.error || data?.message || "Failed to register role."));
        return;
      }
      setMsg(`${toTitle(roleKey)} registered successfully.`);
      await load();
    } catch {
      setErr("Network error while registering role.");
    } finally {
      setBusyRoleKey(null);
    }
  };

  const switchRole = async (roleKey: string) => {
    setBusyRoleKey(roleKey);
    setMsg("");
    setErr("");
    try {
      const res = await apiFetch("/api/auth/switch-role", {
        method: "POST",
        body: JSON.stringify({ role_key: roleKey }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setErr(String(data?.error || data?.message || "Failed to switch role."));
        return;
      }
      const accessToken = String(data?.access_token || "").trim();
      if (typeof window !== "undefined" && accessToken) {
        window.sessionStorage.setItem("nxtgauge_access_token", accessToken);
        window.sessionStorage.setItem("nxtgauge_frontend_access_token", accessToken);
      }
      if (typeof window !== "undefined") {
        const keys = ["nxtgauge_auth_user", "nxtgauge_user", "nxtgauge_signup_profile_v1"];
        for (const key of keys) {
          const raw = window.localStorage.getItem(key);
          if (!raw) continue;
          try {
            const parsed = JSON.parse(raw);
            const next = {
              ...parsed,
              active_role: roleKey,
              role: roleKey.toLowerCase(),
              roleKey: roleKey.toLowerCase(),
            };
            window.localStorage.setItem(key, JSON.stringify(next));
          } catch {
            // ignore
          }
        }
      }
      setMsg(`Switched to ${toTitle(roleKey)}. Redirecting...`);
      setTimeout(() => {
        window.location.href = "/dashboard";
      }, 250);
    } catch {
      setErr("Network error while switching role.");
    } finally {
      setBusyRoleKey(null);
    }
  };

  return (
    <div style={{ display: "grid", gap: "14px", "max-width": "1080px" }}>
      <div
        style={{
          background: NAVY,
          "border-radius": "12px",
          padding: "16px 20px",
          display: "flex",
          "align-items": "center",
          gap: "12px",
        }}
      >
        <span style={{ color: ORANGE }}>
          <Globe size={24} />
        </span>
        <div>
          <h1
            style={{
              margin: "0",
              "font-size": "18px",
              "font-weight": "800",
              color: "#fff",
              "line-height": "1.2",
            }}
          >
            Explore Nxtgauge
          </h1>
          <p style={{ margin: "4px 0 0", "font-size": "13px", color: "rgba(255,255,255,0.65)" }}>
            Discover services, connect with verified users, and expand into additional roles using the same dashboard workflow.
          </p>
        </div>
      </div>

      {/* Main Roles Section */}
      <div style={CARD}>
        <p style={{ margin: "0 0 16px", "font-size": "20px", "font-weight": "800", color: "#111827" }}>
          Explore opportunities on Nxtgauge
        </p>
        <div style={{ display: "grid", "grid-template-columns": "repeat(3, minmax(0, 1fr))", gap: "12px" }}>
          <For each={MAIN_ROLES}>
            {(role) => {
              const isCurrentRole = () => currentRole() === role.key;
              const isRegistered = () => activeRoleSet().has(role.key);
              return (
                <div
                  style={{
                    border: "1px solid #E5E7EB",
                    background: "#fff",
                    "border-radius": "16px",
                    padding: "16px",
                    display: "flex",
                    "flex-direction": "column",
                    gap: "10px",
                    "box-shadow": "0 1px 4px rgba(0,0,0,0.06)",
                  }}
                >
                  <div
                    style={{
                      width: "40px",
                      height: "40px",
                      "border-radius": "10px",
                      background: "#FFF3EE",
                      display: "flex",
                      "align-items": "center",
                      "justify-content": "center",
                    }}
                  >
                    <role.Icon size={20} color={ORANGE} strokeWidth={2} />
                  </div>
                  <p style={{ margin: "0", "font-size": "16px", "font-weight": "700", color: "#111827" }}>
                    {role.name}
                  </p>
                  <p style={{ margin: "0", "font-size": "12px", color: "#6B7280", "line-height": "1.5" }}>
                    {role.subtitle}
                  </p>
                  <button
                    type="button"
                    disabled={isCurrentRole()}
                    onClick={() => isRegistered() && !isCurrentRole() ? void switchRole(role.key) : void registerRole(role.key)}
                    style={{
                      height: "32px",
                      "border-radius": "8px",
                      border: "none",
                      background: isCurrentRole() ? "#E5E7EB" : NAVY,
                      color: isCurrentRole() ? "#4B5563" : "#fff",
                      padding: "0 10px",
                      "font-size": "12px",
                      "font-weight": "700",
                      cursor: isCurrentRole() ? "not-allowed" : "pointer",
                      "margin-top": "auto",
                    }}
                  >
                    {isCurrentRole() ? "Current Role" : isRegistered() ? "Switch" : `Register as ${role.name}`}
                  </button>
                </div>
              );
            }}
          </For>
        </div>
      </div>

      <Show when={msg()}>
        <div
          style={{
            ...CARD,
            border: "1px solid #BBF7D0",
            background: "#ECFDF5",
            padding: "12px 16px",
            color: "#065F46",
            "font-size": "13px",
            "font-weight": "600",
          }}
        >
          {msg()}
        </div>
      </Show>
      <Show when={err()}>
        <div
          style={{
            ...CARD,
            border: "1px solid #FECACA",
            background: "#FEF2F2",
            padding: "12px 16px",
            color: "#B91C1C",
            "font-size": "13px",
            "font-weight": "600",
          }}
        >
          {err()}
        </div>
      </Show>

      <Show
        when={!loading()}
        fallback={
          <div
            style={{
              ...CARD,
              "text-align": "center",
              padding: "48px 24px",
            }}
          >
            <p style={{ margin: "0", "font-size": "15px", "font-weight": "600", color: "#111827" }}>
              Loading services...
            </p>
          </div>
        }
      >
        <div style={CARD}>
          <div
            style={{
              display: "flex",
              "justify-content": "space-between",
              "align-items": "center",
              "margin-bottom": "16px",
            }}
          >
            <p
              style={{
                margin: "0",
                "font-size": "16px",
                "font-weight": "700",
                color: "#111827",
              }}
            >
              Professional Services
            </p>
            <button type="button" onClick={() => void load()} style={BTN_GHOST}>
              Refresh
            </button>
          </div>

          <Show
            when={cards().length > 0}
            fallback={
              <div
                style={{
                  "text-align": "center",
                  padding: "32px",
                  color: "#6B7280",
                  "font-size": "14px",
                }}
              >
                No services available.
              </div>
            }
          >
            <div
              style={{
                display: "grid",
                "grid-template-columns": "repeat(auto-fill, minmax(280px, 1fr))",
                gap: "14px",
              }}
            >
              <For each={cards()}>
                {(card) => (
                  <div
                    style={{
                      border: "1px solid #E5E7EB",
                      background: "#fff",
                      "border-radius": "16px",
                      padding: "16px",
                      display: "flex",
                      "flex-direction": "column",
                      gap: "10px",
                      "box-shadow": "0 1px 4px rgba(0,0,0,0.06)",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        "align-items": "flex-start",
                        "justify-content": "space-between",
                      }}
                    >
                      <div
                        style={{
                          width: "40px",
                          height: "40px",
                          "border-radius": "10px",
                          background: "#FFF3EE",
                          display: "flex",
                          "align-items": "center",
                          "justify-content": "center",
                          "flex-shrink": "0",
                        }}
                      >
                        <card.Icon size={20} color={ORANGE} strokeWidth={2} />
                      </div>
                      <StatusBadge status={card.status} />
                    </div>

                    <div>
                      <p
                        style={{
                          margin: "0",
                          "font-size": "16px",
                          "font-weight": "700",
                          color: "#111827",
                        }}
                      >
                        {card.title}
                      </p>
                      <p
                        style={{
                          margin: "4px 0 0",
                          "font-size": "12px",
                          color: "#6B7280",
                          "line-height": "1.5",
                        }}
                      >
                        {card.subtitle}
                      </p>
                    </div>

                    <button
                      type="button"
                      disabled={
                        busyRoleKey() === card.key || card.action === "Current Role"
                      }
                      onClick={() =>
                        card.action === "Register"
                          ? void registerRole(card.key)
                          : void switchRole(card.key)
                      }
                      style={
                        card.action === "Register"
                          ? {
                              height: "34px",
                              "border-radius": "8px",
                              border: "none",
                              background: NAVY,
                              color: "#fff",
                              padding: "0 14px",
                              "font-size": "12px",
                              "font-weight": "700",
                              cursor:
                                busyRoleKey() === card.key
                                  ? "not-allowed"
                                  : "pointer",
                              opacity:
                                busyRoleKey() === card.key
                                  ? "0.6"
                                  : "1",
                              "margin-top": "auto",
                            }
                          : {
                              height: "34px",
                              "border-radius": "8px",
                              border: "1px solid #E5E7EB",
                              background: "#fff",
                              color: "#374151",
                              padding: "0 14px",
                              "font-size": "12px",
                              "font-weight": "700",
                              cursor:
                                busyRoleKey() === card.key
                                  ? "not-allowed"
                                  : "pointer",
                              opacity:
                                busyRoleKey() === card.key
                                  ? "0.6"
                                  : "1",
                              "margin-top": "auto",
                            }
                      }
                    >
                      {busyRoleKey() === card.key
                        ? card.action === "Register"
                          ? "Registering..."
                          : "Switching..."
                        : card.action}
                    </button>
                  </div>
                )}
              </For>
            </div>
          </Show>

        <div
          style={{
            border: "1px solid #E5E7EB",
            background: "linear-gradient(180deg, #FFFFFF 0%, #FFFAF7 100%)",
            "border-radius": "20px",
            padding: "18px",
            "box-shadow": "0 8px 20px rgba(15,23,42,0.06)",
          }}
        >
          <p style={{ margin: "0", "font-size": "12px", "letter-spacing": "0.08em", "text-transform": "uppercase", "font-weight": "700", color: ORANGE, "text-align": "center" }}>
            Growth Advantage
          </p>
          <p style={{ margin: "4px 0 0", "font-size": "24px", "font-weight": "800", color: "#111827", "text-align": "center", "line-height": "1.1" }}>
            Why Add More Services?
          </p>
          <p style={{ margin: "8px auto 0", "font-size": "13px", "line-height": "1.5", color: "#6B7280", "text-align": "center", "max-width": "760px" }}>
            A multi-service profile helps you acquire more opportunities, improve trust, and scale consistently on a single platform.
          </p>
          <div style={{ display: "grid", "grid-template-columns": "repeat(4, minmax(0, 1fr))", gap: "12px", "margin-top": "14px" }}>
            <div style={{ border: "1px solid #E5E7EB", background: "#fff", "border-radius": "14px", padding: "14px", "box-shadow": "0 2px 6px rgba(0,0,0,0.05)" }}>
              <div style={{ width: "34px", height: "34px", "border-radius": "999px", background: "#FFF3EE", display: "flex", "align-items": "center", "justify-content": "center" }}>
                <TrendingUp size={16} color={ORANGE} />
              </div>
              <p style={{ margin: "10px 0 0", "font-size": "15px", "font-weight": "800", color: "#111827" }}>Reach More Buyers</p>
              <p style={{ margin: "6px 0 0", "font-size": "12px", color: "#6B7280", "line-height": "1.45" }}>Get discovered by customers across multiple demand categories.</p>
            </div>
            <div style={{ border: "1px solid #E5E7EB", background: "#fff", "border-radius": "14px", padding: "14px", "box-shadow": "0 2px 6px rgba(0,0,0,0.05)" }}>
              <div style={{ width: "34px", height: "34px", "border-radius": "999px", background: "#FFF3EE", display: "flex", "align-items": "center", "justify-content": "center" }}>
                <Award size={16} color={ORANGE} />
              </div>
              <p style={{ margin: "10px 0 0", "font-size": "15px", "font-weight": "800", color: "#111827" }}>Increase Revenue Paths</p>
              <p style={{ margin: "6px 0 0", "font-size": "12px", color: "#6B7280", "line-height": "1.45" }}>Offer additional services and create new income streams.</p>
            </div>
            <div style={{ border: "1px solid #E5E7EB", background: "#fff", "border-radius": "14px", padding: "14px", "box-shadow": "0 2px 6px rgba(0,0,0,0.05)" }}>
              <div style={{ width: "34px", height: "34px", "border-radius": "999px", background: "#FFF3EE", display: "flex", "align-items": "center", "justify-content": "center" }}>
                <ShieldCheck size={16} color={ORANGE} />
              </div>
              <p style={{ margin: "10px 0 0", "font-size": "15px", "font-weight": "800", color: "#111827" }}>Strengthen Credibilities</p>
              <p style={{ margin: "6px 0 0", "font-size": "12px", color: "#6B7280", "line-height": "1.45" }}>Verified multi-service profiles build confidence and improve conversion.</p>
            </div>
            <div style={{ border: "1px solid #E5E7EB", background: "#fff", "border-radius": "14px", padding: "14px", "box-shadow": "0 2px 6px rgba(0,0,0,0.05)" }}>
              <div style={{ width: "34px", height: "34px", "border-radius": "999px", background: "#FFF3EE", display: "flex", "align-items": "center", "justify-content": "center" }}>
                <BarChart3 size={16} color={ORANGE} />
              </div>
              <p style={{ margin: "10px 0 0", "font-size": "15px", "font-weight": "800", color: "#111827" }}>Scale Faster</p>
              <p style={{ margin: "6px 0 0", "font-size": "12px", color: "#6B7280", "line-height": "1.45" }}>Grow your business from one unified account and workflow.</p>
            </div>
          </div>
        </div>
        </div>
        </Show>
    </div>
  );
}
