'use client';
import { useMutation } from '@tanstack/react-query';
import api from '@/lib/api';
import { formatDate, formatCurrency } from '@/lib/utils';
import { CheckCircle, Clock, AlertCircle, Wrench, ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';
import Link from 'next/link';

const STATUS_CONFIG = {
  OPEN: { label: 'Aberta', color: 'bg-blue-100 text-blue-700', icon: Clock },
  IN_PROGRESS: { label: 'Em andamento', color: 'bg-amber-100 text-amber-700', icon: Wrench },
  WAITING_PARTS: { label: 'Aguardando peças', color: 'bg-purple-100 text-purple-700', icon: AlertCircle },
  DONE: { label: 'Concluída', color: 'bg-green-100 text-green-700', icon: CheckCircle },
  CANCELLED: { label: 'Cancelada', color: 'bg-gray-100 text-gray-700', icon: AlertCircle },
};

interface Props { order: any; onUpdate: () => void; }

export function OrderCard({ order, onUpdate }: Props) {
  const status = STATUS_CONFIG[order.status as keyof typeof STATUS_CONFIG] || STATUS_CONFIG.OPEN;
  const Icon = status.icon;

  const updateStatus = useMutation({
    mutationFn: (newStatus: string) => api.put(`/orders/${order.id}`, { status: newStatus }),
    onSuccess: onUpdate,
  });

  return (
    <div className="bg-white rounded-xl border border-gray-200 hover:shadow-md transition-shadow p-4">
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-xs font-mono text-gray-400">OS #{order.number}</span>
            <span className={cn('text-xs px-2 py-0.5 rounded-full font-medium', status.color)}>
              <Icon className="w-3 h-3 inline mr-1" />
              {status.label}
            </span>
            {order.priority === 'URGENT' && (
              <span className="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full font-medium">Urgente</span>
            )}
          </div>

          <p className="font-semibold text-gray-900 truncate">{order.client?.name}</p>
          <p className="text-sm text-gray-600 truncate">{order.description}</p>

          <div className="flex items-center gap-3 mt-2 text-xs text-gray-500">
            <span>{order.serviceType}</span>
            {order.value && <><span>·</span><span className="font-medium text-gray-700">{formatCurrency(Number(order.value))}</span></>}
            {order.technician && <><span>·</span><span>{order.technician.name}</span></>}
            <span>·</span>
            <span>{formatDate(order.createdAt)}</span>
          </div>
        </div>

        <div className="flex items-center gap-2">
          {order.status !== 'DONE' && order.status !== 'CANCELLED' && (
            <select
              value={order.status}
              onChange={(e) => updateStatus.mutate(e.target.value)}
              className="text-xs border border-gray-200 rounded-lg px-2 py-1 bg-white focus:ring-2 focus:ring-blue-500 outline-none"
              onClick={(e) => e.stopPropagation()}
            >
              <option value="OPEN">Aberta</option>
              <option value="IN_PROGRESS">Em andamento</option>
              <option value="WAITING_PARTS">Aguardando peças</option>
              <option value="DONE">Concluída</option>
            </select>
          )}
          <Link href={`/orders/${order.id}`} className="p-2 rounded-lg hover:bg-gray-100 text-gray-400 transition-colors">
            <ChevronRight className="w-4 h-4" />
          </Link>
        </div>
      </div>
    </div>
  );
}
