// ============================================================================
// ordersDesign.js — shared design-system primitives for the operator pages.
//
// Source of truth for the look-and-feel established on the Orders Details
// screen (src/pages/nearle/reports/ordersDetails.js). All other report and
// list pages import from here so the entire admin panel reads as one product.
//
// Exports:
//   DT, BRAND, BRAND_LIGHT            — palette tokens
//   tint / soft / ring / edge         — alpha helpers (08 / 18 / 26 / 55 hex)
//   formatNumberToRupees              — INR currency formatter
//   STATUS_META                       — semantic per-status meta (label/color/icon)
//   StatusBadge                       — filled pill, white text on solid color
//   TimelineCell                      — time-dominant (bold) / date-secondary (muted)
//   MetricPill                        — small money/number pill for table cells
//   SoftPaper                         — autocomplete dropdown surface
//   AccentAvatar                      — colored circular icon avatar
//   pillFieldSx                       — rounded pill text-field styling
//   PrimaryButtonSx / SecondaryButtonSx — unified 32-px action-button system
// ============================================================================

import React from 'react';
import { Avatar, Box, Paper, Stack, Typography } from '@mui/material';
import {
  MdLocalShipping,
  MdHourglassEmpty,
  MdCheckCircle,
  MdCancel,
  MdAccessTime,
  MdHistoryToggleOff,
  MdAssignmentTurnedIn
} from 'react-icons/md';
import dayjs from 'dayjs';

// ----------------------------------------------------------------------------
// Design tokens
// ----------------------------------------------------------------------------
export const DT = {
  radiusPill: 999,
  radiusCard: 16,
  shadowSoft: '0 14px 40px rgba(15, 23, 42, 0.10)',
  shadowMd: '0 8px 24px rgba(15, 23, 42, 0.08)',
  shadowPop: '0 18px 50px rgba(15, 23, 42, 0.18)',
  textPrimary: '#0f172a',
  textSecondary: '#64748b',
  textMuted: '#94a3b8',
  borderSubtle: '#e2e8f0',
  divider: '#f1f5f9',
  surface: '#ffffff',
  surfaceAlt: '#f8fafc'
};

export const BRAND = '#662582';
export const BRAND_LIGHT = '#9255AB';

const dtA = (c, suffix) => `${c}${suffix}`;
export const tint = (c) => dtA(c, '08');
export const soft = (c) => dtA(c, '18');
export const ring = (c) => dtA(c, '26');
export const edge = (c) => dtA(c, '55');

// ----------------------------------------------------------------------------
// Money formatter
// ----------------------------------------------------------------------------
export function formatNumberToRupees(value) {
  return new Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR',
    minimumFractionDigits: 2
  }).format(value || 0);
}

// ----------------------------------------------------------------------------
// Status meta — colors per brand standard:
// green=delivered, amber=pending, blue=created/processing,
// red=cancelled, dark-red=failed, purple=on-hold.
// ----------------------------------------------------------------------------
export const STATUS_META = {
  created:    { label: 'Created',    color: '#3b82f6', icon: MdLocalShipping },
  pending:    { label: 'Pending',    color: '#f59e0b', icon: MdHourglassEmpty },
  accepted:   { label: 'Accepted',   color: '#6366f1', icon: MdAssignmentTurnedIn },
  ready:      { label: 'Accepted',   color: '#6366f1', icon: MdAssignmentTurnedIn },
  arrived:    { label: 'Arrived',    color: '#06b6d4', icon: MdCheckCircle },
  picked:     { label: 'Picked',     color: '#8b5cf6', icon: MdLocalShipping },
  active:     { label: 'Active',     color: '#0ea5e9', icon: MdLocalShipping },
  modified:   { label: 'Confirmed',  color: '#10b981', icon: MdCheckCircle },
  confirmed:  { label: 'Confirmed',  color: '#10b981', icon: MdCheckCircle },
  processing: { label: 'Processing', color: '#3b82f6', icon: MdAccessTime },
  onhold:     { label: 'On Hold',    color: '#8b5cf6', icon: MdHistoryToggleOff },
  'on hold':  { label: 'On Hold',    color: '#8b5cf6', icon: MdHistoryToggleOff },
  closed:     { label: 'Closed',     color: '#06b6d4', icon: MdCheckCircle },
  completed:  { label: 'Completed',  color: '#10b981', icon: MdCheckCircle },
  delivered:  { label: 'Delivered',  color: '#10b981', icon: MdCheckCircle },
  skipped:    { label: 'Skipped',    color: '#f97316', icon: MdCancel },
  failed:     { label: 'Failed',     color: '#991b1b', icon: MdCancel },
  cancelled:  { label: 'Cancelled',  color: '#ef4444', icon: MdCancel }
};

