/**
 * Help Settings Quota Page
 *
 * Documentation for managing quota overages and usage limits.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  AlertTriangle,
  Users,
  Briefcase,
  Calendar,
  Archive,
  Clock,
  Check,
  Download,
  ChevronDown,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  CreditCard,
} from 'lucide-react';

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

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      {/* Back Button */}
      <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-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
            <AlertTriangle size={24} className="text-amber-600 dark:text-amber-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Quota Management Guide
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              Manage account limits and overages
            </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">
          <AlertTriangle 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">
            Quota Management allows you to monitor your usage against plan limits and resolve overages.
            When you exceed your plan's limits, you'll have a grace period to either archive resources
            or upgrade your plan.
          </p>
          <div className="flex items-start gap-2 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
            <AlertTriangle size={18} className="text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-amber-800 dark:text-amber-200">
              Business owners and managers can access quota management. This page is most important
              when you have active overages that need to be resolved.
            </p>
          </div>
        </div>
      </section>

      {/* Current Usage */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Check size={20} className="text-brand-500" />
          Current Usage
        </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 usage overview shows your current consumption for each quota type:
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Users size={18} className="text-blue-500" />
                <span className="font-medium text-gray-900 dark:text-white">Additional Users</span>
              </div>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Staff members beyond the plan's included users
              </p>
            </div>
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Briefcase size={18} className="text-purple-500" />
                <span className="font-medium text-gray-900 dark:text-white">Resources</span>
              </div>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Total resources (staff, rooms, equipment)
              </p>
            </div>
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Calendar size={18} className="text-green-500" />
                <span className="font-medium text-gray-900 dark:text-white">Services</span>
              </div>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Active services offered to customers
              </p>
            </div>
          </div>

          <div className="mt-4 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
            <p className="text-sm text-green-800 dark:text-green-200 flex items-center gap-2">
              <Check size={16} className="flex-shrink-0" />
              If all quotas show <strong>current / limit</strong> with current under limit, you're within
              your plan limits.
            </p>
          </div>
        </div>
      </section>

      {/* Active Overages */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <AlertTriangle size={20} className="text-brand-500" />
          Active Overages
        </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">
            When you exceed a limit, an overage is created with a <strong>grace period</strong>.
            You must resolve the overage before the grace period ends.
          </p>

          <div className="space-y-4">
            {/* Overage Card Example */}
            <div className="p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-300 dark:border-amber-700 rounded-lg">
              <h4 className="font-medium text-amber-800 dark:text-amber-200 mb-2">
                Each Overage Shows:
              </h4>
              <ul className="text-sm text-amber-700 dark:text-amber-300 space-y-2">
                <li className="flex items-center gap-2">
                  <AlertTriangle size={14} />
                  <span><strong>Quota Type</strong> - Which limit you've exceeded</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="font-mono text-xs bg-amber-100 dark:bg-amber-800 px-1 rounded">5/3</span>
                  <span><strong>Usage</strong> - Current count vs allowed limit</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-red-600 font-medium">2 over</span>
                  <span><strong>Overage Amount</strong> - How many items over the limit</span>
                </li>
                <li className="flex items-center gap-2">
                  <Clock size={14} />
                  <span><strong>Days Remaining</strong> - Time left to resolve the overage</span>
                </li>
              </ul>
            </div>

            {/* Grace Period Warning */}
            <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
              <h4 className="font-medium text-red-800 dark:text-red-200 mb-2 flex items-center gap-2">
                <AlertTriangle size={16} />
                Auto-Archive Warning
              </h4>
              <p className="text-sm text-red-700 dark:text-red-300">
                After the grace period ends, the system will <strong>automatically archive</strong> the
                oldest items to bring you back within limits. Archive items yourself to choose which
                ones to keep.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Resolving Overages */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Archive size={20} className="text-brand-500" />
          Resolving Overages
        </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">
            You have two options to resolve an overage:
          </p>

          <div className="space-y-4">
            {/* Option 1: Archive */}
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                <Archive size={18} className="text-amber-500" />
                Option 1: Archive Items
              </h4>
              <ol className="text-sm text-gray-600 dark:text-gray-300 space-y-2 list-decimal list-inside">
                <li>Click on an overage to expand it</li>
                <li>Select the items you want to archive using the checkboxes</li>
                <li>Click <strong>Archive Selected</strong></li>
                <li>Archived items become read-only and cannot be used for new bookings</li>
              </ol>
              <div className="mt-3 p-2 bg-amber-50 dark:bg-amber-900/20 rounded text-xs text-amber-700 dark:text-amber-300">
                <AlertTriangle size={12} className="inline mr-1" />
                Tip: Archive the items you use least. You can still view archived data.
              </div>
            </div>

            {/* Option 2: Upgrade */}
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                <CreditCard size={18} className="text-brand-500" />
                Option 2: Upgrade Your Plan
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
                Click <strong>Upgrade Plan Instead</strong> to increase your limits. This immediately
                resolves the overage without archiving anything.
              </p>
              <Link
                to="/dashboard/settings/billing"
                className="inline-flex items-center gap-2 text-sm text-brand-600 dark:text-brand-400 hover:underline"
              >
                <CreditCard size={14} />
                Go to Billing Settings
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Step by Step */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
          Step-by-Step: Archive Items to Resolve Overage
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <ol className="space-y-4">
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">
                1
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Go to <strong>Settings &gt; Usage & Quota</strong>
              </span>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">
                2
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Review the <strong>Active Overages</strong> section
              </span>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">
                3
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Click on an overage to <ChevronDown size={14} className="inline" /> expand it
              </span>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">
                4
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Review the list of items and select which to archive
              </span>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">
                5
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Click <strong>Archive Selected</strong> to archive the selected items
              </span>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">
                6
              </span>
              <span className="text-gray-700 dark:text-gray-300">
                Once enough items are archived, the overage is <strong>resolved</strong>
              </span>
            </li>
          </ol>
        </div>
      </section>

      {/* Additional Actions */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Download size={20} className="text-brand-500" />
          Additional Actions
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="space-y-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                <Download size={16} className="text-gray-500" />
                Export Data
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Before archiving, you can export your data to keep a backup. This is useful if you
                need to reference the data later.
              </p>
            </div>

            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <h4 className="font-medium text-gray-900 dark:text-white mb-2">Already Archived</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                The "Already Archived" section shows items that have been previously archived with
                their archive dates. These items are read-only but data is preserved.
              </p>
            </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-blue-50 dark:from-brand-900/20 dark:to-blue-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">
                <strong>Act before the grace period ends</strong> - Choose which items to archive rather
                than letting the system auto-archive the oldest ones
              </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">
                <strong>Archive inactive items first</strong> - Choose resources or services you no longer
                actively use
              </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">
                <strong>Consider upgrading</strong> - If you need all your current items, upgrading your
                plan is often simpler than archiving
              </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">
                <strong>Export data first</strong> - Before archiving important items, export the data
                as a backup
              </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">
                <strong>Watch grace period colors</strong> - Red means less than 1 day, amber means less
                than 7 days remaining
              </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/billing"
            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">Billing Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/resources"
            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"
          >
            <Briefcase size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Resources Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
        </div>
      </section>

      {/* Need Help */}
      <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 quota management 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 HelpSettingsQuota;
