import { useState, useEffect, useRef } from 'react';
import { api } from '../utils/api.js';
import { useToast } from '../contexts/ToastContext.jsx';

const DEFAULT_TITLE_COLOR  = '#1a73e8';
const DEFAULT_PUBLIC_COLOR = '#1a73e8';
const DEFAULT_DM_COLOR     = '#a142f4';

const COLOUR_SUGGESTIONS = [
  '#1a73e8', '#a142f4', '#e53935', '#fa7b17', '#fdd835', '#34a853',
];

// A single colour picker card: shows suggestions by default, Custom button opens native picker
function ColourPicker({ label, value, onChange, preview }) {
  const [mode, setMode] = useState('suggestions'); // 'suggestions' | 'custom'
  const inputRef = useRef(null);

  // Auto-close custom mode as soon as a new colour is committed
  const handleCustomChange = (e) => {
    onChange(e.target.value);
    // 'change' fires on close of native picker on most platforms;
    // we also listen to 'input' for live preview but only close on 'change'
  };

  const handleCustomInput = (e) => {
    onChange(e.target.value);
  };

  const handleCustomChangeClose = (e) => {
    onChange(e.target.value);
    setMode('suggestions');
  };

  return (
    <div>
      <div className="settings-section-label">{label}</div>

      {/* Current colour preview */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        {preview
          ? preview(value)
          : <div style={{ width: 36, height: 36, borderRadius: 8, background: value, border: '2px solid var(--border)', flexShrink: 0 }} />
        }
        <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontFamily: 'monospace' }}>{value}</span>
      </div>

      {mode === 'suggestions' && (
        <>
          <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
            {COLOUR_SUGGESTIONS.map(hex => (
              <button
                key={hex}
                onClick={() => onChange(hex)}
                style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: hex, border: hex === value ? '3px solid var(--text-primary)' : '2px solid var(--border)',
                  cursor: 'pointer', flexShrink: 0,
                  boxShadow: hex === value ? '0 0 0 2px var(--surface), 0 0 0 4px var(--text-primary)' : 'none',
                  transition: 'box-shadow 0.15s',
                }}
                title={hex}
              />
            ))}
          </div>
          <button className="btn btn-secondary btn-sm" onClick={() => setMode('custom')}>
            Custom
          </button>
        </>
      )}

      {mode === 'custom' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {/* Colour input rendered as a large clickable swatch — works on mobile and desktop */}
          <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
            <span style={{
              display: 'inline-block', width: 56, height: 44,
              borderRadius: 8, background: value,
              border: '2px solid var(--border)',
              boxShadow: '0 1px 4px rgba(0,0,0,0.15)',
              flexShrink: 0,
            }} />
            <input
              ref={inputRef}
              type="color"
              value={value}
              onInput={handleCustomInput}
              onChange={handleCustomChangeClose}
              style={{ position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }}
            />
            <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontFamily: 'monospace' }}>{value}</span>
          </label>
          <div>
            <button className="btn btn-secondary btn-sm" onClick={() => setMode('suggestions')}>
              Back
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

