"use client";

import React, { useMemo } from "react";
import type { TemplateRow } from "@/lib/api/types/template.types";

interface Props {
  templates:   TemplateRow[];
  stageFilter?: string;
  typeFilter?:  string;
}

export default function TemplateAnalytics({ templates, stageFilter, typeFilter }: Props) {
  const filtered = useMemo(() => {
    return templates.filter((t) => {
      if (stageFilter && stageFilter !== "all" && t.stageName    !== stageFilter) return false;
      if (typeFilter  && typeFilter  !== "all" && t.templateType !== typeFilter)  return false;
      return true;
    });
  }, [templates, stageFilter, typeFilter]);

  const byStage = ["Stage 1", "Stage 2"].map((name) => ({
    name,
    count: filtered.filter((t) => t.stageName === name).length,
  }));

  const byType = ["DOCUMENT", "CERTIFICATE"].map((name) => ({
    name,
    count: filtered.filter((t) => t.templateType === name).length,
  }));

  const stageColors: Record<string, string> = {
    "Stage 1": "#2563eb",
    "Stage 2": "#7c3aed",
  };
  const typeColors: Record<string, string> = {
    DOCUMENT:    "#475569",
    CERTIFICATE: "#15803d",
  };

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px", marginBottom: "20px" }}>
      {/* By Stage */}
      <div style={{ background: "#fff", border: "1px solid #e5e7eb", borderRadius: "12px", padding: "18px" }}>
        <h3 style={{ fontSize: "13px", fontWeight: 700, color: "#374151", marginBottom: "14px" }}>By Stage</h3>
        {byStage.map((s) => (
          <div key={s.name} style={{ marginBottom: "10px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "12px", marginBottom: "3px" }}>
              <span style={{ color: "#374151" }}>{s.name}</span>
              <span style={{ color: stageColors[s.name], fontWeight: 700 }}>{s.count}</span>
            </div>
            <div style={{ height: "5px", borderRadius: "3px", backgroundColor: "#f3f4f6" }}>
              <div style={{ height: "100%", borderRadius: "3px", backgroundColor: stageColors[s.name], width: `${filtered.length ? (s.count / filtered.length) * 100 : 0}%`, transition: "width 0.4s" }} />
            </div>
          </div>
        ))}
      </div>

      {/* By Type */}
      <div style={{ background: "#fff", border: "1px solid #e5e7eb", borderRadius: "12px", padding: "18px" }}>
        <h3 style={{ fontSize: "13px", fontWeight: 700, color: "#374151", marginBottom: "14px" }}>By Type</h3>
        {byType.map((t) => (
          <div key={t.name} style={{ marginBottom: "10px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "12px", marginBottom: "3px" }}>
              <span style={{ color: "#374151" }}>{t.name}</span>
              <span style={{ color: typeColors[t.name], fontWeight: 700 }}>{t.count}</span>
            </div>
            <div style={{ height: "5px", borderRadius: "3px", backgroundColor: "#f3f4f6" }}>
              <div style={{ height: "100%", borderRadius: "3px", backgroundColor: typeColors[t.name], width: `${filtered.length ? (t.count / filtered.length) * 100 : 0}%`, transition: "width 0.4s" }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}