/**
 * Help Settings Billing Page
 *
 * Comprehensive documentation for the Plan & Billing Settings page.
 * Documents: Current plan, subscriptions, add-ons, payment methods, invoices, upgrade flow.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft, CreditCard, Crown, Package, Wallet, FileText,
  CheckCircle, ChevronRight, HelpCircle, AlertCircle, Calendar,
  Plus, Trash2, Star, RotateCcw, X, Zap, ArrowRight,
} from 'lucide-react';

const HelpSettingsBilling: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      <button onClick={() => navigate(-1)} className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6">
        <ArrowLeft size={20} /> Back
      </button>

      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
            <CreditCard size={24} className="text-emerald-600 dark:text-emerald-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Plan & Billing Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Manage your subscription, add-ons, and payment methods</p>
          </div>
        </div>
      </div>

      {/* Overview */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <CreditCard size={20} className="text-brand-500" /> Overview
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The Plan & Billing page is where you manage your SmoothSchedule subscription. View your current plan,
            upgrade or change plans, add feature add-ons, manage payment methods, and access your billing history.
          </p>
          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
            <div className="flex items-start gap-3">
              <AlertCircle size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
              <p className="text-sm text-blue-700 dark:text-blue-300">
                <strong>Owner Access Required:</strong> Only business owners can access billing settings.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Current Plan */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Crown size={20} className="text-amber-500" /> Current Plan
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The Current Plan section shows your active subscription tier, its monthly price, and included features.
          </p>
          <div className="space-y-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">What You'll See</h4>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                <li>• <strong>Plan Name:</strong> Your current tier (Free, Starter, Professional, Enterprise)</li>
                <li>• <strong>Monthly Price:</strong> What you pay per month (or "Contact Us" for Enterprise)</li>
                <li>• <strong>Key Features:</strong> List of what's included in your plan</li>
                <li>• <strong>Upgrade Button:</strong> Opens the plan selection modal</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Active Subscriptions */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Calendar size={20} className="text-blue-500" /> Active Subscriptions
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            This section lists all your active subscriptions, including your main plan and any add-ons you've purchased.
          </p>

          <div className="space-y-4">
            {/* Subscription Details */}
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">For Each Subscription</h4>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                <li>• <strong>Plan Name:</strong> The subscription's name</li>
                <li>• <strong>Type Badge:</strong> "Plan" for main subscription, "Add-on" for extras</li>
                <li>• <strong>Price & Interval:</strong> Amount charged and billing frequency (monthly/yearly)</li>
                <li>• <strong>Next Billing Date:</strong> When you'll be charged next</li>
              </ul>
            </div>

            {/* Cancellation States */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <div className="flex items-center gap-2 mb-2">
                  <X size={16} className="text-red-500" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Cancel Subscription</h4>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Cancels your subscription. You can choose to cancel at period end (keeps access until then) or immediately.
                </p>
              </div>
              <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <div className="flex items-center gap-2 mb-2">
                  <RotateCcw size={16} className="text-green-500" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Reactivate</h4>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  If you've cancelled but your subscription hasn't ended yet, you can reactivate it.
                </p>
              </div>
            </div>

            {/* Cancelling Status */}
            <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
              <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">Cancelling Status</h4>
              <p className="text-xs text-gray-600 dark:text-gray-400">
                If you cancelled at period end, the subscription shows a "Cancelling" badge and displays when it will end.
                You can still reactivate before that date.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Available Add-ons */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Package size={20} className="text-purple-500" /> Available Add-ons
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Add-ons let you enhance your subscription with additional features beyond what's included in your base plan.
          </p>

          <div className="space-y-4">
            <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">How Add-ons Work</h4>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                <li>• Each add-on has its own monthly price</li>
                <li>• Click "Add" to purchase - you'll be taken to Stripe checkout</li>
                <li>• Add-ons appear in your Active Subscriptions once purchased</li>
                <li>• Cancel anytime just like your main subscription</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Wallet */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Wallet size={20} className="text-blue-500" /> Wallet
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The Wallet section provides a quick link to manage your communication credits (SMS & Calling).
            Credits are used for sending SMS reminders and making calls through the platform.
          </p>
          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
            <p className="text-sm text-blue-700 dark:text-blue-300">
              To manage credits, top up your balance, or configure auto-reload, go to{' '}
              <strong>Settings → SMS & Calling</strong>.
            </p>
          </div>
        </div>
      </section>

      {/* Payment Methods */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <CreditCard size={20} className="text-purple-500" /> Payment Methods
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Manage the credit cards used for your subscriptions and credit purchases.
          </p>

          <div className="space-y-4">
            {/* Card Display */}
            <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">Each Card Shows</h4>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                <li>• <strong>Card Brand:</strong> Visa, Mastercard, Amex, etc.</li>
                <li>• <strong>Last 4 Digits:</strong> •••• 4242</li>
                <li>• <strong>Expiration:</strong> Month/Year the card expires</li>
                <li>• <strong>Default Badge:</strong> Shows which card is used for automatic payments</li>
              </ul>
            </div>

            {/* Card Actions */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <div className="flex items-center gap-2 mb-2">
                  <Plus size={16} className="text-brand-500" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Add Card</h4>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Opens Stripe to securely add a new card
                </p>
              </div>
              <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <div className="flex items-center gap-2 mb-2">
                  <Star size={16} className="text-amber-500" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Set Default</h4>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Make a card the default for payments
                </p>
              </div>
              <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <div className="flex items-center gap-2 mb-2">
                  <Trash2 size={16} className="text-red-500" />
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Remove</h4>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Delete a card from your account
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Billing History */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <FileText size={20} className="text-gray-500" /> Billing History
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            View and download invoices for all your past payments. Invoices are generated automatically
            after each successful charge.
          </p>
          <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
            <p className="text-sm text-gray-600 dark:text-gray-300">
              Each invoice includes the date, amount, what was purchased, and a download link for your records.
              Use these for expense tracking, tax purposes, or reimbursement requests.
            </p>
          </div>
        </div>
      </section>

      {/* Upgrading Your Plan */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <ArrowRight size={20} className="text-brand-500" /> Upgrading Your Plan
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Click the "Upgrade Plan" button to see all available plans and change your subscription.
          </p>

          <div className="space-y-4">
            <div className="p-4 bg-brand-50 dark:bg-brand-900/20 rounded-lg border border-brand-200 dark:border-brand-800">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">How to Upgrade</h4>
              <ol className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-decimal list-inside">
                <li>Click <strong>Upgrade Plan</strong> in the Current Plan section</li>
                <li>Review the available plans and their features</li>
                <li>Click <strong>Upgrade</strong> on your desired plan</li>
                <li>Complete checkout through Stripe</li>
                <li>Your new plan activates immediately</li>
              </ol>
            </div>

            {/* Plan Comparison Note */}
            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
              <div className="flex items-start gap-3">
                <Zap size={18} className="text-blue-500 mt-0.5 flex-shrink-0" />
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Transaction Fees</h4>
                  <p className="text-xs text-gray-600 dark:text-gray-400">
                    Higher tier plans include lower transaction fees on payment processing.
                    Enterprise plans offer custom pricing - contact support for details.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tips */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <CheckCircle size={20} className="text-brand-500" /> Tips
        </h2>
        <div className="bg-gradient-to-r from-brand-50 to-emerald-50 dark:from-brand-900/20 dark:to-emerald-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
          <ul className="space-y-3">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                Keep payment methods up to date to avoid service interruption
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                If you cancel at period end, you can reactivate anytime before it expires
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                Download invoices regularly for your accounting records
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                Add-ons are billed separately and can be cancelled independently
              </span>
            </li>
          </ul>
        </div>
      </section>

      {/* Related Features */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Features</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Link to="/dashboard/help/settings/quota" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
            <Calendar size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Usage & Quota</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/dashboard/help/payments" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
            <CreditCard size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Payments Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/dashboard/help/settings/general" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
            <CheckCircle size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">General Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link to="/dashboard/help/settings/appearance" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
            <Crown size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Branding Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
        </div>
      </section>

      {/* Help Footer */}
      <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
        <HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Need More Help?</h3>
        <p className="text-gray-600 dark:text-gray-300 mb-4">
          Our support team is ready to help with billing questions.
        </p>
        <button
          onClick={() => navigate('/dashboard/tickets')}
          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
        >
          Contact Support
        </button>
      </section>
    </div>
  );
};

export default HelpSettingsBilling;
