/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * Console UI kit — the shared visual language ported from the operations console
 * (nearle_console). Orders / Deliveries / Delivery-Reports all render against this
 * so they match the source design exactly: brand purple #662582, the tint/soft/
 * ring/edge alpha scale, pill filters + tabs, KPI cards with a gradient top-bar,
 * status chips, metric pills, stamp cells, gradient headers and total bars.
 *
 * Per the design's own model, accent colours are data-driven (per status / per
 * card), so colour-bearing bits use inline styles (the natural translation of the
 * source's MUI `sx`) while layout/spacing use Tailwind.
 */

import React, { useEffect } from 'react';
import { createPortal } from 'react-dom';
import { X, Info } from 'lucide-react';

// ── Design tokens ────────────────────────────────────────────────────────────────
export const BRAND = '#662582';
export const BRAND_LIGHT = '#9255AB';
export const TEXT = '#0f172a';
export const TEXT_2 = '#64748b';
export const TEXT_3 = '#94a3b8';
export const BORDER = '#e2e8f0';
export const DIVIDER = '#f1f5f9';
export const SURFACE_ALT = '#f8fafc';
export const SHADOW_MD = '0 8px 24px rgba(15, 23, 42, 0.08)';
export const SHADOW_SOFT = '0 14px 40px rgba(15, 23, 42, 0.10)';
export const SHADOW_POP = '0 18px 50px rgba(15, 23, 42, 0.18)';

/** Alpha helpers — append #RRGGBBAA suffixes (08≈3%, 18≈9%, 26≈15%, 55≈33%). */
export const tint = (c: string) => `${c}08`;
export const soft = (c: string) => `${c}18`;
export const ring = (c: string) => `${c}26`;
export const edge = (c: string) => `${c}55`;

// ── Status colour maps ───────────────────────────────────────────────────────────
/** Order lifecycle (orders board). */
export const ORDER_STATUS: Record<string, string> = {
  created: '#0ea5e9',
  pending: '#f59e0b',
  processing: '#0ea5e9',
  modified: '#06b6d4',
  confirmed: '#10b981',
  accepted: '#6366f1',
  ready: '#6366f1',
  delivered: '#10b981',
  cancelled: '#ef4444',
};
/** Delivery lifecycle (STATUS_META). */
export const DELIVERY_STATUS: Record<string, string> = {
  pending: '#f59e0b',
  accepted: '#6366f1',
  arrived: '#06b6d4',
  picked: '#8b5cf6',
  active: '#14b8a6',
  skipped: '#f97316',
  delivered: '#10b981',
  cancelled: '#ef4444',
};
export const statusColor = (map: Record<string, string>, s: string) => map[s.toLowerCase()] || TEXT_2;

// ── Gradient header ──────────────────────────────────────────────────────────────
export function GradientHeader({
  title,
  subtitle,
  status,
  right,
}: {
  title: string;
  subtitle?: string;
  status?: React.ReactNode;
  right?: React.ReactNode;
}) {
  return (
    <div
      className="rounded-2xl border p-4 sm:p-5 mb-4"
      style={{ borderColor: BORDER, background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`, boxShadow: SHADOW_MD }}
    >
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
        <div className="flex items-center gap-3 min-w-0">
          <span
            className="hidden sm:flex shrink-0 items-center justify-center rounded-2xl text-white"
            style={{ width: 46, height: 46, background: `linear-gradient(135deg, ${BRAND}, ${BRAND_LIGHT})`, boxShadow: `0 6px 18px ${ring(BRAND)}` }}
          >
            <BrandMark />
          </span>
          <div className="min-w-0">
            <h1 className="font-extrabold tracking-tight leading-tight text-[1.4rem] md:text-[1.75rem]" style={{ color: TEXT }}>
              {title}
            </h1>
            {subtitle && <p className="text-xs mt-0.5" style={{ color: TEXT_2 }}>{subtitle}</p>}
            {status && <div className="mt-1">{status}</div>}
          </div>
        </div>
        {right && <div className="shrink-0">{right}</div>}
      </div>
    </div>
  );
}

function BrandMark() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 7h13l5 5-5 5H3z" />
      <circle cx="8" cy="12" r="1.5" />
    </svg>
  );
}

/** Live / loading / error status line used under the header title. */
export function LiveStatus({ state, label }: { state: 'live' | 'loading' | 'error'; label: string }) {
  const color = state === 'error' ? '#ef4444' : state === 'loading' ? '#94a3b8' : '#10b981';
  return (
    <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold" style={{ color: TEXT_2 }}>
      <span
        className={`rounded-full ${state === 'loading' ? 'animate-pulse' : ''}`}
        style={{ width: 8, height: 8, background: color, boxShadow: state === 'live' ? `0 0 0 4px ${color}2e` : undefined }}
      />
      {label}
    </span>
  );
}

// ── KPI cards ────────────────────────────────────────────────────────────────────
export interface KpiItem {
  label: string;
  value: string;
  color: string;
  icon: React.ReactNode;
  badge?: string;
  onClick?: () => void;
  active?: boolean;
}
export function KpiStrip({ items, loading }: { items: KpiItem[]; loading?: boolean }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
      {items.map((it) => (
        <div
          key={it.label}
          onClick={it.onClick}
          className={`rounded-xl p-3 flex flex-col justify-between transition-all duration-300 text-left relative group border bg-white ${it.active ? 'border-indigo-500 opacity-100 shadow-[0_8px_24px_rgba(99,102,241,0.06)]' : 'border-slate-200/70 opacity-70 hover:opacity-100'} ${it.onClick ? 'cursor-pointer' : ''}`}
        >
          <div className="flex justify-between items-start w-full">
            <span className="text-[10px] text-slate-500 uppercase tracking-widest font-bold">
              {it.label}
            </span>
            <div 
              className="p-1.5 rounded-lg transition-transform group-hover:scale-110 flex items-center justify-center shrink-0"
              style={{ background: soft(it.color), color: it.color }}
            >
              {React.cloneElement(it.icon as React.ReactElement, { className: 'w-3.5 h-3.5' })}
            </div>
          </div>
          <div className="mt-2 w-full">
            <h3 className="text-lg font-extrabold tracking-tight font-mono text-slate-900 truncate">
              {loading ? '—' : it.value}
            </h3>
            {it.badge && (
              <p className="text-[10px] text-slate-400 font-semibold mt-0.5">
                {it.badge}
              </p>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Pill (filter chip / tab) ─────────────────────────────────────────────────────
interface PillProps {
  active: boolean;
  color: string;
  onClick?: () => void;
  title?: string;
  children: React.ReactNode;
  count?: number | string;
}
export function Pill({ active, color, onClick, title, children, count }: PillProps) {
  return (
    <button
      onClick={onClick}
      title={title}
      className="inline-flex items-center gap-1.5 rounded-full font-bold whitespace-nowrap transition-all duration-150 cursor-pointer shrink-0"
      style={
        active
          ? { padding: '5px 12px', fontSize: 12.5, background: color, color: '#fff', border: `1.5px solid ${color}`, boxShadow: `0 6px 18px ${ring(color)}` }
          : { padding: '5px 12px', fontSize: 12.5, background: tint(color), color, border: `1.5px solid ${edge(color)}` }
      }
    >
      {children}
      {count != null && (
        <span
          className="inline-flex items-center justify-center rounded-full font-extrabold"
          style={
            active
              ? { minWidth: 22, height: 18, padding: '0 6px', fontSize: 10.5, background: 'rgba(255,255,255,0.22)', color: '#fff' }
              : { minWidth: 22, height: 18, padding: '0 6px', fontSize: 10.5, background: '#fff', color, border: `1px solid ${edge(color)}` }
          }
        >
          {count}
        </span>
      )}
    </button>
  );
}

// ── Status chip (table cell) ─────────────────────────────────────────────────────
export function StatusChip({ label, color }: { label: string; color: string }) {
  return (
    <span
      className="inline-flex items-center gap-1 rounded-full font-extrabold uppercase whitespace-nowrap"
      style={{ padding: '3px 9px', fontSize: 10.5, background: tint(color), border: `1px solid ${edge(color)}`, color, letterSpacing: 0.3 }}
    >
      {label}
    </span>
  );
}

// ── Metric pill (km / amount / count cells) ──────────────────────────────────────
export function MetricPill({ color, children, minWidth }: { color: string; children: React.ReactNode; minWidth?: number }) {
  return (
    <span
      className="inline-flex items-center justify-center gap-1 rounded-full font-extrabold whitespace-nowrap"
      style={{ padding: '2px 9px', fontSize: 11, background: tint(color), border: `1px solid ${edge(color)}`, color, minWidth }}
    >
      {children}
    </span>
  );
}

// ── Stamp cell (date over time) ──────────────────────────────────────────────────
export function StampCell({ date, time }: { date?: string; time?: string }) {
  if (!date && !time) return <span style={{ color: TEXT_3 }}>—</span>;
  return (
    <div className="leading-tight">
      {date && <div className="text-[11px] font-semibold whitespace-nowrap" style={{ color: TEXT_2 }}>{date}</div>}
      {time && <div className="text-[11px] font-extrabold whitespace-nowrap" style={{ color: TEXT }}>{time}</div>}
    </div>
  );
}

// ── Search pill ──────────────────────────────────────────────────────────────────
export function SearchPill({ value, onChange, placeholder, color = BRAND, inputRef }: { value: string; onChange: (v: string) => void; placeholder?: string; color?: string; inputRef?: React.Ref<HTMLInputElement> }) {
  return (
    <div className="relative w-full">
      <svg className="absolute left-3 top-1/2 -translate-y-1/2" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round">
        <circle cx="11" cy="11" r="7" />
        <path d="m21 21-4.3-4.3" />
      </svg>
      <input
        ref={inputRef}
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="block w-full rounded-full outline-none font-medium transition-all box-border"
        style={{ height: 38, paddingLeft: 32, paddingRight: value ? 30 : 14, fontSize: 12.5, background: tint(color), border: `1.5px solid ${edge(color)}`, color: TEXT }}
        onFocus={(e) => { e.currentTarget.style.borderColor = color; e.currentTarget.style.boxShadow = `0 0 0 3px ${ring(color)}`; }}
        onBlur={(e) => { e.currentTarget.style.borderColor = edge(color); e.currentTarget.style.boxShadow = 'none'; }}
      />
      {value && (
        <button onClick={() => onChange('')} className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer" style={{ color: TEXT_3 }} title="Clear">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
        </button>
      )}
    </div>
  );
}

// ── Card shells & table head cell ────────────────────────────────────────────────
export function Card({ children, className = '', flush }: { children: React.ReactNode; className?: string; flush?: 'top' }) {
  return (
    <div
      className={`bg-white border ${flush === 'top' ? 'rounded-b-2xl' : 'rounded-2xl'} ${className}`}
      style={{ borderColor: BORDER }}
    >
      {children}
    </div>
  );
}

/** Filter/tab bar paper that visually joins the table below it (flat bottom). */
export function FilterBar({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={`bg-white border rounded-2xl p-3 sm:p-4 ${className}`} style={{ borderColor: BORDER, boxShadow: SHADOW_MD }}>
      {children}
    </div>
  );
}

export const TH_STYLE: React.CSSProperties = {
  background: SURFACE_ALT,
  color: TEXT_2,
  fontSize: 10.5,
  fontWeight: 800,
  letterSpacing: 0.6,
  textTransform: 'uppercase',
  whiteSpace: 'nowrap',
  borderBottom: `1px solid ${BORDER}`,
};

export function TableShell({ head, children, minWidth, footer }: { head: string[]; children: React.ReactNode; minWidth?: number; footer?: React.ReactNode }) {
  return (
    <div className="bg-white rounded-2xl border overflow-hidden shadow-sm flex flex-col" style={{ borderColor: BORDER }}>
      <div className="overflow-x-auto flex-1">
        <table className="w-full text-sm text-left whitespace-nowrap" style={{ minWidth }}>
          <thead className="sticky top-0 z-10" style={TH_STYLE}>
            <tr>
              {head.map((h, i) => (
                <th key={i} className={`px-4 py-3 ${i > 1 ? 'text-right' : ''}`}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y" style={{ borderColor: DIVIDER }}>
            {children}
          </tbody>
        </table>
      </div>
      {footer}
    </div>
  );
}

// ── Spinny UX Components ─────────────────────────────────────────────────────────

/** 
 * Beautiful Skeleton Loader for empty/loading states.
 * Uses a pulsing animation to match shape before data arrives.
 */
export function Skeleton({ className = '', style }: { className?: string; style?: React.CSSProperties }) {
  return (
    <div 
      className={`animate-pulse bg-slate-200/60 rounded-md ${className}`} 
      style={style}
    />
  );
}

/**
 * Interactive Tooltip (Jargon Buster).
 * Wraps children and shows a sleek dark explanation box on hover.
 */
export function Tooltip({ children, content, position = 'top' }: { children: React.ReactNode; content: React.ReactNode; position?: 'top' | 'bottom' }) {
  return (
    <div className="relative flex items-center group cursor-help w-max">
      {children}
      <div className={`absolute ${position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'} left-1/2 -translate-x-1/2 hidden group-hover:block w-max max-w-[250px] z-[100] animate-in fade-in zoom-in-95 duration-200`}>
        <div className="bg-[#0f172a] text-white text-[10px] font-medium p-2.5 rounded-xl shadow-xl border border-white/10 text-center leading-relaxed">
          {content}
        </div>
        <div className={`absolute ${position === 'top' ? 'top-full border-t-[#0f172a] border-x-transparent border-b-transparent' : 'bottom-full border-b-[#0f172a] border-x-transparent border-t-transparent'} left-1/2 -translate-x-1/2 border-[5px]`} />
      </div>
    </div>
  );
}

/**
 * "Quick Look" Slide-out Drawer.
 * Slides in from the right edge of the screen.
 */
export function SlideDrawer({ 
  isOpen, 
  onClose, 
  title, 
  children 
}: { 
  isOpen: boolean; 
  onClose: () => void; 
  title: string; 
  children: React.ReactNode;
}) {
  
  // Prevent body scroll when open
  useEffect(() => {
    if (isOpen) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[200]">
      {/* Muted Backdrop */}
      <div 
        className="absolute inset-0 bg-slate-900/40 transition-opacity" 
        onClick={onClose}
      />
      
      {/* Pure, Clean Drawer Panel */}
      <div className="absolute right-0 top-0 bottom-0 z-50 w-[520px] max-w-[100vw] bg-white shadow-[-10px_0_40px_rgba(0,0,0,0.08)] flex flex-col animate-in slide-in-from-right duration-300 ease-out">
        {/* Minimalist Header */}
        <div className="flex items-center justify-between px-7 py-5 bg-[#662582] border-b border-purple-900 z-10 shrink-0">
          <h2 className="text-lg font-bold text-white tracking-tight">{title}</h2>
          <button 
            onClick={onClose}
            className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/10 text-white/80 hover:text-white transition-colors"
          >
            <X size={20} strokeWidth={2} />
          </button>
        </div>
        
        {/* Scrollable Content */}
        <div className="flex-1 overflow-y-auto overflow-x-hidden px-7 py-6 scroll-smooth" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
          {/* Injecting CSS to hide webkit scrollbar */}
          <style dangerouslySetInnerHTML={{__html: `
            .flex-1.overflow-y-auto::-webkit-scrollbar { display: none; }
          `}} />
          {children}
        </div>
      </div>
    </div>
  );
}
