import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'

export default function TrialBanner({ profile }) {
  const [daysLeft, setDaysLeft] = useState(null)

  useEffect(() => {
    if (!profile?.trial_ends_at) {
      setDaysLeft(null)
      return
    }

    const trialEnd = new Date(profile.trial_ends_at)
    const now = new Date()
    const diff = trialEnd - now
    const days = Math.ceil(diff / (1000 * 60 * 60 * 24))

    setDaysLeft(days)
  }, [profile])

  // No trial or trial ended
  if (daysLeft === null || daysLeft <= 0) return null

  // Determine severity
  const isUrgent = daysLeft <= 3
  const isWarning = daysLeft <= 7

  const bgColor = isUrgent ? '#FCEBEB' : isWarning ? '#FFF4E6' : 'var(--accent-light)'
  const borderColor = isUrgent ? '#D85A30' : isWarning ? '#F59E0B' : 'var(--accent)'
  const textColor = isUrgent ? '#D85A30' : isWarning ? '#D97706' : 'var(--accent-dark)'

  return (
    <div style={{
      background: bgColor,
      border: `2px solid ${borderColor}`,
      borderRadius: 12,
      padding: '16px 20px',
      marginBottom: 20,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      flexWrap: 'wrap',
      gap: 12
    }}>
      <div style={{flex: 1, minWidth: 200}}>
        <div style={{
          fontWeight: 700,
          fontSize: 15,
          color: textColor,
          marginBottom: 4
        }}>
          {isUrgent && '⚠️ '}
          Deine Trial endet {daysLeft === 1 ? 'morgen' : `in ${daysLeft} Tagen`}
        </div>
        <div style={{
          fontSize: 13,
          color: 'var(--text2)',
          lineHeight: 1.4
        }}>
          {isUrgent
            ? 'Upgrade jetzt um weiterhin alle Features nutzen zu können'
            : 'Wähle ein Abo um unbegrenzt Zugriff zu erhalten'
          }
        </div>
      </div>

      <a
        href="mailto:mitai@jinkendo.de?subject=Abo-Anfrage%20für%20Mitai%20Jinkendo&body=Hallo,%0A%0Aich%20möchte%20gerne%20ein%20Abo%20für%20Mitai%20Jinkendo%20abschließen.%0A%0AMein%20Profil:%20"
        style={{
          padding: '10px 20px',
          borderRadius: 8,
          background: isUrgent ? '#D85A30' : 'var(--accent)',
          color: 'white',
          fontWeight: 600,
          fontSize: 14,
          textDecoration: 'none',
          whiteSpace: 'nowrap',
          border: 'none',
          cursor: 'pointer',
          display: 'inline-block'
        }}
      >
        {isUrgent ? 'Kontakt aufnehmen' : 'Abo anfragen'}
      </a>
    </div>
  )
}