"use client";

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

// ─────────────────────────────────────────────────────────────────────────────
// PipelineSummary — visual summary of inquiries grouped by status
// Shows the 6-stage pipeline with counts and percentages
// ─────────────────────────────────────────────────────────────────────────────

const PIPELINE_STEPS = [
  {
    key: "PENDING",
    label: "Pending",
    color: "#d97706",
    bg: "#fffbeb",
    border: "#fde68a",
    icon: "⏳",
    step: 1,
  },
  {
    key: "IN_REVIEW",
    label: "In Review",
    color: "#2563eb",
    bg: "#eff6ff",
    border: "#bfdbfe",
    icon: "🔍",
    step: 2,
  },
  {
    key: "DRAFT_READY",
    label: "Draft Ready",
    color: "#7c3aed",
    bg: "#f5f3ff",
    border: "#ddd6fe",
    icon: "📄",
    step: 3,
  },
  {
    key: "CHANGES_REQUESTED",
    label: "Changes",
    color: "#dc2626",
    bg: "#fef2f2",
    border: "#fecaca",
    icon: "↩",
    step: 4,
  },
  {
    key: "CLIENT_CONFIRMED",
    label: "Confirmed",
    color: "#059669",
    bg: "#f0fdf4",
    border: "#a7f3d0",
    icon: "✅",
    step: 5,
  },
  {
    key: "FINAL_ISSUED",
    label: "Issued",
    color: "#0f766e",
    bg: "#f0fdfa",
    border: "#99f6e4",
    icon: "🏆",
    step: 6,
  },
];

interface PipelineSummaryProps {
  data: InquiryRow[];
}

function PipelineSummary({ data }: PipelineSummaryProps) {
  const counts = useMemo(() => {
    const m: Record<string, number> = {};
    PIPELINE_STEPS.forEach((p) => (m[p.key] = 0));
    data.forEach((r: InquiryRow) => {
      if (m[r.status] !== undefined) m[r.status]++;
    });
    return m;
  }, [data]);

  const total = data.length || 1;

  return (
    <div
      style={{
        backgroundColor: "#fff",
        border: "1px solid #e5e7eb",
        borderRadius: 14,
        padding: "16px 20px",
        marginBottom: 16,
      }}
    >
      {/* Title */}
      <div
        style={{
          fontSize: 11,
          fontWeight: 700,
          color: "#9ca3af",
          textTransform: "uppercase",
          letterSpacing: "0.08em",
          marginBottom: 14,
        }}
      >
        Inquiry Pipeline — {data.length} total
      </div>

      {/* Steps */}
      <div style={{ display: "flex", alignItems: "stretch", gap: 0 }}>
        {PIPELINE_STEPS.map((p, i) => {
          const count = counts[p.key] ?? 0;
          const pct = Math.round((count / total) * 100);
          const isLast = i === PIPELINE_STEPS.length - 1;

          return (
            <React.Fragment key={p.key}>
              {/* Step card */}
              <div
                style={{
                  flex: 1,
                  padding: "12px 10px",
                  backgroundColor: count > 0 ? p.bg : "#f9fafb",
                  border: `1px solid ${count > 0 ? p.border : "#f3f4f6"}`,
                  borderRadius:
                    i === 0
                      ? "10px 0 0 10px"
                      : isLast
                        ? "0 10px 10px 0"
                        : 0,
                  borderRight: isLast ? undefined : "none",
                  textAlign: "center",
                  transition: "all 0.2s",
                  position: "relative",
                }}
              >
                {/* Step number */}
                <div
                  style={{
                    width: 18,
                    height: 18,
                    borderRadius: "50%",
                    backgroundColor: count > 0 ? p.color : "#d1d5db",
                    color: "#fff",
                    fontSize: 9,
                    fontWeight: 800,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    margin: "0 auto 6px",
                  }}
                >
                  {p.step}
                </div>

                {/* Icon */}
                <div style={{ fontSize: 13, marginBottom: 2 }}>{p.icon}</div>

                {/* Count */}
                <div
                  style={{
                    fontSize: 22,
                    fontWeight: 900,
                    color: count > 0 ? p.color : "#d1d5db",
                    lineHeight: 1,
                    marginBottom: 4,
                  }}
                >
                  {count}
                </div>

                {/* Label */}
                <div
                  style={{
                    fontSize: 10,
                    fontWeight: 700,
                    color: count > 0 ? p.color : "#9ca3af",
                    whiteSpace: "nowrap",
                  }}
                >
                  {p.label}
                </div>

                {/* Percentage bar at bottom */}
                <div
                  style={{
                    marginTop: 8,
                    height: 3,
                    backgroundColor: "#f3f4f6",
                    borderRadius: 2,
                    overflow: "hidden",
                  }}
                >
                  <div
                    style={{
                      height: "100%",
                      borderRadius: 2,
                      backgroundColor: count > 0 ? p.color : "transparent",
                      width: `${pct}%`,
                      transition: "width 0.4s ease",
                    }}
                  />
                </div>
                {count > 0 && (
                  <div
                    style={{
                      fontSize: 9,
                      color: p.color,
                      marginTop: 3,
                      fontWeight: 600,
                    }}
                  >
                    {pct}%
                  </div>
                )}
              </div>

              {/* Arrow between steps */}
              {!isLast && (
                <div
                  style={{
                    width: 0,
                    height: 0,
                    flexShrink: 0,
                    alignSelf: "center",
                    borderTop: "22px solid transparent",
                    borderBottom: "22px solid transparent",
                    borderLeft: `12px solid ${
                      counts[p.key] > 0 ? p.border : "#e5e7eb"
                    }`,
                    zIndex: 1,
                  }}
                />
              )}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

export default PipelineSummary;