'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
}

interface PastDropsProps {
  limit?: number
  showMoreLink?: boolean
}

export default function PastDrops({ limit, showMoreLink = false }: PastDropsProps = {}) {
  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`
      }
    }
  }

  const formatDateAndTime = (dateString: string) => {
    const date = new Date(dateString)
    const day = date.getDate()
    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    const month = monthNames[date.getMonth()]
    const hours = date.getHours().toString().padStart(2, '0')
    const minutes = date.getMinutes().toString().padStart(2, '0')
    return `${day} ${month} · ${hours}:${minutes}`
  }

  const formatQuantity = (size: number, unit: string) => {
    return `${size}${unit}`
  }

  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>
    )
  }

  const displayedDrops = limit ? drops.slice(0, limit) : drops
  const hasMore = limit && drops.length > limit

  return (
    <>
      <div className="past">
        {displayedDrops.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%',
                    height: '200px',
                    borderRadius: '12px',
                    objectFit: 'cover',
                  }}
                />
              </div>
            ) : (
              <div
                style={{
                  width: '100%',
                  height: '200px',
                  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>
            <br />
            <span className="meta" style={{ fontSize: '13px', marginTop: '4px', display: 'block' }}>
              {formatQuantity(drop.size, drop.unit)} · {formatDateAndTime(drop.created_at)}
            </span>
          </div>
        ))}
      </div>
      {showMoreLink && hasMore && (
        <div style={{ textAlign: 'center', marginTop: '30px' }}>
          <a
            href="/past-drops"
            style={{
              color: 'var(--accent)',
              textDecoration: 'none',
              fontSize: '14px',
              fontWeight: 500,
            }}
          >
            More →
          </a>
        </div>
      )}
    </>
  )
}