import { useState, useEffect } from 'react';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { usePageLoading } from '../../context/PageLoadingContext';
import { fetchIndustries, Industry } from '../../services/api';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';

export default function Industries() {
  const toast = useToast();
  const { startLoading, stopLoading } = usePageLoading();
  const [industries, setIndustries] = useState<Industry[]>([]);

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

  const loadIndustries = async () => {
    try {
      startLoading('Loading industries...');
      const response = await fetchIndustries();
      setIndustries(response.industries || []);
    } catch (error: any) {
      toast.error(`Failed to load industries: ${error.message}`);
    } finally {
      stopLoading();
    }
  };

  return (
    <>
      <PageMeta title="Industries" />
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Industries</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">Manage global industry templates (Admin Only)</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {industries.map((industry) => (
          <Card key={industry.id} className="p-6">
            <div className="flex justify-between items-start mb-4">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{industry.name}</h3>
              <Badge variant="light" color={industry.is_active ? 'success' : 'dark'}>
                {industry.is_active ? 'Active' : 'Inactive'}
              </Badge>
            </div>
            {industry.description && (
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{industry.description}</p>
            )}
            <p className="text-sm text-gray-500 dark:text-gray-400">
              Sectors: {industry.sectors_count || 0}
            </p>
          </Card>
        ))}
      </div>
    </>
  );
}