import { useState } from 'react';
import { useLocation, useNavigate, Navigate } from 'react-router-dom';
import WhaleProfile from '../components/signals/WhaleProfile';
import CopyConfigModal from '../components/copy/CopyConfigModal';
import { useCopySubscriptions, DEFAULT_CONFIG } from '../hooks/useCopySubscriptions';
import { whaleCodename } from '../utils/whales';
import { useT } from '../i18n/LanguageContext';
import '../redesign/editorial.css';

// Точка расширения под режим лидера: 'public' = смотрит фолловер (видит CTA
// «Копировать»); 'owner' = смотрит сам лидер (увидит дашборд «Меня копируют»).
// Сейчас всегда 'public'; когда включим режим лидера — определять по владению.
type ViewMode = 'public' | 'owner';

export default function WhaleProfilePage() {
  // Address is passed via router state (never in the URL) so whale identity is
  // not exposed/shareable. Direct hits / refresh have no state → back to Leaders.
  const location = useLocation();
  const navState = location.state as { address?: string; mode?: 'copy' | 'fade' } | null;
  const address = navState?.address;
  const boardMode = navState?.mode;
  const navigate = useNavigate();
  const viewMode: ViewMode = 'public';
  const { subs, upsert } = useCopySubscriptions();
  const [showModal, setShowModal] = useState(false);
  const { t, lang } = useT();

  if (!address) {
    return <Navigate to="/" replace />;
  }

  const existing = subs.find(s => s.address.toLowerCase() === address.toLowerCase());
  const label = whaleCodename(address, lang);
  // Подписан на фейд → аватарка с черепом (визуально отличает фейд от копи).
  const isFade = existing?.config?.direction === 'fade';

  return (
    <div className={`wpp-page pk-profile${isFade ? ' pk-fade' : ''}`}>
      <div className="wpp-back" onClick={() => navigate(-1)}>
        {t('mkt.back')}
      </div>
      <WhaleProfile address={address} />

      {/* Sticky action bar */}
      <div className="wpp-cta-bar">
        {viewMode === 'public' ? (
          <button className="wpp-cta" onClick={() => setShowModal(true)}>
            {existing ? t('wpp.editCopy') : t('wpp.copyLeader')}
          </button>
        ) : (
          // owner-режим (заглушка под будущий дашборд лидера)
          <button className="wpp-cta wpp-cta-owner" disabled>
            {t('wpp.copiedSoon')}
          </button>
        )}
      </div>

      {showModal && (
        <CopyConfigModal
          leaderLabel={label}
          initial={existing?.config ?? (boardMode === 'fade' ? { ...DEFAULT_CONFIG, direction: 'fade' } : undefined)}
          editing={!!existing}
          onSave={(config) => {
            upsert(address, label, config);
            setShowModal(false);
            navigate('/copy');
          }}
          onClose={() => setShowModal(false)}
        />
      )}
    </div>
  );
}