export default function BrandingModal({ onClose }) {
  const toast = useToast();
  const [tab, setTab] = useState('general'); // 'general' | 'colours'
  const [settings, setSettings] = useState({});
  const [appName, setAppName] = useState('');
  const [loading, setLoading] = useState(false);
  const [resetting, setResetting] = useState(false);
  const [showResetConfirm, setShowResetConfirm] = useState(false);

  const [colourTitle, setColourTitle]   = useState(DEFAULT_TITLE_COLOR);
  const [colourPublic, setColourPublic] = useState(DEFAULT_PUBLIC_COLOR);
  const [colourDm, setColourDm]         = useState(DEFAULT_DM_COLOR);
  const [savingColours, setSavingColours] = useState(false);

  useEffect(() => {
    api.getSettings().then(({ settings }) => {
      setSettings(settings);
      setAppName(settings.app_name || 'jama');
      setColourTitle(settings.color_title || DEFAULT_TITLE_COLOR);
      setColourPublic(settings.color_avatar_public || DEFAULT_PUBLIC_COLOR);
      setColourDm(settings.color_avatar_dm || DEFAULT_DM_COLOR);
    }).catch(() => {});
  }, []);

  const notifySidebarRefresh = () => window.dispatchEvent(new Event('jama:settings-changed'));

  const handleSaveName = async () => {
    if (!appName.trim()) return;
    setLoading(true);
    try {
      await api.updateAppName(appName.trim());
      setSettings(prev => ({ ...prev, app_name: appName.trim() }));
      toast('App name updated', 'success');
      notifySidebarRefresh();
    } catch (e) {
      toast(e.message, 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleLogoUpload = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 1024 * 1024) return toast('Logo must be less than 1MB', 'error');
    try {
      const { logoUrl } = await api.uploadLogo(file);
      setSettings(prev => ({ ...prev, logo_url: logoUrl }));
      toast('Logo updated', 'success');
      notifySidebarRefresh();
    } catch (e) {
      toast(e.message, 'error');
    }
  };

  const handleSaveColours = async () => {
    setSavingColours(true);
    try {
      await api.updateColors({
        colorTitle: colourTitle,
        colorAvatarPublic: colourPublic,
        colorAvatarDm: colourDm,
      });
      setSettings(prev => ({
        ...prev,
        color_title: colourTitle,
        color_avatar_public: colourPublic,
        color_avatar_dm: colourDm,
      }));
      toast('Colours updated', 'success');
      notifySidebarRefresh();
    } catch (e) {
      toast(e.message, 'error');
    } finally {
      setSavingColours(false);
    }
  };

  const handleReset = async () => {
    setResetting(true);
    try {
      await api.resetSettings();
      const { settings: fresh } = await api.getSettings();
      setSettings(fresh);
      setAppName(fresh.app_name || 'jama');
      setColourTitle(DEFAULT_TITLE_COLOR);
      setColourPublic(DEFAULT_PUBLIC_COLOR);
      setColourDm(DEFAULT_DM_COLOR);
      toast('Settings reset to defaults', 'success');
      notifySidebarRefresh();
      setShowResetConfirm(false);
    } catch (e) {
      toast(e.message, 'error');
    } finally {
      setResetting(false);
    }
  };

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal" style={{ maxWidth: 460 }}>
        <div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
          <h2 className="modal-title" style={{ margin: 0 }}>Branding</h2>
          <button className="btn-icon" 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>

        {/* Tabs */}
        <div className="flex gap-2" style={{ marginBottom: 24 }}>
          <button className={`btn btn-sm ${tab === 'general' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('general')}>General</button>
          <button className={`btn btn-sm ${tab === 'colours' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('colours')}>Colours</button>
        </div>

        {tab === 'general' && (
          <>
            {/* App Logo */}
            <div style={{ marginBottom: 24 }}>
              <div className="settings-section-label">App Logo</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{
                  width: 72, height: 72, borderRadius: 16, background: 'var(--background)',
                  border: '1px solid var(--border)', overflow: 'hidden', display: 'flex',
                  alignItems: 'center', justifyContent: 'center', flexShrink: 0
                }}>
                  <img src={settings.logo_url || '/icons/jama.png'} alt="logo" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
                </div>
                <div>
                  <label className="btn btn-secondary btn-sm" style={{ cursor: 'pointer', display: 'inline-block' }}>
                    Upload Logo
                    <input type="file" accept="image/*" style={{ display: 'none' }} onChange={handleLogoUpload} />
                  </label>
                  <p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 6 }}>
                    Square format, max 1MB. Used in sidebar, login page and browser tab.
                  </p>
                </div>
              </div>
            </div>

            {/* App Name */}
            <div style={{ marginBottom: 24 }}>
              <div className="settings-section-label">App Name</div>
              <div style={{ display: 'flex', gap: 8 }}>
                <input className="input flex-1" value={appName} onChange={e => setAppName(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleSaveName()} />
                <button className="btn btn-primary btn-sm" onClick={handleSaveName} disabled={loading}>{loading ? '...' : 'Save'}</button>
              </div>
            </div>

            {/* Reset */}
            <div style={{ marginBottom: settings.pw_reset_active === 'true' ? 16 : 0 }}>
              <div className="settings-section-label">Reset</div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                {!showResetConfirm ? (
                  <button className="btn btn-secondary btn-sm" onClick={() => setShowResetConfirm(true)}>Reset All to Defaults</button>
                ) : (
                  <div style={{ background: '#fce8e6', border: '1px solid #f5c6c2', borderRadius: 'var(--radius)', padding: '12px 14px' }}>
                    <p style={{ fontSize: 13, color: 'var(--error)', marginBottom: 12 }}>
                      This will reset the app name, logo and all colours to their install defaults. This cannot be undone.
                    </p>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-sm" style={{ background: 'var(--error)', color: 'white' }} onClick={handleReset} disabled={resetting}>
                        {resetting ? 'Resetting...' : 'Yes, Reset Everything'}
                      </button>
                      <button className="btn btn-secondary btn-sm" onClick={() => setShowResetConfirm(false)}>Cancel</button>
                    </div>
                  </div>
                )}
                {settings.app_version && (
                  <span style={{ fontSize: 11, color: 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>v{settings.app_version}</span>
                )}
              </div>
            </div>

            {settings.pw_reset_active === 'true' && (
              <div className="warning-banner">
                <span>⚠️</span>
                <span><strong>ADMPW_RESET is active.</strong> The default admin password is being reset on every restart. Set ADMPW_RESET=false in your environment variables to stop this.</span>
              </div>
            )}
          </>
        )}

        {tab === 'colours' && (
          <div className="flex-col gap-3">
            <ColourPicker
              label="App Title Colour"
              value={colourTitle}
              onChange={setColourTitle}
            />

            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
              <ColourPicker
                label="Public Message Avatar Colour"
                value={colourPublic}
                onChange={setColourPublic}
                preview={(val) => (
                  <div style={{
                    width: 36, height: 36, borderRadius: '50%', background: val,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'white', fontWeight: 700, fontSize: 15, flexShrink: 0,
                  }}>A</div>
                )}
              />
            </div>

            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
              <ColourPicker
                label="Direct Message Avatar Colour"
                value={colourDm}
                onChange={setColourDm}
                preview={(val) => (
                  <div style={{
                    width: 36, height: 36, borderRadius: '50%', background: val,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'white', fontWeight: 700, fontSize: 15, flexShrink: 0,
                  }}>B</div>
                )}
              />
            </div>

            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
              <button className="btn btn-primary" onClick={handleSaveColours} disabled={savingColours}>
                {savingColours ? 'Saving...' : 'Save Colours'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}