'use client'

import { useState, useEffect } from 'react'
import Image from 'next/image'

interface PastDrop {
  id: number
  item: string
  size: number
  fill: number
  unit: string
  ppu: number
  image_url: string | null
  created_at: string
  soldOutInHours: number
}

export default function PastDrops() {
  const [drops, setDrops] = useState<PastDrop[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchPastDrops()
  }, [])

  const fetchPastDrops = async () => {
    try {
      const response = await fetch('/api/drops/past')
      if (response.ok) {
        const data = await response.json()
        setDrops(data)
      }
    } catch (error) {
      console.error('Error fetching past drops:', error)
    } finally {
      setLoading(false)
    }
  }

  const formatSoldOutTime = (hours: number) => {
    if (hours < 1) {
      return 'Sold out in less than 1h'
    } else if (hours === 1) {
      return 'Sold out in 1h'
    } else if (hours < 24) {
      return `Sold out in ${hours}h`
    } else {
      const days = Math.floor(hours / 24)
      const remainingHours = hours % 24
      if (remainingHours === 0) {
        return days === 1 ? 'Sold out in 1 day' : `Sold out in ${days} days`
      } else {
        return `Sold out in ${days}d ${remainingHours}h`
      }
    }
  }

  if (loading) {
    return (
      <div className="past">
        <p style={{ color: 'var(--muted)', textAlign: 'center' }}>Loading past drops...</p>
      </div>
    )
  }

  if (drops.length === 0) {
    return (
      <div className="past">
        <p style={{ color: 'var(--muted)', textAlign: 'center' }}>
          No past drops yet. Check back soon!
        </p>
      </div>
    )
  }

  return (
    <div className="past">
      {drops.map((drop) => (
        <div key={drop.id} className="card">
          {drop.image_url ? (
            <div style={{ marginBottom: '12px' }}>
              <Image
                src={drop.image_url}
                alt={drop.item}
                width={300}
                height={300}
                style={{
                  width: '100%',
                  maxWidth: '300px',
                  height: '300px',
                  borderRadius: '12px',
                  objectFit: 'cover',
                }}
              />
            </div>
          ) : (
            <div
              style={{
                width: '100%',
                maxWidth: '300px',
                height: '300px',
                background: 'var(--bg-soft)',
                borderRadius: '12px',
                marginBottom: '12px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'var(--muted)',
              }}
            >
              No Image
            </div>
          )}
          <strong>{drop.item}</strong>
          <br />
          <span className="meta">{formatSoldOutTime(drop.soldOutInHours)}</span>
        </div>
      ))}
    </div>
  )
}