"use client";

import React from "react";
import {
  LuBan,
  LuCalendar,
  LuClipboardList,
  LuBellRing,
  LuTriangle,
  LuCircleCheck,
} from "react-icons/lu";
import { formatDate } from "@/lib/api/mappers/audit-schedule.mappers";
import type {
  AuditScheduleRow,
  AuditSchedule,
} from "@/lib/api/types/audit-schedule.types";

interface Props {
  schedule: AuditScheduleRow;
  detail?: AuditSchedule | null;
  activeCount: number | null;
  loading?: boolean;
}

export default function ScheduleSummaryCard({
  schedule,
  detail,
  activeCount,
  loading,
}: Props) {
  if (!schedule) return null;

  const totalRows = detail?.rows?.length ?? schedule.row_count ?? 0;
  const cancelledCount =
    detail?.rows?.filter((r) => r.status === "CANCELLED").length ?? 0;
  const completedCount =
    detail?.rows?.filter((r) => r.status === "COMPLETED").length ?? 0;
  const unaffected = cancelledCount + completedCount;

  return (
    <div
      style={{
        position: "relative",
        background: "linear-gradient(180deg, #fff5f5 0%, #fef2f2 100%)",
        border: "1.5px solid #fecaca",
        borderRadius: 16,
        marginBottom: 20,
        overflow: "hidden",
        boxShadow:
          "0 1px 0 #fee2e2 inset, 0 4px 20px rgba(220, 38, 38, 0.08)",
        fontFamily:
          "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
        letterSpacing: -0.01,
      }}
    >
      {/* Top accent bar */}
      <div
        style={{
          height: 4,
          background:
            "linear-gradient(90deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%)",
        }}
      />

      <div style={{ padding: "22px 24px 20px" }}>
        {/* Header row: status pill + date pill */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            marginBottom: 20,
            gap: 12,
            flexWrap: "wrap",
          }}
        >
          {/* Status pill with icon-tile */}
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              background: "#fff",
              color: "#dc2626",
              fontWeight: 700,
              fontSize: 11,
              letterSpacing: 0.8,
              padding: "6px 14px 6px 6px",
              borderRadius: 999,
              border: "1px solid #fecaca",
              textTransform: "uppercase",
              boxShadow: "0 2px 4px rgba(220, 38, 38, 0.08)",
            }}
          >
            <span
              style={{
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
                width: 22,
                height: 22,
                borderRadius: 6,
                background: "#dc2626",
                color: "#fff",
              }}
            >
              <LuBan size={13} />
            </span>
            <span>Will Cancel All</span>
          </div>

          {/* Date pill */}
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
              background: "#fff",
              padding: "6px 12px",
              borderRadius: 8,
              border: "1px solid #fecaca",
              fontFamily:
                "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
              fontWeight: 700,
              fontSize: 13.5,
              color: "#991b1b",
              letterSpacing: 0.3,
              boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
            }}
          >
            <LuCalendar size={14} style={{ color: "#dc2626" }} />
            {schedule.schedule_date
              ? formatDate(schedule.schedule_date)
              : "—"}
          </div>
        </div>

        {/* Schedule title */}
        <div style={{ marginBottom: 22 }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 6,
              fontSize: 11,
              fontWeight: 700,
              letterSpacing: 0.7,
              color: "#64748b",
              textTransform: "uppercase",
              marginBottom: 8,
            }}
          >
            <LuClipboardList size={13} style={{ color: "#94a3b8" }} />
            <span>Schedule Title</span>
          </div>
          <div
            style={{
              fontSize: 17,
              fontWeight: 700,
              color: "#0f172a",
              lineHeight: 1.35,
              letterSpacing: -0.3,
              wordBreak: "break-word",
            }}
          >
            {schedule.title || "Untitled schedule"}
          </div>
          {schedule.client_group && (
            <div
              style={{
                marginTop: 8,
                display: "inline-flex",
                alignItems: "center",
                padding: "3px 10px",
                background: "#fff",
                border: "1px solid #fecaca",
                borderRadius: 999,
                fontSize: 11,
                fontWeight: 700,
                color: "#7f1d1d",
                letterSpacing: 0.5,
              }}
            >
              {schedule.client_group}
            </div>
          )}
        </div>

        {/* Stats row */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr 1fr",
            gap: 10,
          }}
        >
          <StatCard
            icon={<LuClipboardList size={13} />}
            label="Total"
            value={loading ? "…" : String(totalRows)}
            tone="neutral"
          />
          <StatCard
            icon={<LuTriangle size={13} />}
            label="Will Cancel"
            value={activeCount === null ? "…" : String(activeCount)}
            tone="danger"
            highlight
          />
          <StatCard
            icon={<LuCircleCheck size={13} />}
            label="Unaffected"
            value={loading ? "…" : String(unaffected)}
            tone="muted"
            hint={unaffected > 0 ? "done / cancelled" : "none yet"}
          />
        </div>
      </div>

      {/* Footer strip */}
      <div
        style={{
          background:
            "linear-gradient(180deg, rgba(254, 226, 226, 0.4) 0%, rgba(254, 226, 226, 0.6) 100%)",
          borderTop: "1px solid #fecaca",
          padding: "13px 24px",
          display: "flex",
          alignItems: "flex-start",
          gap: 10,
          fontSize: 12,
          color: "#7f1d1d",
          lineHeight: 1.55,
        }}
      >
        <div
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            width: 22,
            height: 22,
            borderRadius: 6,
            background: "#fee2e2",
            color: "#dc2626",
            flexShrink: 0,
            marginTop: 1,
          }}
        >
          <LuBellRing size={12} />
        </div>
        <span style={{ fontWeight: 500 }}>
          All stakeholders (marketing, auditors, coordinators) will receive
          cancellation notifications via email + in-app.{" "}
          <strong style={{ fontWeight: 700 }}>
            Cannot be undone in bulk.
          </strong>
        </span>
      </div>
    </div>
  );
}

