'use client';

import React from 'react';
import { AlertTriangle, ArrowRight, Package } from 'lucide-react';
import { toast } from 'sonner';

interface StockItem {
  id: string;
  name: string;
  sku: string;
  current: number;
  reorderLevel: number;
  unit: string;
  severity: 'critical' | 'low' | 'warning';
}

const lowStockItems: StockItem[] = [
  { id: 'stock-001', name: 'Cooking Oil 5L', sku: 'OIL-5L-001', current: 0, reorderLevel: 20, unit: 'units', severity: 'critical' },
  { id: 'stock-002', name: 'Maize Flour 2kg', sku: 'FLR-2KG-001', current: 4, reorderLevel: 30, unit: 'bags', severity: 'critical' },
  { id: 'stock-003', name: 'Bread Loaf 400g', sku: 'BRD-400G-001', current: 8, reorderLevel: 24, unit: 'loaves', severity: 'low' },
  { id: 'stock-004', name: 'Milk 500ml (Fresh)', sku: 'MLK-500-001', current: 12, reorderLevel: 36, unit: 'packs', severity: 'low' },
  { id: 'stock-005', name: 'Sugar 1kg', sku: 'SUG-1KG-001', current: 18, reorderLevel: 40, unit: 'bags', severity: 'warning' },
  { id: 'stock-006', name: 'Tomato Paste 70g', sku: 'TOM-70G-001', current: 22, reorderLevel: 48, unit: 'tins', severity: 'warning' },
  { id: 'stock-007', name: 'Washing Powder 500g', sku: 'WSH-500G-001', current: 7, reorderLevel: 20, unit: 'packs', severity: 'low' },
];

const severityConfig = {
  critical: { label: 'Critical', badgeClass: 'badge-danger', barColor: 'bg-danger' },
  low: { label: 'Low', badgeClass: 'badge-warning', barColor: 'bg-warning' },
  warning: { label: 'Warning', badgeClass: 'badge-neutral', barColor: 'bg-muted-foreground' },
};

export default function LowStockPanel() {
  return (
    <div className="card-elevated rounded-xl overflow-hidden">
      <div className="flex items-center justify-between px-4 py-3.5 border-b border-border bg-danger-bg/20">
        <div className="flex items-center gap-2">
          <AlertTriangle size={16} className="text-danger" />
          <h3 className="text-sm font-600 text-foreground">Low Stock Alerts</h3>
          <span className="badge-danger text-xs px-1.5 py-0.5 rounded-full font-700">7</span>
        </div>
        <button
          onClick={() => toast.info('Opening full inventory view')}
          className="flex items-center gap-1 text-xs text-primary font-600 hover:underline"
        >
          View All <ArrowRight size={11} />
        </button>
      </div>

      <ul className="divide-y divide-border">
        {lowStockItems.map((item) => {
          const config = severityConfig[item.severity];
          const pct = item.current === 0 ? 0 : Math.round((item.current / item.reorderLevel) * 100);
          return (
            <li key={item.id} className="px-4 py-3 hover:bg-muted/30 transition-colors">
              <div className="flex items-start justify-between gap-2 mb-1.5">
                <div className="flex items-center gap-2 min-w-0">
                  <Package size={13} className="text-muted-foreground flex-shrink-0" />
                  <div className="min-w-0">
                    <p className="text-xs font-600 text-foreground truncate">{item.name}</p>
                    <p className="text-xs text-muted-foreground font-mono">{item.sku}</p>
                  </div>
                </div>
                <span className={`text-xs px-1.5 py-0.5 rounded-full font-600 flex-shrink-0 ${config.badgeClass}`}>
                  {config.label}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
                  <div
                    className={`h-full rounded-full ${config.barColor}`}
                    style={{ width: `${Math.min(pct, 100)}%` }}
                  />
                </div>
                <span className="text-xs font-tabular font-600 text-foreground whitespace-nowrap">
                  {item.current}/{item.reorderLevel} {item.unit}
                </span>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}