// Inquiry form for SolaceNet (IRU) — Solace Bank Group PLC on Sankofa Marketplace

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

interface InquiryFormProps {
  offeringId: string;
  onSuccess?: () => void;
  onCancel?: () => void;
}

export const InquiryForm: React.FC<InquiryFormProps> = ({
  offeringId,
  onSuccess,
  onCancel,
}) => {
  const [formData, setFormData] = useState({
    organizationName: '',
    institutionalType: '',
    jurisdiction: '',
    contactEmail: '',
    contactPhone: '',
    contactName: '',
    estimatedVolume: '',
    expectedGoLive: '',
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const payload = {
        offeringId,
        organizationName: formData.organizationName,
        institutionalType: formData.institutionalType,
        jurisdiction: formData.jurisdiction,
        contactEmail: formData.contactEmail,
        contactPhone: formData.contactPhone || undefined,
        contactName: formData.contactName,
        estimatedVolume: formData.estimatedVolume || undefined,
        expectedGoLive: formData.expectedGoLive ? new Date(formData.expectedGoLive).toISOString() : undefined,
      };

      const response = await apiClient.post<{ success: boolean; data: any }>(
        '/api/v1/iru/marketplace/inquiries',
        payload
      );

      if (response.success) {
        setSuccess(true);
        if (onSuccess) {
          setTimeout(() => {
            onSuccess();
          }, 2000);
        }
      }
    } catch (err: any) {
      setError(err.message || 'Failed to submit inquiry. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  if (success) {
    return (
      <div className="text-center py-8">
        <div className="text-green-600 text-5xl mb-4">✓</div>
        <h3 className="text-2xl font-semibold mb-2 text-gray-800">Inquiry submitted</h3>
        <p className="text-gray-600 mb-4">
          Thank you for your interest in {SOLACENET_PRODUCT_NAME}. {SOLACENET_VENDOR_NAME} will follow up
          within 24 hours.
        </p>
        <p className="text-sm text-gray-500">
          We will review your inquiry and contact you with next steps.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <p className="text-sm text-gray-500">
        This inquiry is for <strong>{SOLACENET_PRODUCT_NAME}</strong>, offered by {SOLACENET_VENDOR_NAME}{' '}
        on Sankofa Marketplace.
      </p>
      <p className="text-sm text-gray-500">
        Commercial model: <strong>{COMMERCIAL_MODEL_LABELS[SOLACENET_OFFER_METADATA.commercialModel]}</strong>.
        Fulfillment: <strong>{FULFILLMENT_MODE_LABELS[SOLACENET_OFFER_METADATA.fulfillmentMode]}</strong>.
      </p>
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
          {error}
        </div>
      )}

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Organization Name <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          name="organizationName"
          value={formData.organizationName}
          onChange={handleChange}
          required
          className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Institutional Type <span className="text-red-500">*</span>
        </label>
        <select
          name="institutionalType"
          value={formData.institutionalType}
          onChange={handleChange}
          required
          className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <option value="">Select Type</option>
          <option value="CentralBank">Central Bank</option>
          <option value="SettlementBank">Settlement Bank</option>
          <option value="CommercialBank">Commercial Bank</option>
          <option value="DFI">Development Finance Institution</option>
          <option value="SpecialEntity">Special Entity</option>
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Jurisdiction <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          name="jurisdiction"
          value={formData.jurisdiction}
          onChange={handleChange}
          required
          placeholder="e.g., United States, European Union"
          className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Contact Name <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            name="contactName"
            value={formData.contactName}
            onChange={handleChange}
            required
            className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Contact Email <span className="text-red-500">*</span>
          </label>
          <input
            type="email"
            name="contactEmail"
            value={formData.contactEmail}
            onChange={handleChange}
            required
            className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Contact Phone
        </label>
        <input
          type="tel"
          name="contactPhone"
          value={formData.contactPhone}
          onChange={handleChange}
          className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Estimated Transaction Volume
        </label>
        <input
          type="text"
          name="estimatedVolume"
          value={formData.estimatedVolume}
          onChange={handleChange}
          placeholder="e.g., 1M transactions/month"
          className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Expected Go-Live Date
        </label>
        <input
          type="date"
          name="expectedGoLive"
          value={formData.expectedGoLive}
          onChange={handleChange}
          className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <div className="flex gap-4 pt-4">
        <button
          type="submit"
          disabled={loading}
          className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {loading ? 'Submitting...' : 'Submit Inquiry'}
        </button>
        {onCancel && (
          <button
            type="button"
            onClick={onCancel}
            className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300 transition-colors"
          >
            Cancel
          </button>
        )}
      </div>
    </form>
  );
};

export default InquiryForm;
