'use client'
// src/components/partners/PartnerCard.tsx
// Input: partner: Partner, index for stagger, onDeploy callback
// Output: animated card with partner info, badges, stats, and deploy button
// Rationale: primary unit of the partners grid

import { motion } from 'framer-motion'
import { Rocket, MapPin, Eye, ShieldCheck } from 'lucide-react'
import { Badge } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { StatusDot } from '@/components/ui/StatusDot'
import { Tooltip } from '@/components/ui/Tooltip'
import { relativeTime } from '@/lib/utils'
import { cn } from '@/lib/utils'
import type { Partner } from '@/types'

// ── Label mappings ────────────────────────────────────────────────────────────

const statusLabel: Record<Partner['status'], string> = {
  active: 'Actif',
  suspended: 'Suspendu',
  pending: 'En attente',
}

const statusVariant: Record<Partner['status'], 'success' | 'danger' | 'warning'> = {
  active: 'success',
  suspended: 'danger',
  pending: 'warning',
}

const statusDot: Record<Partner['status'], 'online' | 'offline' | 'warning'> = {
  active: 'online',
  suspended: 'offline',
  pending: 'warning',
}

const licenseLabel: Record<Partner['licenseType'], string> = {
  read_only: 'Lecture seule',
  full: 'Accès complet',
  admin: 'Admin',
}

const licenseVariant: Record<Partner['licenseType'], 'neutral' | 'accent' | 'info'> = {
  read_only: 'neutral',
  full: 'accent',
  admin: 'info',
}

// ── Initials avatar ───────────────────────────────────────────────────────────

function getInitials(name: string): string {
  return name
    .split(/\s+/)
    .slice(0, 2)
    .map((w) => w[0])
    .join('')
    .toUpperCase()
}

// ── Component ─────────────────────────────────────────────────────────────────

interface PartnerCardProps {
  partner: Partner
  index?: number
  onDeploy: (partner: Partner) => void
}

export function PartnerCard({ partner, index = 0, onDeploy }: PartnerCardProps) {
  const isSuspended = partner.status === 'suspended'

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{
        duration: 0.4,
        delay: index * 0.07,
        ease: [0.16, 1, 0.3, 1],
      }}
      whileHover={{ y: -2 }}
    >
      <div
        className={cn(
          'relative flex flex-col h-full rounded-lg border overflow-hidden',
          'bg-bg-elevated shadow-md',
          'transition-all duration-[150ms]',
          'hover:border-accent-border hover:shadow-[0_4px_20px_rgba(0,0,0,0.5),0_0_12px_rgba(61,184,232,0.12)]',
          isSuspended ? 'border-l-[3px] border-l-status-danger border-bg-border' : 'border-bg-border',
        )}
      >
        {/* Header row: avatar + name + location */}
        <div className="flex items-center gap-3 px-4 pt-4 pb-3">
          {/* Initials avatar */}
          <div
            className={cn(
              'flex items-center justify-center w-10 h-10 rounded-full shrink-0',
              'bg-accent-subtle border border-accent-border',
              'text-accent font-semibold text-[13px] select-none',
            )}
          >
            {getInitials(partner.name)}
          </div>

          <div className="flex-1 min-w-0">
            <h2 className="text-[14px] font-semibold text-text-primary truncate leading-snug">
              {partner.name}
            </h2>
            <div className="flex items-center gap-1 mt-0.5">
              <MapPin size={11} strokeWidth={1.5} className="text-text-muted shrink-0" />
              <span className="text-caption text-text-muted truncate">
                {partner.city}, {partner.country}
              </span>
            </div>
          </div>

          {/* Status dot */}
          <StatusDot status={statusDot[partner.status]} size="md" />
        </div>

        {/* Badges row */}
        <div className="flex items-center gap-1.5 flex-wrap px-4 pb-3">
          <Badge variant={statusVariant[partner.status]} size="xs">
            {statusLabel[partner.status]}
          </Badge>
          <Badge variant={licenseVariant[partner.licenseType]} size="xs">
            {licenseLabel[partner.licenseType]}
          </Badge>
          <Badge variant="neutral" size="xs">
            {partner.currentVersion}
          </Badge>
        </div>

        {/* Stats row */}
        <div className="grid grid-cols-2 gap-3 px-4 pb-3 border-t border-bg-border pt-3">
          <div className="flex flex-col gap-0.5">
            <span className="text-label text-text-muted uppercase tracking-[0.05em]">Projets</span>
            <span className="font-mono text-[15px] font-medium text-text-primary">
              {partner.projectsCount}
            </span>
          </div>
          <div className="flex flex-col gap-0.5">
            <span className="text-label text-text-muted uppercase tracking-[0.05em]">Dernier déploiement</span>
            <span className="font-mono text-[11px] text-text-secondary leading-5">
              {partner.lastDeployAt ? relativeTime(partner.lastDeployAt) : '—'}
            </span>
          </div>
        </div>

        {/* Footer: actions */}
        <div className="flex items-center justify-between gap-2 px-4 py-2.5 border-t border-bg-border bg-bg-base/40 mt-auto">
          {/* Build chiffré badge (shown if has lastDeployAt) */}
          {partner.lastDeployAt ? (
            <Tooltip content="Le code source Python est chiffré et non lisible par le partenaire." side="top">
              <span className="inline-flex items-center gap-1 px-1.5 py-px text-[10px] leading-4 border rounded-sm uppercase tracking-[0.05em] bg-status-success/15 border-status-success/40 text-status-success cursor-default">
                <ShieldCheck size={10} strokeWidth={1.5} />
                Build chiffré
              </span>
            </Tooltip>
          ) : (
            <span />
          )}

          <div className="flex items-center gap-2">
            <Button variant="ghost" size="sm" iconLeft={<Eye size={14} strokeWidth={1.5} />}>
              Détails
            </Button>
            <Button
              variant="primary"
              size="sm"
              iconLeft={<Rocket size={14} strokeWidth={1.5} />}
              disabled={isSuspended}
              onClick={() => onDeploy(partner)}
            >
              Déployer
            </Button>
          </div>
        </div>
      </div>
    </motion.div>
  )
}