import type { ModuleDefinition, TenantContext } from "@platform-types";
import { isModuleEnabled, moduleStatusLabel } from "@platform-shared";

import { Link } from "react-router-dom";
import { getModuleWorkspaceHref } from "../config/workspace";
import { StatusPill } from "./StatusPill";

interface ModuleCardProps {
  module: ModuleDefinition;
  context: TenantContext;
}

const moduleMarks: Record<ModuleDefinition["key"], string> = {
  prenotazioni: "RSVP",
  menu: "MENU",
  ordini: "FLOW",
  homemade: "LAB"
};

export function ModuleCard({ module, context }: ModuleCardProps) {
  const enabled = isModuleEnabled(context, module.key);
  const notes = module.technical_notes.slice(0, 2);
  const availabilityLabel = enabled
    ? "Attivo nel locale"
    : module.status === "active"
      ? "Disponibile su richiesta"
      : "In roadmap";

  return (
    <article className={`module-card${enabled ? " is-enabled" : ""}${module.status !== "active" ? " is-muted" : ""}`}>
      <div className="module-card-topline">
        <span className="module-card-mark">{moduleMarks[module.key]}</span>
        <StatusPill status={module.status} />
      </div>

      <div className="module-card-header">
        <div>
          <p className="eyebrow">{enabled ? "Pronto adesso" : module.status === "active" ? "Attivabile" : "In arrivo"}</p>
          <h3>{module.name}</h3>
        </div>
        <span className={`module-availability${enabled ? " is-active" : ""}`}>{availabilityLabel}</span>
      </div>

      <p className="module-summary">{module.short_description}</p>

      <ul className="module-card-notes">
        {notes.map((note) => (
          <li key={note}>{note}</li>
        ))}
      </ul>

      <div className="module-card-footer">
        <div className="module-meta-row">
          <span className="module-meta-label">Stack</span>
          <strong>{module.stack_summary}</strong>
        </div>
        <div className="module-meta-row">
          <span className="module-meta-label">Stato</span>
          <strong>{moduleStatusLabel(module.status)}</strong>
        </div>
      </div>

      <div className="module-card-actions">
        {module.status === "active" ? (
          <Link to={getModuleWorkspaceHref(module.key)} className="button-primary">
            {enabled ? "Apri modulo" : "Esplora modulo"}
          </Link>
        ) : (
          <button type="button" className="button-primary" disabled>
            Disponibile presto
          </button>
        )}
      </div>
    </article>
  );
}
