import { useState, useEffect } from 'react';
import { api } from '../utils/api.js';

const CLAUDE_URL = 'https://claude.ai';

// Render "Built With" value — separator trails its token so it never starts a new line
function BuiltWithValue({ value }) {
  if (!value) return null;
  const parts = value.split('·').map(s => s.trim());
  return (
    <span style={{ display: 'inline' }}>
      {parts.map((part, i) => (
        <span key={part} style={{ whiteSpace: 'nowrap' }}>
          {part === 'Claude.ai'
            ? <a href={CLAUDE_URL} target="_blank" rel="noreferrer" className="about-link">{part}</a>
            : part}
          {i < parts.length - 1 && <span style={{ margin: '0 4px', color: 'var(--text-tertiary)' }}>·</span>}
        </span>
      ))}
    </span>
  );
}

export default function AboutModal({ onClose }) {
  const [about, setAbout] = useState(null);

  useEffect(() => {
    fetch('/api/about')
      .then(r => r.json())
      .then(({ about }) => setAbout(about))
      .catch(() => {});
  }, []);

  // Always use the original app identity — not the user-customised settings name/logo
  const appName = about?.default_app_name || 'jama';
  const logoSrc = about?.default_logo || '/icons/jama.png';
  const version = about?.version || '';
  const a = about || {};

  const rows = [
    { label: 'Version',    value: version },
    { label: 'Built With', value: a.built_with, builtWith: true },
    { label: 'Developer',  value: a.developer },
    { label: 'License',    value: a.license, link: a.license_url },
  ].filter(r => r.value);

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal about-modal">
        <button className="btn-icon about-close" onClick={onClose}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
        </button>

        <div className="about-hero">
          <img src={logoSrc} alt={appName} className="about-logo" />
          <h1 className="about-appname">{appName}</h1>
          <p className="about-tagline">just another messaging app</p>
        </div>

        {about ? (
          <>
            <div className="about-table">
              {rows.map(({ label, value, builtWith, link }) => (
                <div className="about-row" key={label}>
                  <span className="about-label">{label}</span>
                  <span className="about-value">
                    {builtWith
                      ? <BuiltWithValue value={value} />
                      : link
                        ? <a href={link} target="_blank" rel="noreferrer" className="about-link">{value}</a>
                        : value}
                  </span>
                </div>
              ))}
            </div>
            {a.description && <p className="about-footer">{a.description}</p>}
          </>
        ) : (
          <div className="flex justify-center" style={{ padding: 24 }}><div className="spinner" /></div>
        )}
      </div>
    </div>
  );
}