import { useState } from "react";
import { SidebarNav } from "./CreatorDashboard";
import { useDocumentTitle } from "../hooks/useDocumentTitle";
import styles from "./CreatorTiers.module.css";

const TIERS = [
  {
    name: "Free",
    price: "$0",
    period: "forever",
    description: "All your techniques, tutorials, and knowledge — free for everyone to discover.",
    features: [
      "Full technique page listings",
      "Search & discovery visibility",
      "Creator profile & bio",
      "Follower count display",
    ],
    cta: "Current Plan",
    active: true,
  },
  {
    name: "Pro",
    price: "$9",
    period: "/month",
    description: "Gated downloads, sample packs, and presets. Monetize your production knowledge.",
    features: [
      "Everything in Free",
      "Gated file downloads",
      "Sample pack distribution",
      "Preset file hosting",
      "Download analytics",
    ],
    cta: "Coming Soon",
    active: false,
  },
  {
    name: "Premium",
    price: "$29",
    period: "/month",
    description: "Priority placement, exclusive content, and direct fan engagement tools.",
    features: [
      "Everything in Pro",
      "Priority search placement",
      "Exclusive content sections",
      "Fan messaging (DMs)",
      "Revenue analytics dashboard",
      "Custom branding options",
    ],
    cta: "Coming Soon",
    active: false,
  },
];

export default function CreatorTiers() {
  useDocumentTitle("Tier Configuration — Chrysopedia");
  const [showModal, setShowModal] = useState(false);

  return (
    <div className={styles.layout}>
      <SidebarNav />
      <div className={styles.content}>
        <h1 className={styles.pageTitle}>Tier Configuration</h1>
        <p className={styles.subtitle}>
          Choose how you want to share your knowledge. Payment tiers are coming soon.
        </p>

        <div className={styles.tierGrid}>
          {TIERS.map((tier) => (
            <div
              key={tier.name}
              className={`${styles.tierCard} ${tier.active ? styles.tierCardActive : ""}`}
            >
              {tier.active && <span className={styles.activeBadge}>Active</span>}
              <h2 className={styles.tierName}>{tier.name}</h2>
              <div className={styles.tierPrice}>
                <span className={styles.priceAmount}>{tier.price}</span>
                <span className={styles.pricePeriod}>{tier.period}</span>
              </div>
              <p className={styles.tierDescription}>{tier.description}</p>
              <ul className={styles.featureList}>
                {tier.features.map((f) => (
                  <li key={f} className={styles.featureItem}>
                    <span className={styles.featureCheck}>✓</span>
                    {f}
                  </li>
                ))}
              </ul>
              <button
                className={`${styles.tierCta} ${tier.active ? styles.tierCtaActive : styles.tierCtaDisabled}`}
                onClick={() => { if (!tier.active) setShowModal(true); }}
                disabled={tier.active}
              >
                {tier.cta}
              </button>
            </div>
          ))}
        </div>

        {/* Coming Soon modal */}
        {showModal && (
          <div className={styles.modalOverlay} onClick={() => setShowModal(false)}>
            <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
              <h3 className={styles.modalTitle}>Coming Soon</h3>
              <p className={styles.modalText}>
                Paid tiers with file distribution, gated downloads, and premium features
                are currently in development. We'll notify you when they're ready.
              </p>
              <button className={styles.modalClose} onClick={() => setShowModal(false)}>
                Got it
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
