import { useState } from 'react';

export default function IframeWithModal() {
  const [isOpen, setIsOpen] = useState(false);
  const appCode = "4eFb0BunqZYEZlg7";
  const baseUrl = "https://ai-studio.bliv.bangunindo.io";
  const iframeSrc = `${baseUrl}/chatbot-auth/${appCode}/history`;

  const toggleModal = (val: boolean) => {
    setIsOpen(val);
    document.body.style.overflow = val ? 'hidden' : '';
  };

  return (
    <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div style={{ background: 'white', borderRadius: 24, boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1)', width: '100%', maxWidth: 480, overflow: 'hidden', border: '1px solid #f1f5f9' }}>
        <div style={{ padding: 32, textAlign: 'center', borderBottom: '1px solid #f1f5f9' }}>
          <div style={{ width: 64, height: 64, background: '#e0e7ff', color: '#4f46e5', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, margin: '0 auto 16px' }}>🔐</div>
          <h1 style={{ fontSize: '1.5rem', color: '#0f172a', marginBottom: 4, fontWeight: 700 }}>Chatbot Modal Demo</h1>
          <p style={{ fontSize: '0.875rem', color: '#64748b' }}>Authenticated • With History • Iframe Modal</p>
        </div>
        <div style={{ padding: '24px 32px 32px' }}>
          <div style={{ fontSize: '0.7rem', fontWeight: 700, textTransform: 'uppercase', color: '#94a3b8', marginBottom: 12 }}>Configuration</div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
            <span style={{ fontSize: '0.7rem', padding: '6px 12px', background: '#e0f2f1', borderRadius: 99, display: 'flex', alignItems: 'center', gap: 6, color: '#14b8a6', fontWeight: 600 }}>
              <span style={{ width: 6, height: 6, background: '#14b8a6', borderRadius: '50%' }} /> Auth Enabled
            </span>
            <span style={{ fontSize: '0.7rem', padding: '6px 12px', background: '#dbeafe', borderRadius: 99, display: 'flex', alignItems: 'center', gap: 6, color: '#1e40af', fontWeight: 600 }}>
              <span style={{ width: 6, height: 6, background: '#1e40af', borderRadius: '50%' }} /> History On
            </span>
          </div>
          <div style={{ background: '#f8fafc', borderRadius: 16, padding: 16, marginBottom: 24, border: '1px solid #f1f5f9' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem', padding: '6px 0', borderBottom: '1px solid #f1f5f9' }}>
              <span style={{ color: '#64748b' }}>Authentication</span>
              <span style={{ fontWeight: 600, color: '#0f172a' }}>Required</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem', padding: '6px 0' }}>
              <span style={{ color: '#64748b' }}>Mechanism</span>
              <span style={{ fontWeight: 600, color: '#0f172a' }}>Iframe Modal</span>
            </div>
          </div>
          <button 
            onClick={() => toggleModal(true)}
            style={{ width: '100%', background: '#4f46e5', color: 'white', border: 'none', padding: '14px 24px', fontSize: '0.95rem', fontWeight: 600, borderRadius: 12, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            Mulai Percakapan
          </button>
        </div>
      </div>

      {isOpen && (
        <div 
          onClick={() => toggleModal(false)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(0, 0, 0, 0.4)', backdropFilter: 'blur(8px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
        >
          <div 
            onClick={(e) => e.stopPropagation()}
            style={{ background: 'white', borderRadius: 24, width: '100%', maxWidth: 800, height: '80vh', maxHeight: 600, display: 'flex', flexDirection: 'column', overflow: 'hidden', boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)' }}
          >
            <div style={{ padding: '16px 24px', background: '#f8fafc', borderBottom: '1px solid #f1f5f9', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <h3 style={{ fontSize: '1rem', color: '#0f172a' }}>Bliv AI Chatbot</h3>
              <button 
                onClick={() => toggleModal(false)}
                style={{ background: '#f1f5f9', border: 'none', width: 32, height: 32, borderRadius: 8, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.25rem', color: '#64748b' }}
              >
                &times;
              </button>
            </div>
            <div style={{ flex: 1, minHeight: 0 }}>
              <iframe src={iframeSrc} allow="microphone" title="Chatbot" style={{ width: '100%', height: '100%', border: 'none' }} />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}