import { Box, Button, Group, Paper, Stack, Text } from "@mantine/core";
import {
  AlertCircle,
  AlertTriangle,
  CheckCircle2,
  Link2,
  PencilLine,
  StickyNote,
  XCircle,
} from "lucide-react";
import type { ReactNode } from "react";

export function NoticeBanner({
  tone,
  icon,
  title,
  children,
  className,
}: {
  tone: "amber" | "red";
  icon: ReactNode;
  title?: string;
  children: ReactNode;
  className?: string;
}) {
  const palette =
    tone === "amber"
      ? { border: "#F6E2BC", bg: "#FDF3E0", color: "#9A5B00" }
      : { border: "#F3C8C1", bg: "#FBEAE7", color: "#A93226" };

  return (
    <div
      className={`flex items-start gap-3 rounded-[14px] border p-4 ${className ?? ""}`}
      style={{
        borderColor: palette.border,
        backgroundColor: palette.bg,
        color: palette.color,
      }}
    >
      <span className="mt-0.5 shrink-0">{icon}</span>
      <div className="min-w-0">
        {title && (
          <Text fz="13.5px" fw={800} c={palette.color}>
            {title}
          </Text>
        )}
        <Text fz="13px" c={palette.color} className="leading-[1.45]">
          {children}
        </Text>
      </div>
    </div>
  );
}

export function ActionRequiredBanner({
  title,
  children,
  onAction,
}: {
  title: string;
  children: ReactNode;
  onAction?: () => void;
}) {
  return (
    <div
      className="flex flex-wrap items-center justify-between gap-6 rounded-2xl border border-[#F4D9A8] px-[22px] py-5"
      style={{ backgroundColor: "#FDF3E0" }}
    >
      <div className="flex min-w-0 flex-1 items-center gap-4">
        <div
          className="flex shrink-0 items-center justify-center rounded-xl border border-[#F4D9A8]"
          style={{ width: 44, height: 44, backgroundColor: "#fff", color: "#C77F12" }}
        >
          <AlertTriangle size={23} />
        </div>
        <div className="min-w-0">
          <Text
            fz="10.5px"
            fw={800}
            c="#B07A2A"
            tt="uppercase"
            className="tracking-[0.6px]"
          >
            Action required · You
          </Text>
          <Text mt={5} fz="15.5px" fw={700} c="#10202F">
            {title}
          </Text>
          <Text mt={2} fz="13px" c="#7A6A4E" className="leading-[1.45]">
            {children}
          </Text>
        </div>
      </div>
      {onAction && (
        <Button
          onClick={onAction}
          radius={10}
          color="#F2A516"
          leftSection={<PencilLine size={18} color="#5A3D08" />}
          styles={{
            root: { height: 42, paddingInline: 18, flexShrink: 0 },
            label: { fontSize: 13, fontWeight: 800, color: "#3D2A05" },
          }}
        >
          Review & Resubmit
        </Button>
      )}
    </div>
  );
}

export function CancelledBanner({
  pillLabel = "Cancelled",
  title,
  subtitle,
  reason,
  onRebook,
}: {
  pillLabel?: string;
  title: string;
  subtitle: string;
  reason?: string | null;
  onRebook?: () => void;
}) {
  return (
    <Paper
      radius={16}
      p={20}
      bg="#FCEEEA"
      className="border border-[#F3C6BB]"
    >
      <Stack gap={14}>
        <Group justify="space-between" align="center" wrap="wrap" gap={20}>
          <Group gap={16} align="center" wrap="nowrap" miw={0}>
            <div
              className="flex shrink-0 items-center justify-center rounded-[13px] border border-[#F3C6BB]"
              style={{ width: 46, height: 46, backgroundColor: "#fff", color: "#D93C15" }}
            >
              <XCircle size={24} />
            </div>
            <Box miw={0}>
              <span
                className="inline-flex rounded-full px-[10px] py-1 text-[10.5px] font-extrabold uppercase tracking-[0.3px] text-white"
                style={{ backgroundColor: "#D93C15" }}
              >
                {pillLabel}
              </span>
              <Text mt={6} fz="15.5px" fw={700} c="#10202F">
                {title}
              </Text>
              <Text mt={2} fz="13px" c="#6B7C8E">
                {subtitle}
              </Text>
            </Box>
          </Group>
          {onRebook && (
            <Button
              onClick={onRebook}
              radius={10}
              color="edr-green"
              styles={{
                root: { height: 42, paddingInline: 18 },
                label: { fontSize: 13, fontWeight: 700 },
              }}
            >
              Rebook shipment
            </Button>
          )}
        </Group>
        {reason && (
          <div
            className="flex items-start gap-[11px] rounded-xl border border-[#F3C6BB] p-[14px]"
            style={{ backgroundColor: "#fff" }}
          >
            <StickyNote size={20} color="#B0341A" className="shrink-0" />
            <div className="min-w-0">
              <Text
                fz="10.5px"
                fw={700}
                c="#B0341A"
                tt="uppercase"
                className="tracking-[0.5px]"
              >
                Reason for cancellation
              </Text>
              <Text mt={3} fz="13.5px" c="#3D2A26" className="leading-[1.45]">
                {reason}
              </Text>
            </div>
          </div>
        )}
      </Stack>
    </Paper>
  );
}

