import { Settings, ExternalLink } from 'lucide-react'

export default function SettingsPanel() {
  return (
    <div>
      <div className="page-title">
        <Settings size={20} color="var(--accent-light)" />
        Settings
      </div>

      <div style={{ maxWidth: 560 }}>
        <div className="section" style={{ marginBottom: 16 }}>
          <div className="section-header"><Settings size={13} /> Proxy</div>
          <div className="section-body">
            <div className="billing-row">
              <span className="label">HTTP proxy</span>
              <code className="mono" style={{ color: 'var(--accent-light)' }}>localhost:8080</code>
            </div>
            <div className="billing-row">
              <span className="label">HTTPS tunnel</span>
              <code className="mono" style={{ color: 'var(--accent-light)' }}>localhost:8443</code>
            </div>
            <div className="billing-row">
              <span className="label">Dashboard</span>
              <code className="mono" style={{ color: 'var(--accent-light)' }}>localhost:8080/bibividi/ui</code>
            </div>
          </div>
        </div>

        <div className="section" style={{ marginBottom: 16 }}>
          <div className="section-header">Quick links</div>
          <div className="section-body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href="/bibividi/roi" target="_blank" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <ExternalLink size={13} /> ROI Calculator
            </a>
            <a href="/bibividi/badge.svg" target="_blank" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <ExternalLink size={13} /> Savings Badge (SVG)
            </a>
            <a href="/bibividi/docs" target="_blank" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <ExternalLink size={13} /> API Docs (Swagger)
            </a>
          </div>
        </div>

        <div className="section">
          <div className="section-header">Environment</div>
          <div className="section-body">
            <p className="muted fine">
              Configure BIBIVIDI via environment variables or <code>.env</code> file.
              All settings use the <code>BIBIVIDI_</code> prefix.
            </p>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                ['BIBIVIDI_MAILER_PROVIDER', 'resend | postmark'],
                ['BIBIVIDI_BILLING_TIER', 'free | pro | growth | enterprise'],
                ['BIBIVIDI_GENERATOR_ENABLED', 'true | false'],
                ['BIBIVIDI_ENABLE_CHAINS', 'true | false'],
                ['BIBIVIDI_BADGE_TOKEN', 'optional — protect /bibividi/badge.svg'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', gap: 16, fontSize: 12 }}>
                  <code style={{ color: 'var(--accent-light)', flexShrink: 0 }}>{k}</code>
                  <span className="muted">{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
