'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import styles from '@/app/dashboard/dashboard.module.css';

interface ResourceGuide {
  id: string;
  slug: string;
  title: string;
  publishedAt: string | null;
}

interface ResourceCategory {
  id: string;
  name: string;
  slug: string;
  guides: ResourceGuide[];
}

export default function DealerResourceCenter() {
  const [categories, setCategories] = useState<ResourceCategory[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<string>('');

  const fetchResources = useCallback(async () => {
    try {
      const response = await fetch('/api/resources');
      if (!response.ok) {
        throw new Error('Failed to fetch resources');
      }
      const data = await response.json();
      setCategories(data.categories);
      // Set first category as active if there are any and no tab is selected
      setActiveTab((prev) => prev || data.categories[0]?.id || '');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load resources');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchResources();
  }, [fetchResources]);

  if (loading) {
    return (
      <div className={styles.resourceLoading}>
        <div className={styles.resourceSpinner} />
        <span>Loading resources...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div className={styles.resourceError}>
        <p>{error}</p>
      </div>
    );
  }

  if (categories.length === 0) {
    return (
      <div className={styles.resourceEmpty}>
        <p>No resource guides available yet. Check back soon!</p>
      </div>
    );
  }

  const activeCategory = categories.find((cat) => cat.id === activeTab);

  return (
    <div className={styles.resourceCenter}>
      {/* Category Tabs */}
      <div className={styles.resourceTabs}>
        {categories.map((category) => (
          <button
            key={category.id}
            className={`${styles.resourceTab} ${activeTab === category.id ? styles.resourceTabActive : ''}`}
            onClick={() => setActiveTab(category.id)}
          >
            {category.name}
          </button>
        ))}
      </div>

      {/* Guide Grid */}
      {activeCategory && (
        <div className={styles.resourceGrid}>
          {activeCategory.guides.map((guide) => (
            <Link
              key={guide.id}
              href={`/resources/${guide.slug}`}
              className={styles.resourceButton}
            >
              {guide.title}
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}