// SolaceNet (IRU) lifecycle — vendor: Solace Bank Group PLC

import React, { useState, useEffect } from 'react';
import { apiClient } from '@/services/api/client';
import { SOLACENET_PRODUCT_NAME, SOLACENET_VENDOR_NAME } from '@/constants/marketplace';

interface IRUManagementData {
  subscriptionId: string;
  offering: { name: string; capacityTier: number };
  subscriptionStatus: string;
  subscriptionDate: Date;
  activationDate?: Date;
  terminationDate?: Date;
  agreements: Array<{ agreementId: string; status: string; executedAt?: Date }>;
}

export const IRUManagement: React.FC = () => {
  const [management, setManagement] = useState<IRUManagementData[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchManagement = async () => {
      try {
        setLoading(true);
        const data = await apiClient.get<{ success: boolean; data: IRUManagementData[] }>(
          '/api/v1/iru/portal/iru-management'
        );
        if (data.success) {
          setManagement(data.data);
        }
      } catch (err: any) {
        setError(err.message || `Failed to load ${SOLACENET_PRODUCT_NAME} management data`);
      } finally {
        setLoading(false);
      }
    };

    fetchManagement();
  }, []);

  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 {SOLACENET_PRODUCT_NAME}…</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">
        <p className="text-sm font-medium text-gray-500 uppercase tracking-wide mb-1">
          {SOLACENET_VENDOR_NAME}
        </p>
        <h1 className="text-3xl font-bold mb-8 text-gray-800">{SOLACENET_PRODUCT_NAME} management</h1>

        {management.length > 0 ? (
          <div className="space-y-6">
            {management.map((item) => (
              <div key={item.subscriptionId} className="bg-white rounded-lg shadow p-6">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h2 className="text-2xl font-semibold text-gray-800">{item.offering.name}</h2>
                    <p className="text-gray-600">Subscription ID: {item.subscriptionId}</p>
                  </div>
                  <span className={`px-3 py-1 rounded-full text-sm font-semibold ${
                    item.subscriptionStatus === 'active'
                      ? 'bg-green-100 text-green-800'
                      : item.subscriptionStatus === 'suspended'
                      ? 'bg-yellow-100 text-yellow-800'
                      : 'bg-gray-100 text-gray-800'
                  }`}>
                    {item.subscriptionStatus}
                  </span>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                  <div>
                    <div className="text-sm text-gray-500">Subscription Date</div>
                    <div className="text-gray-800">
                      {new Date(item.subscriptionDate).toLocaleDateString()}
                    </div>
                  </div>
                  {item.activationDate && (
                    <div>
                      <div className="text-sm text-gray-500">Activation Date</div>
                      <div className="text-gray-800">
                        {new Date(item.activationDate).toLocaleDateString()}
                      </div>
                    </div>
                  )}
                  {item.terminationDate && (
                    <div>
                      <div className="text-sm text-gray-500">Termination Date</div>
                      <div className="text-gray-800">
                        {new Date(item.terminationDate).toLocaleDateString()}
                      </div>
                    </div>
                  )}
                </div>

                {item.agreements.length > 0 && (
                  <div>
                    <h3 className="text-lg font-semibold mb-2 text-gray-800">Agreements</h3>
                    <div className="space-y-2">
                      {item.agreements.map((agreement) => (
                        <div key={agreement.agreementId} className="flex items-center justify-between bg-gray-50 p-3 rounded">
                          <div>
                            <div className="font-medium text-gray-800">{agreement.agreementId}</div>
                            {agreement.executedAt && (
                              <div className="text-sm text-gray-500">
                                Executed: {new Date(agreement.executedAt).toLocaleDateString()}
                              </div>
                            )}
                          </div>
                          <span className={`px-2 py-1 rounded text-sm font-semibold ${
                            agreement.status === 'signed' || agreement.status === 'executed'
                              ? 'bg-green-100 text-green-800'
                              : 'bg-yellow-100 text-yellow-800'
                          }`}>
                            {agreement.status}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        ) : (
          <div className="bg-white rounded-lg shadow p-8 text-center">
            <p className="text-gray-600 text-lg">No {SOLACENET_PRODUCT_NAME} subscriptions found.</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default IRUManagement;
