// Participant dashboard — SolaceNet (IRU) subscription via Sankofa Marketplace

import React, { useState, useEffect } from 'react';
import { apiClient } from '@/services/api/client';
import { Link } from 'react-router-dom';
import {
  COMMERCIAL_MODEL_LABELS,
  FULFILLMENT_MODE_LABELS,
  OFFER_TYPE_LABELS,
  SOLACENET_OFFER_METADATA,
  SOLACENET_PRODUCT_NAME,
  SOLACENET_VENDOR_NAME,
} from '@/constants/marketplace';

interface DashboardData {
  subscription: any;
  deploymentStatus: any;
  serviceHealth: any;
  recentActivity: any[];
}

export const ParticipantDashboard: React.FC = () => {
  const [dashboard, setDashboard] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchDashboard = async () => {
      try {
        setLoading(true);
        const data = await apiClient.get<{ success: boolean; data: DashboardData }>(
          '/api/v1/iru/portal/dashboard'
        );
        if (data.success) {
          setDashboard(data.data);
        }
      } catch (err: any) {
        setError(err.message || 'Failed to load dashboard');
      } finally {
        setLoading(false);
      }
    };

    fetchDashboard();
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading dashboard...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="text-red-600 text-xl mb-4">Error</div>
          <p className="text-gray-600">{error}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="container mx-auto px-4">
        <h1 className="text-3xl font-bold mb-8 text-gray-800">Participant Dashboard</h1>

        {dashboard?.subscription ? (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Subscription Card */}
            <div className="lg:col-span-2 bg-white rounded-lg shadow p-6">
              <h2 className="text-2xl font-semibold mb-4 text-gray-800">
                {SOLACENET_PRODUCT_NAME} subscription
              </h2>
              <p className="text-sm text-gray-500 mb-4">{SOLACENET_VENDOR_NAME}</p>
              <div className="mb-4 flex flex-wrap gap-2">
                <span className="rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700">
                  {OFFER_TYPE_LABELS[SOLACENET_OFFER_METADATA.offerType]}
                </span>
                <span className="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700">
                  {COMMERCIAL_MODEL_LABELS[SOLACENET_OFFER_METADATA.commercialModel]}
                </span>
                <span className="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700">
                  {FULFILLMENT_MODE_LABELS[SOLACENET_OFFER_METADATA.fulfillmentMode]}
                </span>
              </div>
              <div className="space-y-3">
                <div>
                  <div className="text-sm text-gray-500">Offering</div>
                  <div className="text-lg font-semibold text-gray-800">
                    {dashboard.subscription.offering.name}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-gray-500">Status</div>
                  <span className={`inline-block px-3 py-1 rounded-full text-sm font-semibold ${
                    dashboard.subscription.subscriptionStatus === 'active'
                      ? 'bg-green-100 text-green-800'
                      : 'bg-yellow-100 text-yellow-800'
                  }`}>
                    {dashboard.subscription.subscriptionStatus}
                  </span>
                </div>
                {dashboard.subscription.activationDate && (
                  <div>
                    <div className="text-sm text-gray-500">Activated</div>
                    <div className="text-gray-800">
                      {new Date(dashboard.subscription.activationDate).toLocaleDateString()}
                    </div>
                  </div>
                )}
              </div>
              <Link
                to="/portal/iru-management"
                className="mt-4 inline-block text-blue-600 hover:text-blue-700"
              >
                Manage {SOLACENET_PRODUCT_NAME} →
              </Link>
            </div>

            {/* Service Health Card */}
            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-2xl font-semibold mb-4 text-gray-800">Service Health</h2>
              <div className="space-y-3">
                <div>
                  <div className="text-sm text-gray-500 mb-1">Overall Status</div>
                  <span className={`inline-block px-3 py-1 rounded-full text-sm font-semibold ${
                    dashboard.serviceHealth.overall === 'healthy'
                      ? 'bg-green-100 text-green-800'
                      : 'bg-red-100 text-red-800'
                  }`}>
                    {dashboard.serviceHealth.overall}
                  </span>
                </div>
                <Link
                  to="/portal/monitoring"
                  className="mt-4 inline-block text-blue-600 hover:text-blue-700"
                >
                  View Details →
                </Link>
              </div>
            </div>

            {/* Deployment Status Card */}
            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-2xl font-semibold mb-4 text-gray-800">Deployment</h2>
              <div className="space-y-3">
                <div>
                  <div className="text-sm text-gray-500">Status</div>
                  <span className={`inline-block px-3 py-1 rounded-full text-sm font-semibold ${
                    dashboard.deploymentStatus.status === 'deployed'
                      ? 'bg-green-100 text-green-800'
                      : 'bg-yellow-100 text-yellow-800'
                  }`}>
                    {dashboard.deploymentStatus.status}
                  </span>
                </div>
                <Link
                  to="/portal/deployment"
                  className="mt-4 inline-block text-blue-600 hover:text-blue-700"
                >
                  View Status →
                </Link>
              </div>
            </div>
          </div>
        ) : (
          <div className="bg-white rounded-lg shadow p-8 text-center">
            <h2 className="text-2xl font-semibold mb-4 text-gray-800">No Active Subscription</h2>
            <p className="text-gray-600 mb-6">
              You don't have an active {SOLACENET_PRODUCT_NAME} subscription. Browse the marketplace to
              explore offerings from {SOLACENET_VENDOR_NAME} and others.
            </p>
            <Link
              to="/marketplace"
              className="inline-block bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors"
            >
              Browse Marketplace
            </Link>
          </div>
        )}
      </div>
    </div>
  );
};

export default ParticipantDashboard;
