'use client';

import { useState, useEffect, Suspense } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { useSession } from 'next-auth/react';
import Alert from '@/components/ui/Alert';
import { Card, CardBody } from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import { PerformanceMetrics } from '@/components/dashboard';
import SupportForm from '@/components/SupportForm';
import DealerResourceCenter from '@/components/dashboard/DealerResourceCenter';
import styles from './dashboard.module.css';

const leadPages: Array<{ id: string; name: string; description: string }> = [];

interface DealerInfo {
  status: string;
  subdomain: string;
  domain: string;
  dealerNumber?: string | null;
  businessName?: string | null;
}

function DashboardContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { data: session } = useSession();
  const [showPublishedMessage, setShowPublishedMessage] = useState(false);
  const [showSetupCompleteMessage, setShowSetupCompleteMessage] = useState(false);
  const [dealer, setDealer] = useState<DealerInfo | null>(null);

  // Fetch dealer info to check publish status
  useEffect(() => {
    const fetchDealer = async () => {
      if (!session?.user?.id) return;
      try {
        const response = await fetch('/api/dealer');
        if (response.ok) {
          const data = await response.json();
          setDealer(data);
        }
      } catch (error) {
        console.error('Failed to fetch dealer data:', error);
      }
    };
    fetchDealer();
  }, [session?.user?.id]);

  useEffect(() => {
    if (searchParams.get('published') === 'true') {
      // This will Cause an extra render how it is currently implemented, but it is ok for our use case because it is only there for 5 seconds.
      // eslint-disable-next-line react-hooks/set-state-in-effect -- Valid pattern for URL param state sync
      setShowPublishedMessage(true);
      const timer = setTimeout(() => setShowPublishedMessage(false), 5000);
      return () => clearTimeout(timer);
    }
    if (searchParams.get('setup') === 'complete') {
      setShowSetupCompleteMessage(true);
    }
  }, [searchParams]);

  const isUnpublished = dealer && dealer.status !== 'active';

  return (
    <>
      {showPublishedMessage && (
        <div className={styles.successMessage}>
          <Alert
            variant="success"
            title="Success!"
            description="Congratulations! Your dealer site is now live!"
            dismissible={true}
            onClose={() => setShowPublishedMessage(false)}
          />
        </div>
      )}

      {/* Setup Complete / First-Time Publish Prompt */}
      {(showSetupCompleteMessage || isUnpublished) && (
        <div className={styles.setupCompleteMessage}>
          <Alert
            variant="info"
            title={showSetupCompleteMessage ? 'Setup Complete!' : 'Ready to Go Live?'}
            description={
              showSetupCompleteMessage
                ? 'Your account is set up. Preview your site and click "Publish Site" when you\'re ready to go live.'
                : 'Your site is ready to preview. Click "Publish Site" to make it live.'
            }
            dismissible={showSetupCompleteMessage}
            onClose={() => setShowSetupCompleteMessage(false)}
          >
            <div className={styles.setupCompleteActions}>
              <Button
                variant="secondary"
                size="sm"
                onClick={() => router.push('/dashboard/preview')}
              >
                Preview Site
              </Button>
            </div>
          </Alert>
        </div>
      )}

      <section className={styles.section}>
        {/* Large outer card containing everything */}
        <div className={styles.dashboardCard}>
          {/* Inner dashed card wrapping all content including title */}
          <div className={styles.dashboardInnerCard}>
            <h2 className={styles.sectionTitle}>Your Dashboard</h2>
            <div className={styles.dashboardGrid}>
              {/* Left column: Editor buttons and actions */}
              <div className={styles.editorSection}>
                <h3 className={styles.subsectionTitle}>Edit Your Site</h3>
                <div className={styles.editorButtons}>
                  <Button
                    variant="primary"
                    size="lg"
                    onClick={() => router.push('/dashboard/editor')}
                    className={styles.editorButton}
                  >
                    Basic Editor
                  </Button>
                  <Button
                    variant="primary"
                    size="lg"
                    onClick={() => router.push('/dashboard/slider-editor')}
                    className={styles.editorButton}
                  >
                    Slider Editor
                  </Button>
                  <Button
                    variant="primary"
                    size="lg"
                    onClick={() => router.push('/dashboard/cms/pages')}
                    className={styles.editorButton}
                  >
                    Pages Editor
                  </Button>
                  <Button
                    variant="primary"
                    size="lg"
                    onClick={() => router.push('/dashboard/cms/navigation')}
                    className={styles.editorButton}
                  >
                    Menu Editor
                  </Button>
                  <Button
                    variant="primary"
                    size="lg"
                    onClick={() => router.push('/dashboard/cms/links')}
                    className={styles.editorButton}
                  >
                    Quick Links
                  </Button>
                  <Button
                    variant="primary"
                    size="lg"
                    onClick={() => router.push('/dashboard/leads')}
                    className={styles.editorButton}
                  >
                    Leads
                  </Button>
                  <Button
                    variant="primary"
                    size="lg"
                    onClick={() => router.push('/dashboard/media')}
                    className={styles.editorButton}
                  >
                    Media Library
                  </Button>
                </div>
              </div>

              {/* Right column: Performance metrics */}
              <div className={styles.metricsSection}>
                <PerformanceMetrics />
              </div>
            </div>
          </div>
        </div>
      </section>

      {leadPages.length > 0 && (
        <section className={styles.section}>
          <div className={styles.content}>
            <ul className={styles.leadPagesList}>
              {leadPages.map((page) => (
                <li key={page.id}>
                  <Card variant="default">
                    <CardBody>
                      <h3 className={styles.leadPage__title}>{page.name}</h3>
                      <p className={styles.leadPage__description}>{page.description}</p>
                    </CardBody>
                  </Card>
                </li>
              ))}
            </ul>
          </div>
        </section>
      )}

      {/* Dealer Resource Center */}
      <section className={`${styles.section} ${styles.resourceSection}`}>
        <div className={styles.resourceCard}>
          <div className={styles.resourceInnerCard}>
            <h2 className={styles.sectionTitle}>Dealer Resource Center</h2>
            <DealerResourceCenter />
          </div>
        </div>
      </section>

      {/* Contact Form Section */}
      <section id="contact" className={`${styles.section} ${styles.contactSection}`}>
        <div className={styles.contactCard}>
          <div className={styles.contactInnerCard}>
            <h2 className={styles.sectionTitle}>Contact Us</h2>
            <p className={styles.contactDescription}>
              Have a question or need help? Send us a message and we&apos;ll get back to you.
            </p>
            <div className={styles.contactForm}>
              <SupportForm
                dealerName={dealer?.businessName}
                dealerNumber={dealer?.dealerNumber}
                userEmail={session?.user?.email}
              />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default function DashboardPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <DashboardContent />
    </Suspense>
  );
}