'use client'

import React from 'react'
import Link from 'next/link'
import { motion, useReducedMotion } from 'framer-motion'
import { Badge } from './Badge'
import './SpotCard.css'

export type Difficulty = 'BEGINNER' | 'INTERMEDIATE' | 'ADVANCED' | 'EXPERT'

export interface Spot {
  id: string
  name: string
  description: string
  difficulty: Difficulty
  coverImage: string | null
  tags: string[]
  avgRating: number | null
  reviewCount: number
}

export interface SpotCardProps {
  spot: Spot
  className?: string
}

const DIFFICULTY_LABEL: Record<Difficulty, string> = {
  BEGINNER: 'Iniciante',
  INTERMEDIATE: 'Intermédio',
  ADVANCED: 'Avançado',
  EXPERT: 'Expert',
}

const DIFFICULTY_COLOR: Record<Difficulty, 'green' | 'blue' | 'orange' | 'red'> = {
  BEGINNER: 'green',
  INTERMEDIATE: 'blue',
  ADVANCED: 'orange',
  EXPERT: 'red',
}

// Drone SVG icon placeholder
function DroneIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <circle cx="10" cy="10" r="5" stroke="currentColor" strokeWidth="2" />
      <circle cx="30" cy="10" r="5" stroke="currentColor" strokeWidth="2" />
      <circle cx="10" cy="30" r="5" stroke="currentColor" strokeWidth="2" />
      <circle cx="30" cy="30" r="5" stroke="currentColor" strokeWidth="2" />
      <rect x="14" y="18" width="12" height="4" rx="2" fill="currentColor" />
      <line x1="10" y1="14" x2="14" y2="18" stroke="currentColor" strokeWidth="2" />
      <line x1="30" y1="14" x2="26" y2="18" stroke="currentColor" strokeWidth="2" />
      <line x1="10" y1="26" x2="14" y2="22" stroke="currentColor" strokeWidth="2" />
      <line x1="30" y1="26" x2="26" y2="22" stroke="currentColor" strokeWidth="2" />
    </svg>
  )
}

function StarIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 12 12"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path d="M6 1l1.4 2.8 3.1.45-2.25 2.19.53 3.08L6 8.02 3.22 9.52l.53-3.08L1.5 4.25l3.1-.45L6 1z" />
    </svg>
  )
}

export function SpotCard({ spot, className = '' }: SpotCardProps) {
  const shouldReduceMotion = useReducedMotion()

  const motionProps = shouldReduceMotion
    ? {}
    : {
        whileHover: {
          y: -4,
          boxShadow: '0 30px 60px -30px rgba(13,27,42,0.35)',
          borderColor: 'var(--ov-blue-100)',
        },
        transition: { duration: 0.24, ease: [0.22, 0.61, 0.36, 1] },
      }

  const visibleTags = spot.tags.slice(0, 3)

  return (
    <motion.div
      className={`ov-spot-card${className ? ` ${className}` : ''}`}
      {...motionProps}
    >
      <Link href={`/spots/${spot.id}`} className="ov-spot-card" style={{ display: 'contents' }}>
        {/* Cover image */}
        <div className="ov-spot-card__cover">
          {spot.coverImage ? (
            <img src={spot.coverImage} alt={spot.name} loading="lazy" />
          ) : (
            <div className="ov-spot-card__cover-placeholder">
              <DroneIcon className="ov-spot-card__cover-icon" />
            </div>
          )}
        </div>

        {/* Body */}
        <div className="ov-spot-card__body">
          {/* Header: name + difficulty */}
          <div className="ov-spot-card__header">
            <h3 className="ov-spot-card__name">{spot.name}</h3>
            <Badge
              label={DIFFICULTY_LABEL[spot.difficulty]}
              color={DIFFICULTY_COLOR[spot.difficulty]}
            />
          </div>

          {/* Description */}
          {spot.description && (
            <p className="ov-spot-card__desc">{spot.description}</p>
          )}

          {/* Meta: rating + reviews */}
          {(spot.avgRating !== null || spot.reviewCount > 0) && (
            <div className="ov-spot-card__meta">
              {spot.avgRating !== null && (
                <span className="ov-spot-card__rating">
                  <StarIcon className="ov-spot-card__star" />
                  {spot.avgRating}
                </span>
              )}
              {spot.reviewCount > 0 && (
                <span className="ov-spot-card__reviews">
                  {spot.reviewCount} {spot.reviewCount === 1 ? 'avaliação' : 'avaliações'}
                </span>
              )}
            </div>
          )}

          {/* Tags */}
          {visibleTags.length > 0 && (
            <ul className="ov-spot-card__tags" aria-label="Tags">
              {visibleTags.map((tag) => (
                <li key={tag} className="ov-spot-card__tag">
                  {tag}
                </li>
              ))}
            </ul>
          )}
        </div>
      </Link>
    </motion.div>
  )
}