// ----------------------------------------------------------------------------
// StatusBadge — filled pill, white text on solid color, high-contrast.
// ----------------------------------------------------------------------------
export const StatusBadge = ({ status, minWidth = 86 }) => {
  if (!status) return null;
  const meta = STATUS_META[String(status).toLowerCase()] || {
    label: status,
    color: DT.textMuted,
    icon: MdHistoryToggleOff
  };
  const Icon = meta.icon;
  return (
    <Box
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 0.5,
        px: 1.125,
        py: 0.375,
        borderRadius: 999,
        bgcolor: meta.color,
        color: '#fff',
        fontSize: 11,
        fontWeight: 700,
        letterSpacing: 0.2,
        whiteSpace: 'nowrap',
        minWidth,
        justifyContent: 'center',
        boxShadow: `0 1px 2px ${ring(meta.color)}`
      }}
    >
      <Icon size={12} /> {meta.label}
    </Box>
  );
};

// ----------------------------------------------------------------------------
// TimelineCell — time large/bold/high-contrast, date small/muted/secondary.
// No decorative dot.
// ----------------------------------------------------------------------------
export const TimelineCell = ({ value, utc: useUtc = false }) => {
  if (!value) {
    return (
      <Typography sx={{ fontSize: 12, color: DT.textMuted, fontWeight: 700 }}>—</Typography>
    );
  }
  const d = useUtc ? dayjs(value).utc() : dayjs(value);
  return (
    <Stack spacing={0} sx={{ lineHeight: 1.1 }}>
      <Typography
        sx={{
          fontSize: 12.5,
          fontWeight: 800,
          color: DT.textPrimary,
          letterSpacing: 0.1,
          lineHeight: 1.15
        }}
        noWrap
      >
        {d.format('hh:mm A')}
      </Typography>
      <Typography
        sx={{
          fontSize: 10.5,
          fontWeight: 600,
          color: DT.textMuted,
          lineHeight: 1.2
        }}
        noWrap
      >
        {d.format('DD MMM YYYY')}
      </Typography>
    </Stack>
  );
};

// ----------------------------------------------------------------------------
// MetricPill — small money / number pill used in table cells.
// ----------------------------------------------------------------------------
export const MetricPill = ({ value, color, icon, isMoney = false }) => {
  const n = Number(value);
  const display = isMoney ? formatNumberToRupees(n) : Number.isFinite(n) ? n : value || 0;
  const isZero = !Number.isFinite(n) || n === 0;
  if (isZero) {
    return (
      <Typography sx={{ fontSize: 11.5, color: DT.textMuted, fontWeight: 700 }}>
        {display}
      </Typography>
    );
  }
  return (
    <Box
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 0.5,
        px: 0.875,
        py: 0.25,
        borderRadius: 999,
        bgcolor: tint(color),
        border: `1px solid ${edge(color)}`,
        color,
        fontSize: 12,
        fontWeight: 800,
        whiteSpace: 'nowrap'
      }}
    >
      {icon}
      {display}
    </Box>
  );
};

// ----------------------------------------------------------------------------
// SoftPaper — autocomplete dropdown surface.
// ----------------------------------------------------------------------------
export const SoftPaper = (props) => (
  <Paper
    {...props}
    sx={{
      mt: 0.75,
      borderRadius: 2,
      boxShadow: DT.shadowPop,
      border: '1px solid',
      borderColor: 'divider',
      overflow: 'hidden'
    }}
  />
);

