import React, { useState, useEffect } from 'react';
import { getNonce, isPro } from '../Helpers';
import AnalyticsIcon from '@mui/icons-material/Analytics';
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
import VisibilityIcon from '@mui/icons-material/Visibility';
import SendIcon from '@mui/icons-material/Send';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';
import RedirectIcon from '@mui/icons-material/Launch';
import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import LockIcon from '@mui/icons-material/Lock';
import NoticeModal from '../components/NoticeModal/NoticeModal';
import '../styles/_analytics.scss';

interface AnalyticsData {
  form_id: string;
  total_events: number;
  views: number;
  submissions: number;
  successes: number;
  errors: number;
  redirects: number;
  date: string;
}

interface FormData {
  id: number;
  form_name: string;
}

const Analytics: React.FC = () => {
  const [forms, setForms] = useState<FormData[]>([]);
  const [selectedForms, setSelectedForms] = useState<string[]>([]);
  const [dateRange, setDateRange] = useState('7'); // days
  const [analyticsData, setAnalyticsData] = useState<AnalyticsData[]>([]);
  const [loading, setLoading] = useState(false);
  const [compareMode, setCompareMode] = useState(false);

  const proData = isPro();
  const isProUser = proData;

  const [modalConfig, setModalConfig] = useState({
    isOpen: false,
    type: 'confirmation',
    title: '',
    message: '',
    onConfirm: () => { },
    onClose: () => { },
    confirmText: 'Confirm',
    declineText: 'Cancel'
  });

  // Dummy data for free users
  const dummyForms: FormData[] = [
    { id: 1, form_name: 'Contact Form' },
    { id: 2, form_name: 'Newsletter Signup' },
    { id: 3, form_name: 'Product Inquiry' }
  ];

  const dummyAnalyticsData: AnalyticsData[] = [
    {
      form_id: '1',
      total_events: 1250,
      views: 1250,
      submissions: 85,
      successes: 78,
      errors: 7,
      redirects: 23,
      date: new Date().toISOString().split('T')[0]
    },
    {
      form_id: '2',
      total_events: 2100,
      views: 2100,
      submissions: 156,
      successes: 142,
      errors: 14,
      redirects: 45,
      date: new Date().toISOString().split('T')[0]
    },
    {
      form_id: '3',
      total_events: 890,
      views: 890,
      submissions: 47,
      successes: 41,
      errors: 6,
      redirects: 12,
      date: new Date().toISOString().split('T')[0]
    }
  ];

  const closeModal = () => {
    setModalConfig(prev => ({ ...prev, isOpen: false }));
  };

  const showPremiumModal = () => {
    setModalConfig({
      isOpen: true,
      type: 'premium',
      title: '🔥 Premium Feature - Advanced Analytics',
      message: 'Get detailed insights into your form performance with real-time analytics, conversion tracking, and advanced reporting. Upgrade now to unlock the full potential of your forms!',
      onConfirm: () => {
        window.open('https://wpazleen.com/', '_blank');
        closeModal();
      },
      onClose: closeModal,
      confirmText: 'Upgrade to Pro',
      declineText: 'Maybe Later'
    });

    return;

  };

  // Handle any click in free mode
  const handleFreeUserClick = (e: React.MouseEvent) => {
    if (!isProUser) {
      e.preventDefault();
      e.stopPropagation();
      showPremiumModal();
    }
  };

  // Load forms on component mount
  useEffect(() => {
    if (isProUser) {
      loadForms();
    } else {
      // Set dummy data for free users
      setForms(dummyForms);
      setSelectedForms(['1']);
      setAnalyticsData([dummyAnalyticsData[0]]);
    }
  }, [isProUser]);

  // Load analytics when forms or date range changes (Pro users only)
  useEffect(() => {
    if (isProUser && selectedForms.length > 0) {
      loadAnalytics();
    }
  }, [selectedForms, dateRange, isProUser]);

  const loadForms = () => {
    wp.ajax.send('simpleform_get_tables', {
      data: {
        nonce: getNonce(),
      },
      success(response) {
        setForms(response.tables);
        if (response.tables.length > 0) {
          setSelectedForms([response.tables[0].id.toString()]);
        }
      },
      error(error) {
        console.error('Error loading forms:', error);
      },
    });
  };

  const loadAnalytics = () => {
    if (!isProUser) return;

    setLoading(true);

    const dateFrom = new Date();
    dateFrom.setDate(dateFrom.getDate() - parseInt(dateRange));
    const dateTo = new Date();

    const promises = selectedForms.map(formId => {
      return new Promise((resolve, reject) => {
        wp.ajax.send('simpleform_get_analytics_summary', {
          data: {
            nonce: getNonce(),
            form_id: formId,
            date_from: dateFrom.toISOString().split('T')[0],
            date_to: dateTo.toISOString().split('T')[0],
            group_by: 'form_id'
          },
          success(response) {
            resolve(response.summary);
          },
          error(error) {
            reject(error);
          },
        });
      });
    });

    Promise.all(promises)
      .then((results) => {
        const combinedData = results.flat() as AnalyticsData[];
        setAnalyticsData(combinedData);
        setLoading(false);
      })
      .catch((error) => {
        console.error('Error loading analytics:', error);
        setLoading(false);
      });
  };

  const handleFormSelection = (formId: string) => {
    if (!isProUser) {
      showPremiumModal();
      return;
    }

    if (compareMode) {
      setSelectedForms(prev => {
        if (prev.includes(formId)) {
          return prev.filter(id => id !== formId);
        } else {
          return [...prev, formId];
        }
      });
    } else {
      setSelectedForms([formId]);
    }
  };

  const handleDateRangeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    if (!isProUser) {
      showPremiumModal();
      return;
    }
    setDateRange(e.target.value);
  };

  const handleCompareModeToggle = () => {
    if (!isProUser) {
      showPremiumModal();
      return;
    }
    setCompareMode(!compareMode);
  };

  const getFormName = (formId: string) => {
    const form = forms.find(f => f.id.toString() === formId);
    return form ? form.form_name : `Form ${formId}`;
  };

  const calculateConversionRate = (data: AnalyticsData) => {
    if (data.views === 0) return 0;
    return ((data.successes / data.views) * 100).toFixed(2);
  };

  const calculateSuccessRate = (data: AnalyticsData) => {
    if (data.submissions === 0) return 0;
    return ((data.successes / data.submissions) * 100).toFixed(2);
  };

  const getTotalMetrics = () => {
    const dataToUse = isProUser ? analyticsData : dummyAnalyticsData.slice(0, selectedForms.length);
    return dataToUse.reduce((totals, data) => ({
      views: totals.views + parseInt(data.views.toString()),
      submissions: totals.submissions + parseInt(data.submissions.toString()),
      successes: totals.successes + parseInt(data.successes.toString()),
      errors: totals.errors + parseInt(data.errors.toString()),
      redirects: totals.redirects + parseInt(data.redirects.toString()),
    }), { views: 0, submissions: 0, successes: 0, errors: 0, redirects: 0 });
  };

  const totals = getTotalMetrics();
  const displayData = isProUser ? analyticsData : dummyAnalyticsData.slice(0, selectedForms.length);

  return (
    <div className={`analytics-dashboard ${!isProUser ? 'free-user-mode' : ''}`} onClick={handleFreeUserClick}>

      {!isProUser && (
        <div className="pro-banner">
          <div className="pro-banner-content">
            <LockIcon className="pro-icon" />
            <div className="pro-text">
              <h3>Analytics Preview Mode</h3>
              <p>You're viewing demo data. Upgrade to Pro to access real analytics and advanced features.</p>
            </div>
            <button className="upgrade-btn" onClick={showPremiumModal}>
              Upgrade to Pro
            </button>
          </div>
        </div>
      )}

      <div className="analytics-header">
        <div className="header-title">
          <AnalyticsIcon className="header-icon" />
          <div>
            <h2>Form Analytics {!isProUser && <span className="demo-badge">DEMO</span>}</h2>
            <p>Track form performance, conversions, and user behavior</p>
          </div>
        </div>

        <div className="header-controls">
          <div className="date-range-selector">
            <CalendarTodayIcon />
            <select
              value={dateRange}
              onChange={handleDateRangeChange}
              disabled={!isProUser}
            >
              <option value="1">Last 24 hours</option>
              <option value="7">Last 7 days</option>
              <option value="30">Last 30 days</option>
              <option value="90">Last 3 months</option>
            </select>
            {!isProUser && <LockIcon className="control-lock" />}
          </div>

          <button
            className={`compare-btn ${compareMode ? 'active' : ''} ${!isProUser ? 'disabled' : ''}`}
            onClick={handleCompareModeToggle}
            disabled={!isProUser}
          >
            <CompareArrowsIcon />
            {compareMode ? 'Exit Compare' : 'Compare Forms'}
            {!isProUser && <LockIcon className="control-lock" />}
          </button>
        </div>
      </div>

      <div className="form-selector">
        <h3>Select Forms to Analyze</h3>
        {/* <h3>Select Forms to Analyze {!isProUser && <span className="demo-label">(Demo Data)</span>}</h3> */}
        <div className="form-grid">
          {forms.map((form) => (
            <div
              key={form.id}
              className={`form-card ${selectedForms.includes(form.id.toString()) ? 'selected' : ''} ${!isProUser ? 'demo-card' : ''}`}
              onClick={() => handleFormSelection(form.id.toString())}
            >
              <div className="form-card-header">
                <h4>{form.form_name}</h4>
                <span className="form-id">ID: {form.id}</span>
              </div>
              {selectedForms.includes(form.id.toString()) && (
                <CheckCircleIcon className="selected-icon" />
              )}
              {!isProUser && <LockIcon className="demo-lock" />}
            </div>
          ))}
        </div>
      </div>

      {loading && isProUser && (
        <div className="loading-state">
          <div className="spinner"></div>
          <p>Loading analytics data...</p>
        </div>
      )}

      {!loading && displayData.length > 0 && (
        <>
          <div className="metrics-overview">
            <div className="metric-card views">
              <div className="metric-icon">
                <VisibilityIcon />
              </div>
              <div className="metric-content">
                <h3>{totals.views.toLocaleString()}</h3>
                <p>Total Views</p>
              </div>
              {!isProUser && <LockIcon className="metric-lock" />}
            </div>

            <div className="metric-card submissions">
              <div className="metric-icon">
                <SendIcon />
              </div>
              <div className="metric-content">
                <h3>{totals.submissions.toLocaleString()}</h3>
                <p>Submissions</p>
              </div>
              {!isProUser && <LockIcon className="metric-lock" />}
            </div>

            <div className="metric-card successes">
              <div className="metric-icon">
                <CheckCircleIcon />
              </div>
              <div className="metric-content">
                <h3>{totals.successes.toLocaleString()}</h3>
                <p>Successful</p>
              </div>
              {!isProUser && <LockIcon className="metric-lock" />}
            </div>

            <div className="metric-card errors">
              <div className="metric-icon">
                <ErrorIcon />
              </div>
              <div className="metric-content">
                <h3>{totals.errors.toLocaleString()}</h3>
                <p>Errors</p>
              </div>
              {!isProUser && <LockIcon className="metric-lock" />}
            </div>

            <div className="metric-card redirects">
              <div className="metric-icon">
                <RedirectIcon />
              </div>
              <div className="metric-content">
                <h3>{totals.redirects.toLocaleString()}</h3>
                <p>Redirects</p>
              </div>
              {!isProUser && <LockIcon className="metric-lock" />}
            </div>
          </div>

          <div className="analytics-content">
            <div className="conversion-metrics">
              <h3>Conversion Metrics </h3>
              {/* <h3>Conversion Metrics {!isProUser && <span className="demo-label">(Demo Data)</span>}</h3> */}
              <div className="conversion-grid">
                {displayData.map((data, index) => (
                  <div key={index} className={`conversion-card ${!isProUser ? 'demo-card' : ''}`}>
                    <h4>{getFormName(data.form_id)}</h4>
                    <div className="conversion-stats">
                      <div className="stat">
                        <span className="stat-label">Conversion Rate</span>
                        <span className="stat-value">{calculateConversionRate(data)}%</span>
                        <small>{data.successes} / {data.views} views</small>
                      </div>
                      <div className="stat">
                        <span className="stat-label">Success Rate</span>
                        <span className="stat-value">{calculateSuccessRate(data)}%</span>
                        <small>{data.successes} / {data.submissions} submissions</small>
                      </div>
                    </div>
                    {!isProUser && <LockIcon className="card-lock" />}
                  </div>
                ))}
              </div>
            </div>

            <div className="detailed-analytics">
              <h3>Detailed Analytics {!isProUser && <span className="demo-label">(NEW)</span>}</h3>
              <div className="analytics-table">
                <table>
                  <thead>
                    <tr>
                      <th>Form Name</th>
                      <th>Views</th>
                      <th>Submissions</th>
                      <th>Success</th>
                      <th>Errors</th>
                      <th>Redirects</th>
                      <th>Conversion Rate</th>
                      <th>Success Rate</th>
                    </tr>
                  </thead>
                  <tbody>
                    {displayData.map((data, index) => (
                      <tr key={index} className={!isProUser ? 'demo-row' : ''}>
                        <td className="form-name">{getFormName(data.form_id)}</td>
                        <td>{data.views}</td>
                        <td>{data.submissions}</td>
                        <td className="success">{data.successes}</td>
                        <td className="error">{data.errors}</td>
                        <td>{data.redirects}</td>
                        <td className="conversion-rate">{calculateConversionRate(data)}%</td>
                        <td className="success-rate">{calculateSuccessRate(data)}%</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                {!isProUser && (
                  <div className="table-overlay">
                    <LockIcon className="overlay-lock" />
                    <p>Upgrade to Pro for real analytics data</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </>
      )}

      {!loading && selectedForms.length > 0 && displayData.length === 0 && isProUser && (
        <div className="no-data-state">
          <TrendingUpIcon className="no-data-icon" />
          <h3>No Analytics Data Available</h3>
          <p>No analytics data found for the selected forms in the chosen date range.</p>
          <p>Analytics data will appear here once users start interacting with your forms.</p>
        </div>
      )}

      {!loading && selectedForms.length === 0 && isProUser && (
        <div className="no-selection-state">
          <AnalyticsIcon className="no-selection-icon" />
          <h3>Select Forms to View Analytics</h3>
          <p>Choose one or more forms from the list above to view their analytics data.</p>
        </div>
      )}

      <NoticeModal
        isOpen={modalConfig.isOpen}
        onClose={(e) => {
          e?.stopPropagation();
          closeModal();
        }}
        onConfirm={modalConfig.onConfirm}
        onDecline={(e) => {
          e?.stopPropagation();
          closeModal();
        }}
        type={modalConfig.type}
        title={modalConfig.title}
        message={modalConfig.message}
        confirmText={modalConfig.confirmText}
        declineText={modalConfig.declineText}
        position={modalConfig.position || 'center'}
        autoClose={modalConfig.type === 'toast'}
        autoCloseTime={3000}
      />
    </div>
  );
};

export default Analytics;