import type { Project } from "../../lib/db";
import { ANDERS, PROJECT_PLAN_GROUPS, andersKey, parseProjectPlanJson, type PlanField } from "../../lib/projectPlan";

const getal = new Intl.NumberFormat("nl-NL", { maximumFractionDigits: 2 });
const euro = new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR" });
const datum = new Intl.DateTimeFormat("nl-NL", { day: "numeric", month: "long", year: "numeric" });

type ColumnKey = "projectkosten" | "deelnemers_werk" | "deelnemers_skills" | "financiering_extern_bedrag" | "financiering_extern_pct";

function waarde(field: PlanField, project: Project, plan: Record<string, unknown>): string | null {
  const v = field.kind === "number" && field.column ? project[field.key as ColumnKey] : plan[field.key];
  if (v === null || v === undefined || v === "" || (Array.isArray(v) && v.length === 0)) return null;
  switch (field.kind) {
    case "number":
      return field.label.includes("(€)") ? euro.format(v as number) : getal.format(v as number);
    case "date":
      return datum.format(new Date(`${v}T12:00:00`));
    case "multiselect": {
      const anders = plan[andersKey(field.key)];
      return (v as string[]).map((o) => (o === ANDERS && typeof anders === "string" ? `Anders: ${anders}` : o)).join(" · ");
    }
    default:
      return String(v);
  }
}

// Alleen-lezen weergave van het project plan voor experts
export function ProjectPlanView({ project }: { project: Project }) {
  const plan = parseProjectPlanJson(project.project_plan);
  return (
    <div className="flex flex-col gap-6">
      {PROJECT_PLAN_GROUPS.map((group) => (
        <section key={group.title}>
          <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 pb-2 mb-3 border-b border-zinc-200 dark:border-zinc-800">
            {group.title}
          </h3>
          <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
            {group.fields.map((field) => {
              const v = waarde(field, project, plan);
              const wide = field.wide || field.kind === "textarea";
              return (
                <div key={field.key} className={wide ? "sm:col-span-2" : ""}>
                  <dt className="text-xs font-medium text-zinc-500">{field.label}</dt>
                  <dd className={`mt-0.5 text-sm whitespace-pre-line ${v ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-400"}`}>
                    {v ?? "Niet ingevuld"}
                  </dd>
                </div>
              );
            })}
          </dl>
        </section>
      ))}
    </div>
  );
}