'use client'
import Link from 'next/link'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { STATUS_LABELS, STATUS_COLORS } from '@/types'
import { cn, formatDate } from '@/lib/utils'
import type { OperationStatus } from '@/types'

const MOCK_OPS = [
  { id: '1', internal_code: '2026-0015', property_address: 'Av. Corrientes 1234', owner_name: 'García, Roberto', tenant_name: 'López, María', status: 'contrato_en_confeccion' as OperationStatus, progress: 68, created_at: '2026-05-10' },
  { id: '2', internal_code: '2026-0014', property_address: 'Belgrano 567, 3°B', owner_name: 'Martínez, Ana', tenant_name: 'Rodríguez, Carlos', status: 'listo_para_firma' as OperationStatus, progress: 95, created_at: '2026-05-08' },
  { id: '3', internal_code: '2026-0012', property_address: 'San Martín 890', owner_name: 'Pérez, Laura', tenant_name: 'González, Juan', status: 'documentacion_pendiente' as OperationStatus, progress: 40, created_at: '2026-05-05' },
  { id: '4', internal_code: '2026-0011', property_address: 'Rivadavia 2345, PH', owner_name: 'Torres, Diego', tenant_name: 'Sánchez, Paula', status: 'enviado_propietario' as OperationStatus, progress: 78, created_at: '2026-05-01' },
  { id: '5', internal_code: '2026-0010', property_address: 'Mitre 456, 2°A', owner_name: 'Ruiz, Marcela', tenant_name: 'Fernández, Luis', status: 'firmado' as OperationStatus, progress: 100, created_at: '2026-04-28' },
]

export function RecentOperations() {
  return (
    <div className="bg-card border border-border rounded-xl p-5">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-sm font-semibold text-foreground">Operaciones Recientes</h3>
        <Link href="/operaciones" className="text-xs text-primary hover:underline">Ver todas →</Link>
      </div>
      <div className="space-y-3">
        {MOCK_OPS.map((op) => (
          <Link key={op.id} href={`/operaciones/${op.id}`}>
            <div className="flex items-center gap-3 p-3 rounded-lg hover:bg-accent transition-colors cursor-pointer">
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-0.5">
                  <span className="text-xs font-mono text-muted-foreground">{op.internal_code}</span>
                  <Badge className={cn('text-xs px-2 py-0', STATUS_COLORS[op.status])}>
                    {STATUS_LABELS[op.status]}
                  </Badge>
                </div>
                <p className="text-sm font-medium text-foreground truncate">{op.property_address}</p>
                <p className="text-xs text-muted-foreground truncate">{op.tenant_name} · {op.owner_name}</p>
              </div>
              <div className="w-24 flex-shrink-0">
                <div className="flex justify-between text-xs text-muted-foreground mb-1">
                  <span>Progreso</span>
                  <span>{op.progress}%</span>
                </div>
                <Progress value={op.progress} className="h-1.5" />
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}