/**
 * Extension Details Modal Component
 * 
 * Modal for viewing detailed extension information
 */
'use client';

import React, { useState } from 'react';
import { ConfirmationDialog } from '@alga-psa/ui/components/ConfirmationDialog';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';

interface ExtensionUI {
  id: string;
  name: string;
  description: string;
  version: string;
  author: string;
  isEnabled: boolean;
  createdAt: Date;
  updatedAt: Date;
  tenantId: string;
}

interface ExtensionDetailsModalProps {
  extension: ExtensionUI | null;
  isOpen: boolean;
  onClose: () => void;
  onToggle?: (id: string, currentStatus: boolean) => void;
  onRemove?: (id: string) => void;
}

export default function ExtensionDetailsModal({
  extension,
  isOpen,
  onClose,
  onToggle,
  onRemove
}: ExtensionDetailsModalProps) {
  const { t } = useTranslation('msp/extensions');
  const [showRemoveConfirm, setShowRemoveConfirm] = useState(false);

  if (!isOpen || !extension) return null;

  return (
    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
      <div className="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div className="flex justify-between items-center pb-3 border-b border-gray-200">
          <h3 className="text-lg font-semibold text-gray-900">{extension.name}</h3>
          <button
            onClick={onClose}
            className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
          >
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
            </svg>
          </button>
        </div>

        <div className="mt-4">
          <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
            <div className="sm:col-span-6">
              <label className="block text-sm font-medium text-gray-700">{t('detailsModal.description')}</label>
              <p className="mt-1 text-sm text-gray-900">{extension.description}</p>
            </div>

            <div className="sm:col-span-2">
              <label className="block text-sm font-medium text-gray-700">{t('detailsModal.version')}</label>
              <p className="mt-1 text-sm text-gray-900">{extension.version}</p>
            </div>

            <div className="sm:col-span-2">
              <label className="block text-sm font-medium text-gray-700">{t('detailsModal.author')}</label>
              <p className="mt-1 text-sm text-gray-900">{extension.author || t('detailsModal.unknownAuthor')}</p>
            </div>

            <div className="sm:col-span-2">
              <label className="block text-sm font-medium text-gray-700">{t('detailsModal.status')}</label>
              <span className={`mt-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                extension.isEnabled
                  ? 'bg-success/15 text-success'
                  : 'bg-muted text-muted-foreground'
              }`}>
                {extension.isEnabled ? t('detailsModal.enabled') : t('detailsModal.disabled')}
              </span>
            </div>

            <div className="sm:col-span-3">
              <label className="block text-sm font-medium text-gray-700">{t('detailsModal.created')}</label>
              <p className="mt-1 text-sm text-gray-900">{extension.createdAt.toLocaleDateString()}</p>
            </div>

            <div className="sm:col-span-3">
              <label className="block text-sm font-medium text-gray-700">{t('detailsModal.lastUpdated')}</label>
              <p className="mt-1 text-sm text-gray-900">{extension.updatedAt.toLocaleDateString()}</p>
            </div>

            <div className="sm:col-span-6">
              <label className="block text-sm font-medium text-gray-700">{t('detailsModal.extensionId')}</label>
              <p className="mt-1 text-sm text-gray-500 font-mono">{extension.id}</p>
            </div>
          </div>
        </div>

        <div className="mt-6 flex justify-end space-x-3 pt-4 border-t border-gray-200">
          <button
            onClick={() => alert(t('detailsModal.settingsComingSoon'))}
            className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
          >
            <svg className="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            {t('detailsModal.settings')}
          </button>
          
          {onToggle && (
            <button
              onClick={() => onToggle(extension.id, extension.isEnabled)}
              className={`inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium ${
                extension.isEnabled
                  ? 'bg-amber-600 text-white hover:bg-amber-700'
                  : 'bg-green-600 text-white hover:bg-green-700'
              }`}
            >
              {extension.isEnabled ? (
                <>
                  <svg className="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  {t('detailsModal.disable')}
                </>
              ) : (
                <>
                  <svg className="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  {t('detailsModal.enable')}
                </>
              )}
            </button>
          )}

          {onRemove && (
            <button
              onClick={() => setShowRemoveConfirm(true)}
              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700"
            >
              <svg className="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
              {t('detailsModal.remove')}
            </button>
          )}
        </div>
      </div>
      <ConfirmationDialog
        isOpen={showRemoveConfirm}
        onClose={() => setShowRemoveConfirm(false)}
        onConfirm={() => {
          setShowRemoveConfirm(false);
          onRemove!(extension.id);
          onClose();
        }}
        title={t('detailsModal.removeTitle')}
        message={t('detailsModal.removeMessage')}
        confirmLabel={t('detailsModal.confirmRemove')}
        cancelLabel={t('detailsModal.cancel')}
        id="remove-extension-modal-confirm"
      />
    </div>
  );
}