function StatCard({
  icon,
  label,
  value,
  tone,
  highlight,
  hint,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  tone: "neutral" | "danger" | "muted";
  highlight?: boolean;
  hint?: string;
}) {
  const toneStyles =
    tone === "danger"
      ? {
          bg: highlight
            ? "linear-gradient(180deg, #fff 0%, #fef2f2 100%)"
            : "#fff",
          border: "#fca5a5",
          labelColor: "#dc2626",
          valueColor: "#991b1b",
          iconBg: "#dc2626",
          iconColor: "#fff",
        }
      : tone === "muted"
        ? {
            bg: "#fafafa",
            border: "#e5e7eb",
            labelColor: "#94a3b8",
            valueColor: "#64748b",
            iconBg: "#f1f5f9",
            iconColor: "#94a3b8",
          }
        : {
            bg: "#fff",
            border: "#e5e7eb",
            labelColor: "#64748b",
            valueColor: "#0f172a",
            iconBg: "#f1f5f9",
            iconColor: "#475569",
          };

  return (
    <div
      style={{
        background: toneStyles.bg,
        border: `1.5px solid ${toneStyles.border}`,
        borderRadius: 12,
        padding: "14px 14px 12px",
        boxShadow: highlight
          ? "0 0 0 3px rgba(220, 38, 38, 0.08), 0 4px 10px rgba(220, 38, 38, 0.1)"
          : "0 1px 2px rgba(0, 0, 0, 0.02)",
        transition: "all 0.15s ease",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 6,
          marginBottom: 10,
        }}
      >
        <span
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            width: 22,
            height: 22,
            borderRadius: 6,
            background: toneStyles.iconBg,
            color: toneStyles.iconColor,
            flexShrink: 0,
          }}
        >
          {icon}
        </span>
        <span
          style={{
            fontSize: 10.5,
            fontWeight: 700,
            letterSpacing: 0.6,
            color: toneStyles.labelColor,
            textTransform: "uppercase",
          }}
        >
          {label}
        </span>
      </div>
      <div
        style={{
          fontSize: highlight ? 28 : 22,
          fontWeight: 800,
          color: toneStyles.valueColor,
          lineHeight: 1,
          letterSpacing: -0.8,
          fontVariantNumeric: "tabular-nums",
        }}
      >
        {value}
      </div>
      {hint && (
        <div
          style={{
            marginTop: 5,
            fontSize: 10,
            color: "#94a3b8",
            fontWeight: 500,
            lineHeight: 1.3,
            letterSpacing: 0.1,
          }}
        >
          {hint}
        </div>
      )}
    </div>
  );
}