/**
 * Help Dashboard Page
 *
 * Comprehensive help documentation for the Dashboard.
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  LayoutDashboard,
  BarChart3,
  TrendingUp,
  Users,
  Calendar,
  Briefcase,
  ClipboardList,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  Settings,
  Edit2,
  GripVertical,
  Ticket,
  Activity,
  UserX,
  PieChart,
} from 'lucide-react';

const HelpDashboard: React.FC = () => {
  const { t } = useTranslation();
  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} />
        {t('common.back', '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-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
            <LayoutDashboard size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Dashboard Guide
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              Your customizable business command center
            </p>
          </div>
        </div>
      </div>

      {/* Overview Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <BarChart3 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 Dashboard is your fully customizable command center for understanding your business performance. It provides real-time insights into appointments, customers, capacity, tickets, and more.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            You can personalize your dashboard by adding, removing, repositioning, and resizing widgets to focus on the metrics that matter most to you. Your layout is automatically saved.
          </p>
        </div>
      </section>

      {/* Customization Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Settings size={20} className="text-brand-500" />
          Customizing Your Dashboard
        </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-6">
            <div>
              <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                <Edit2 size={16} className="text-blue-500" />
                Edit Layout Mode
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
                Click the <strong>"Edit Layout"</strong> button to enter edit mode. While in edit mode you can:
              </p>
              <ul className="text-sm text-gray-600 dark:text-gray-300 ml-4 space-y-1">
                <li className="flex items-center gap-2">
                  <GripVertical size={14} className="text-gray-400" />
                  <strong>Drag widgets</strong> to reposition them on the dashboard
                </li>
                <li>• <strong>Drag corners</strong> to resize widgets larger or smaller</li>
                <li>• <strong>Click the X</strong> on any widget to remove it</li>
              </ul>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                Click <strong>"Done"</strong> when finished editing.
              </p>
            </div>
            <div>
              <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                <Settings size={16} className="text-purple-500" />
                Widget Configuration
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Click the <strong>"Widgets"</strong> button to open the widget configuration panel. Here you can toggle widgets on/off and click <strong>"Reset to Default"</strong> to restore the original layout.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Available Widgets Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <LayoutDashboard size={20} className="text-brand-500" />
          Available Widgets
        </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">
            Choose from a variety of widgets to build your perfect dashboard:
          </p>

          {/* Metric Widgets */}
          <h4 className="font-medium text-gray-900 dark:text-white mb-3">Metric Widgets</h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Calendar size={18} className="text-blue-500 mt-0.5" />
              <div>
                <h5 className="font-medium text-gray-900 dark:text-white text-sm">Total Appointments</h5>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Count with weekly and monthly growth trends
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Users size={18} className="text-green-500 mt-0.5" />
              <div>
                <h5 className="font-medium text-gray-900 dark:text-white text-sm">Active Customers</h5>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Active customer count with growth trends
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <UserX size={18} className="text-red-500 mt-0.5" />
              <div>
                <h5 className="font-medium text-gray-900 dark:text-white text-sm">No-Show Rate</h5>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Percentage of missed appointments with trends
                </p>
              </div>
            </div>
          </div>

          {/* Chart Widgets */}
          <h4 className="font-medium text-gray-900 dark:text-white mb-3">Chart Widgets</h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <BarChart3 size={18} className="text-blue-500 mt-0.5" />
              <div>
                <h5 className="font-medium text-gray-900 dark:text-white text-sm">Weekly Revenue</h5>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Bar chart of revenue by day of week
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <TrendingUp size={18} className="text-green-500 mt-0.5" />
              <div>
                <h5 className="font-medium text-gray-900 dark:text-white text-sm">Appointments Trend</h5>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Line chart of appointments by day
                </p>
              </div>
            </div>
          </div>

          {/* Activity Widgets */}
          <h4 className="font-medium text-gray-900 dark:text-white mb-3">Activity & Status Widgets</h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Ticket size={18} className="text-orange-500 mt-0.5" />
              <div>
                <h5 className="font-medium text-gray-900 dark:text-white text-sm">Open Tickets</h5>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Support tickets requiring attention
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Activity size={18} className="text-purple-500 mt-0.5" />
              <div>
                <h5 className="font-medium text-gray-900 dark:text-white text-sm">Recent Activity</h5>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Timeline of recent business events
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Users size={18} className="text-cyan-500 mt-0.5" />
              <div>
                <h5 className="font-medium text-gray-900 dark:text-white text-sm">Capacity Utilization</h5>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Shows booking percentage for each resource
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <PieChart size={18} className="text-violet-500 mt-0.5" />
              <div>
                <h5 className="font-medium text-gray-900 dark:text-white text-sm">Customer Breakdown</h5>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  New vs returning customers this month
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Growth Metrics Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <TrendingUp size={20} className="text-brand-500" />
          Understanding Growth Metrics
        </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">
            Metric widgets display both <strong>weekly</strong> and <strong>monthly</strong> growth percentages:
          </p>
          <div className="space-y-3">
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs rounded">
                +12%
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-300">
                  <strong>Green with +</strong> indicates growth compared to the previous period
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs rounded">
                -8%
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-300">
                  <strong>Red with -</strong> indicates decline compared to the previous period
                </p>
              </div>
            </div>
          </div>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
            Weekly compares this week to last week. Monthly compares this month to last month.
          </p>
        </div>
      </section>

      {/* Benefits Section */}
      <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" />
          Benefits
        </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>Fully Customizable:</strong> Arrange widgets exactly how you want them
              </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>Persistent Layout:</strong> Your dashboard layout is saved automatically
              </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>Real-Time Data:</strong> All metrics update automatically as your data changes
              </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>Trend Tracking:</strong> Weekly and monthly growth percentages help you spot patterns
              </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>Resource Insights:</strong> See capacity utilization for each team member
              </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/scheduler"
            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">Scheduler Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/customers"
            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"
          >
            <Users size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Customers Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
        </div>
      </section>

      {/* Need More 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">
          If you have questions that aren't covered here, our support team is ready to help.
        </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 HelpDashboard;
