import React from 'react';
import { Link } from 'react-router-dom';

interface TrialBannerProps {
  trialDays: number;
  planLabel?: string | null;
  creditsUsed: number;
  creditsGranted: number;
  talkToSpecialistUrl?: string;
  choosePlanTo?: string;
}

const DEFAULT_TALK_TO_SPECIALIST_URL: string =
  'https://calendly.com/better-zty/meeting-with-recomaze';

const TOTAL_TRIAL_DAYS: number = 7;

export function TrialBanner({
  trialDays,
  planLabel,
  creditsUsed,
  creditsGranted,
  talkToSpecialistUrl = DEFAULT_TALK_TO_SPECIALIST_URL,
  choosePlanTo = '/pricing',
}: TrialBannerProps) {
  if (trialDays <= 0) return null;

  const currentDayIndex: number = Math.max(
    0,
    Math.min(TOTAL_TRIAL_DAYS - 1, trialDays - 1)
  );
  const safeGranted: number = Math.max(1, creditsGranted);
  const usageRatio: number = Math.min(
    1,
    Math.max(0, creditsUsed / safeGranted)
  );

  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-5">
      <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
        <div className="lg:max-w-md">
          <h2 className="text-lg font-bold text-gray-900">
            {trialDays} day{trialDays === 1 ? '' : 's'} left in your trial
          </h2>
          <p className="mt-1 text-xs leading-relaxed text-gray-500">
            {planLabel ? `${planLabel} ` : ''}
            <span className="text-gray-300">·</span> auto-converts unless you
            choose a plan <span className="text-gray-300">·</span>{' '}
            <span className="text-amber-600 font-medium">
              {creditsUsed.toLocaleString()} of{' '}
              {creditsGranted.toLocaleString()} credits used
            </span>
          </p>
        </div>
        <div className="flex flex-1 max-w-sm items-center gap-1.5">
          {Array.from({ length: TOTAL_TRIAL_DAYS }).map(
            (_unused, bucketIndex) => {
              const isPast: boolean = bucketIndex > currentDayIndex;
              const isCurrent: boolean = bucketIndex === currentDayIndex;
              const fillClass: string = isPast
                ? 'bg-gray-200'
                : isCurrent
                  ? 'bg-[#B7007C] trial-bucket-pulse'
                  : 'bg-emerald-500';

              return (
                <span
                  key={bucketIndex}
                  className={`h-2 flex-1 rounded-full transition-colors ${fillClass}`}
                />
              );
            }
          )}
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <a
            href={talkToSpecialistUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex h-9 cursor-pointer items-center gap-2 rounded-full border border-gray-200 bg-white px-3 text-xs font-medium text-gray-700 transition-colors hover:border-[#B7007C]/30 hover:text-[#B7007C]"
          >
            <svg
              className="h-3.5 w-3.5"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
            >
              <rect x="3" y="4" width="18" height="18" rx="2" />
              <path d="M16 2v4M8 2v4M3 10h18" />
            </svg>
            Talk to a specialist
          </a>
          <Link
            to={choosePlanTo}
            className="inline-flex h-9 cursor-pointer items-center justify-center rounded-full bg-[#B7007C] px-4 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-[#900063]"
          >
            Choose plan
          </Link>
        </div>
      </div>
      <div className="mt-4 h-1 w-full overflow-hidden rounded-full bg-gray-100">
        <div
          className="h-full bg-gradient-to-r from-amber-400 to-orange-400 transition-all duration-700"
          style={{ width: `${Math.round(usageRatio * 100)}%` }}
        />
      </div>
    </div>
  );
}