import React from 'react'
import { FiTrendingUp } from 'react-icons/fi'
import { GoTrophy } from 'react-icons/go'
import { HiOutlineSparkles } from 'react-icons/hi2'
import { CommissionStat } from '@/lib/types/commission'

interface AchievementLevelCardProps {
  affiliateLevel: CommissionStat['affiliate_level']
}

const AchievementLevelCard: React.FC<AchievementLevelCardProps> = ({
  affiliateLevel,
}) => {
  const {
    current_level,
    next_level,
    progress_to_next_level,
    current_sales_volume,
  } = affiliateLevel

  const salesNeeded = next_level
    ? next_level.min_sales_volume - current_sales_volume
    : 0

  return (
    <div className="relative overflow-hidden rounded-xl bg-white shadow-sm border border-slate-100">
      {/* Decorative gradient header */}
      <div className="bg-linear-to-br from-gray-900 via-gray-800 to-gray-700 px-6 py-5">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/15 backdrop-blur-sm">
              <GoTrophy className="text-xl text-amber-400" />
            </div>
            <h3 className="text-lg font-bold text-white tracking-tight">
              Achievement Level
            </h3>
          </div>
          <HiOutlineSparkles className="text-xl text-amber-400/70" />
        </div>
      </div>

      <div className="p-6">
        {/* Current Level & Discount Rate */}
        <div className="flex justify-between items-start mb-7">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">
              Current Level
            </p>
            <p className="text-3xl font-extrabold text-gray-900 mt-1">
              {current_level.name}
            </p>
          </div>
          <div className="text-right">
            <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">
              Discount Rate
            </p>
            <p className="text-3xl font-extrabold text-gray-900 mt-1">
              {parseFloat(current_level.discount_rate)}
              <span className="text-lg ml-0.5">%</span>
            </p>
          </div>
        </div>

        {/* Progress Bar */}
        {next_level && (
          <div className="mb-6">
            <div className="flex justify-between items-center mb-2">
              <p className="text-sm font-medium text-gray-500">
                Progress to {next_level.name}
              </p>
              <span className="inline-flex items-center rounded-full bg-gray-900 px-2.5 py-0.5 text-xs font-bold text-white">
                {Math.round(progress_to_next_level)}%
              </span>
            </div>
            <div className="relative w-full h-3 bg-gray-100 rounded-full overflow-hidden">
              <div
                className="absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-gray-700 to-gray-900 transition-all duration-700 ease-out"
                style={{
                  width: `${Math.min(progress_to_next_level, 100)}%`,
                }}
              />
              <div
                className="absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-white/0 via-white/25 to-white/0 transition-all duration-700 ease-out"
                style={{
                  width: `${Math.min(progress_to_next_level, 100)}%`,
                }}
              />
            </div>
            <div className="flex justify-between items-center mt-2.5">
              <div className="flex items-center gap-1.5 text-sm text-gray-500">
                <FiTrendingUp className="text-emerald-500" />
                <span className="font-medium">
                  {current_sales_volume} sales
                </span>
              </div>
              <p className="text-sm font-medium text-gray-500">
                {salesNeeded > 0
                  ? `${salesNeeded} more to ${next_level.name}`
                  : `Reached ${next_level.name}`}
              </p>
            </div>
          </div>
        )}

        {/* Next Level Benefits / Highest Level */}
        {next_level ? (
          <div className="rounded-lg bg-gray-50 border border-gray-100 p-4">
            <p className="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3">
              Next Level Benefits
            </p>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2.5">
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-100">
                  <GoTrophy className="text-sm text-amber-600" />
                </div>
                <span className="font-bold text-gray-900">
                  {next_level.name}
                </span>
              </div>
              <span className="text-xl font-extrabold text-gray-900">
                {parseFloat(next_level.discount_rate)}
                <span className="text-sm ml-0.5">%</span>
              </span>
            </div>
          </div>
        ) : (
          <div className="rounded-lg bg-linear-to-br from-amber-50 to-yellow-50 border border-amber-200/60 p-5 text-center">
            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-100 mx-auto mb-3">
              <GoTrophy className="text-2xl text-amber-600" />
            </div>
            <p className="text-sm font-bold text-gray-900">
              You&apos;ve achieved the highest level!
            </p>
            <p className="text-xs text-gray-500 mt-1">
              Congratulations, you are at the top tier.
            </p>
          </div>
        )}
      </div>
    </div>
  )
}

export default AchievementLevelCard