import { XMarkIcon } from '@heroicons/react/24/outline';

interface WelcomeModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) {
  if (!isOpen) return null;

  return (
    <div className="modal modal-open">
      <div className="modal-box max-w-4xl bg-gray-800 text-white border border-gray-600">
        <div className="flex justify-between items-center mb-6">
          <h3 className="font-bold text-xl text-blue-300">
            Omnilingual ASR Media Transcription Tool
          </h3>
          <button
            className="btn btn-sm btn-circle btn-ghost text-gray-300 hover:text-white hover:bg-gray-700"
            onClick={onClose}
            aria-label="Close modal"
          >
            <XMarkIcon className="w-5 h-5" />
          </button>
        </div>

        <div className="space-y-4">
          {/* Main Description */}
          <div className="bg-gray-700 p-4 rounded-lg border-l-4 border-blue-500">
            <h4 className="font-semibold text-blue-200 mb-2">About This Tool</h4>
            <p className="text-gray-200 leading-relaxed">
              This experimental transcription tool uses the Omnilingual ASR model to transcribe audio and video content
              for <strong>low-resource languages</strong> around the world. Our goal is to help preserve and
              document linguistic diversity by making transcription accessible for underrepresented languages.
            </p>
          </div>

          {/* Important Disclaimer */}
          <div className="bg-yellow-900/40 p-4 rounded-lg border-l-4 border-yellow-500">
            <h4 className="font-semibold text-yellow-200 mb-2">⚠️ Important Disclaimer</h4>
            <p className="text-yellow-100 leading-relaxed mb-3">
              <strong>This is experimental software.</strong> While we strive for accuracy, transcriptions
              are not perfect. You should always <strong>double-check the outputs and make edits accordingly</strong>
              {" "}to ensure accuracy for your specific use case.
            </p>
            <p className="text-yellow-100 leading-relaxed mb-3">
              <strong>Shared Server Limitations:</strong> Due to resource constraints, we can only process one request at a time on this shared server.
            </p>
            <p className="text-yellow-100 leading-relaxed">
              <strong>Want dedicated access?</strong> Clone this HuggingFace Space or run on your own servers to remove server limitations. See the{' '}
              <a
                href="https://huggingface.co/spaces/facebook/mms-transcriptions/blob/main/README.md"
                target="_blank"
                rel="noopener noreferrer"
                className="text-yellow-300 hover:text-yellow-200 underline transition-colors"
              >
                setup guide
              </a>
              {" "}for instructions.
            </p>
          </div>

          {/* Language Information */}
          <div className="bg-gray-700 p-4 rounded-lg border-l-4 border-green-500">
            <h4 className="font-semibold text-green-200 mb-2">Supported Languages</h4>
            <p className="text-gray-200 leading-relaxed">
              For this public demo, we've restricted transcription to low-resource languages with
              <strong> error rates below 10%</strong>. This ensures the best possible experience while
              focusing on languages that could benefit most from improved transcription tools.
            </p>
          </div>

          {/* Cultural Impact */}
          <div className="bg-purple-900/40 p-4 rounded-lg border-l-4 border-purple-500">
            <h4 className="font-semibold text-purple-200 mb-2">Preserving Linguistic Heritage</h4>
            <p className="text-purple-100 leading-relaxed">
              Many of the world's languages lack digital transcription tools. By improving these models
              for low-resource languages, we're contributing to the preservation of cultural heritage
              and making digital content more accessible to diverse communities.
            </p>
          </div>


        </div>

        <div className="modal-action mt-6">
          <button className="py-2 px-4 bg-blue-600 hover:bg-blue-700 rounded text-sm transition-colors" onClick={onClose}>
            Get Started
          </button>
        </div>
      </div>
    </div>
  );
}