/**
 * Shown to the customer while their booking is PENDING_CONSOLIDATION: it is
 * waiting for another shipment to share the wagon. The price shown is this
 * booking's own held amount — bookings and contracts are independent, so the
 * partner's amount is never shown. Once a partner is found the backend moves
 * the booking back to SUBMITTED and it continues the normal flow.
 */
export function ConsolidationWaitingBanner({
  priceLabel,
}: {
  priceLabel?: string;
}) {
  return (
    <Paper radius={16} p={20} bg="#FDF3E0" className="border border-[#F4D9A8]">
      <Group justify="space-between" align="center" wrap="wrap" gap={20}>
        <Group gap={16} align="center" wrap="nowrap" miw={0}>
          <div
            className="flex shrink-0 items-center justify-center rounded-[13px] border border-[#F4D9A8]"
            style={{ width: 46, height: 46, backgroundColor: "#fff", color: "#C77F12" }}
          >
            <Link2 size={24} />
          </div>
          <Box miw={0}>
            <span
              className="inline-flex rounded-full px-[10px] py-1 text-[10.5px] font-extrabold uppercase tracking-[0.3px] text-white"
              style={{ backgroundColor: "#C77F12" }}
            >
              Waiting for a partner
            </span>
            <Text mt={6} fz="15.5px" fw={700} c="#10202F">
              Your shipment is waiting to share a wagon
            </Text>
            <Text mt={2} fz="13px" c="#7A6A4E" className="leading-[1.45]">
              Your cargo only fills part of a wagon, so we’re pairing it with
              another shipment on the same route to share the space. As soon as a
              matching shipment is found, your booking continues automatically —
              acceptance, approval and contract stay independent and yours alone.
            </Text>
          </Box>
        </Group>
        {priceLabel && (
          <div
            className="flex shrink-0 flex-col items-end rounded-xl border border-[#F4D9A8] px-[16px] py-[12px]"
            style={{ backgroundColor: "#fff" }}
          >
            <Text fz="10.5px" fw={700} c="#B07A2A" tt="uppercase" className="tracking-[0.5px]">
              Your price (held)
            </Text>
            <Text mt={3} fz="18px" fw={800} c="#10202F">
              {priceLabel}
            </Text>
          </div>
        )}
      </Group>
    </Paper>
  );
}

/**
 * A brief positive notice shown once a consolidation partner has been found and
 * the booking has resumed the normal flow (SUBMITTED with a partner linked).
 * Reassures the customer the wait ended; the booking proceeds independently.
 */
export function ConsolidationPairedNotice() {
  return (
    <div
      className="flex items-start gap-3 rounded-[14px] border p-4"
      style={{ borderColor: "#BFE6C9", backgroundColor: "#EAF7EE", color: "#1B7A3D" }}
    >
      <CheckCircle2 size={18} className="mt-0.5 shrink-0" />
      <div className="min-w-0">
        <Text fz="13.5px" fw={800} c="#1B7A3D">
          Consolidation partner found
        </Text>
        <Text fz="13px" c="#2E6B43" className="leading-[1.45]">
          A matching shipment was found to share the wagon, so your booking is
          back on track and now moving through review and approval as usual.
          Nothing more is needed from you for now.
        </Text>
      </div>
    </div>
  );
}

export function MutationErrors({
  mutations,
}: {
  mutations: { isError: boolean; error: unknown }[];
}) {
  const errored = mutations.filter((m) => m.isError);
  if (errored.length === 0) return null;
  return (
    <>
      {errored.map((m, i) => (
        <NoticeBanner
          key={i}
          tone="red"
          icon={<AlertCircle size={18} />}
          title="Something went wrong"
        >
          {m.error instanceof Error
            ? m.error.message
            : "An unexpected error occurred."}
        </NoticeBanner>
      ))}
    </>
  );
}