// ----------------------------------------------------------------------------
// AccentAvatar — colored circular icon used inside filter chips & headers.
// ----------------------------------------------------------------------------
export const AccentAvatar = ({ color, selected, size = 24, children }) => (
  <Avatar
    sx={{
      width: size,
      height: size,
      bgcolor: selected ? color : soft(color),
      color: selected ? '#fff' : color,
      transition: 'background-color 0.15s, color 0.15s'
    }}
  >
    {children}
  </Avatar>
);

// ----------------------------------------------------------------------------
// pillFieldSx — rounded pill style for Autocomplete/TextField inputs.
// ----------------------------------------------------------------------------
export const pillFieldSx = (color) => ({
  '& .MuiOutlinedInput-root': {
    borderRadius: DT.radiusPill + 'px',
    bgcolor: tint(color),
    fontWeight: 600,
    '& fieldset': { borderColor: edge(color), borderWidth: 1.5 },
    '&:hover fieldset': { borderColor: color },
    '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(color)}` },
    '&.Mui-focused fieldset': { borderColor: color, borderWidth: 2 }
  }
});

// ----------------------------------------------------------------------------
// Unified action-button styles — both render at 32px height with same typography.
// SecondaryButtonSx → outlined (white bg, neutral border)
// PrimaryButtonSx   → filled brand (purple bg, white text)
// ----------------------------------------------------------------------------
export const SecondaryButtonSx = (active = false) => ({
  height: 32,
  px: 1.25,
  borderRadius: 1.5,
  textTransform: 'none',
  fontSize: 12.5,
  fontWeight: 700,
  letterSpacing: 0.1,
  bgcolor: '#fff',
  borderColor: active ? edge(BRAND) : DT.borderSubtle,
  color: active ? BRAND : DT.textPrimary,
  '&:hover': {
    bgcolor: '#fff',
    borderColor: BRAND,
    color: BRAND,
    boxShadow: `0 0 0 3px ${ring(BRAND)}`
  },
  '&:focus-visible': { boxShadow: `0 0 0 3px ${ring(BRAND)}` }
});

export const PrimaryButtonSx = {
  height: 32,
  minHeight: 32,
  px: 1.5,
  borderRadius: 1.5,
  bgcolor: BRAND,
  color: '#fff',
  textTransform: 'none',
  fontSize: 12.5,
  fontWeight: 700,
  letterSpacing: 0.1,
  boxShadow: `0 2px 6px ${ring(BRAND)}`,
  '&:hover': { bgcolor: BRAND_LIGHT, boxShadow: `0 4px 12px ${ring(BRAND)}` },
  '&:focus-visible': { boxShadow: `0 0 0 3px ${ring(BRAND)}` },
  '& .MuiButton-startIcon': { mr: 0.75, '& svg': { fontSize: 16 } }
};

// ----------------------------------------------------------------------------
// PageHeaderShellSx — the gradient header strip used by every operator page.
// Spread onto the outer <Paper> element.
// ----------------------------------------------------------------------------
export const PageHeaderShellSx = {
  mb: { xs: 1, md: 1.25 },
  px: { xs: 1.5, sm: 2 },
  py: { xs: 1, sm: 1.25 },
  borderRadius: 2,
  border: '1px solid',
  borderColor: DT.borderSubtle,
  background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
  boxShadow: DT.shadowMd
};

// ----------------------------------------------------------------------------
// CompactKpiCardSx — visual envelope for a compact KPI card.
// Caller supplies the colored left bar via the `accent` arg.
// ----------------------------------------------------------------------------
export const CompactKpiCardSx = (accentColor) => ({
  position: 'relative',
  overflow: 'hidden',
  px: { xs: 1.25, sm: 1.5 },
  py: { xs: 0.875, sm: 1.125 },
  borderRadius: 2,
  border: '1px solid',
  borderColor: DT.borderSubtle,
  background: '#fff',
  transition: 'transform 0.15s, box-shadow 0.15s, border-color 0.15s',
  '&:hover': {
    transform: 'translateY(-1px)',
    boxShadow: DT.shadowMd,
    borderColor: edge(accentColor)
  }
});

// MdAccessTime re-exported so callers can use the inline time icon
// without an extra react-icons import.
export { MdAccessTime };