import { useState } from "react";
import "./TierPicker.css";

const TIERS = [
  {
    id: "free",
    name: "Trial Monitoring",
    price: { monthly: "$0", annual: "$0" },
    period: { monthly: "", annual: "" },
    features: [
      "Monitor 1 blockchain address 24/7",
      "Configure alerts to fire on trigger events",
      "1 transaction alert type per trigger (email digest)",
    ],
    disabledFeatures: [],
  },
  {
    id: "premium",
    name: "Premium Monitoring",
    price: { monthly: "$8.78", annual: "$94.78" },
    period: { monthly: "/month", annual: "/year" },
    features: [
      "Monitor 3 blockchain addresses",
      "Configure two types of rule-based alerts to fire on trigger events for each of the three addresses",
      "Daily email digest alert",
      "Real-time Discord alerts",
      "Real-time Telegram alerts",
    ],
    disabledFeatures: [],
    highlighted: true,
  },
  {
    id: "pro",
    name: "Professional Monitoring",
    price: { monthly: "$16.78", annual: "$181.78" },
    period: { monthly: "/month", annual: "/year" },
    features: [
      "Monitor unlimited blockchain addresses",
      "Configure unlimited alert rules to fire on unlimited events on any address",
      "Daily email digest alert",
      "Real-time Discord alerts",
      "Real-time Telegram alerts",
      "Real-time Slack alerts configurable for multiple Slack groups or channels",
      "Unlimited transaction alert types per monitored address",
    ],
    disabledFeatures: [],
  },
];

export default function TierPicker({ onSelect, selectedTier }) {
  const [isAnnual, setIsAnnual] = useState(true);

  return (
    <div className="tier-picker">
      <div className="tier-picker__toggle">
        <button
          className={`tier-picker__toggle-btn${!isAnnual ? " tier-picker__toggle-btn--active" : ""}`}
          onClick={() => setIsAnnual(false)}
        >
          Monthly
        </button>
        <button
          className={`tier-picker__toggle-btn${isAnnual ? " tier-picker__toggle-btn--active" : ""}`}
          onClick={() => setIsAnnual(true)}
        >
          Annual
        </button>
      </div>

      <div className="tier-picker__cards">
        {TIERS.map((tier) => (
          <div
            key={tier.id}
            className={`tier-picker__card${tier.highlighted ? " tier-picker__card--highlighted" : ""}${selectedTier === tier.id ? " tier-picker__card--selected" : ""}`}
          >
            {tier.highlighted && (
              <div className="tier-picker__badge">Most Popular</div>
            )}
            <h3 className="tier-picker__name">{tier.name}</h3>
            <div className="tier-picker__price">
              <span className="tier-picker__amount">
                {isAnnual ? tier.price.annual : tier.price.monthly}
              </span>
              {(isAnnual ? tier.period.annual : tier.period.monthly) && (
                <span className="tier-picker__period">
                  {isAnnual ? tier.period.annual : tier.period.monthly}
                </span>
              )}
            </div>
            <ul className="tier-picker__features">
              {tier.features.map((f) => (
                <li key={f} className="tier-picker__feature">
                  <span className="tier-picker__check">&#10003;</span> {f}
                </li>
              ))}
              {tier.disabledFeatures.map((f) => (
                <li key={f} className="tier-picker__feature tier-picker__feature--disabled">
                  <span className="tier-picker__dash">&mdash;</span> {f}
                </li>
              ))}
            </ul>
            <button
              className={`btn tier-picker__btn${selectedTier === tier.id ? " tier-picker__btn--selected" : ""}`}
              onClick={() => onSelect(tier.id, isAnnual ? "annual" : "monthly")}
            >
              {selectedTier === tier.id ? "Selected" : "Select"}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}