import { useEffect, useRef, useState, Component } from 'react';
import {
  LayoutDashboard,
  Sparkles,
  Building2,
  Award,
  Layers,
  Target,
  Images,
  Package,
  FileText,
  Link2,
  Settings,
  LogOut,
  ExternalLink,
  Save,
  Menu,
  X,
  CheckCircle2,
  AlertCircle,
  Clock,
} from 'lucide-react';
import { adminApi, getToken, setToken, clearToken } from './api';
import { Field, ImageUpload, ArrayEditor } from './components/FormFields';
import { SectionPreview } from './components/SectionPreview';
import { pickSectionData } from './contentHelpers';
import defaultContent from '../../server/seed/default-content.json';

const NAV_GROUPS = [
  {
    label: 'Overview',
    items: [
      { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, desc: 'Overview and quick access to all sections' },
    ],
  },
  {
    label: 'Page Content',
    items: [
      { id: 'hero', label: 'Hero & Metrics', icon: Sparkles, desc: 'Homepage headline, video, and statistics' },
      { id: 'about', label: 'About & Partners', icon: Building2, desc: 'About section and partner logos' },
      { id: 'certifications', label: 'Certifications', icon: Award, desc: 'Certification badges and headings' },
      { id: 'services', label: 'Services', icon: Layers, desc: 'Service cards and section copy' },
      { id: 'whyUs', label: 'Why Us', icon: Target, desc: 'Value propositions and images' },
      { id: 'gallery', label: 'Gallery', icon: Images, desc: 'Featured case studies and gallery items' },
      { id: 'products', label: 'Products', icon: Package, desc: 'Product suite cards and stats' },
      { id: 'insights', label: 'Insights', icon: FileText, desc: 'Blog and insight carousel items' },
      { id: 'footer', label: 'Footer & Links', icon: Link2, desc: 'CTA, social links, and footer navigation' },
    ],
  },
  {
    label: 'Account',
    items: [
      { id: 'settings', label: 'Settings', icon: Settings, desc: 'Password and account preferences' },
    ],
  },
];

const ALL_SECTIONS = NAV_GROUPS.flatMap((g) => g.items);

const SECTION_DESCRIPTIONS = Object.fromEntries(ALL_SECTIONS.map((s) => [s.id, s.desc]));

function Toast({ message, type }) {
  if (!message) return null;
  return (
    <div className={`toast ${type}`}>
      {type === 'success' ? <CheckCircle2 size={18} /> : <AlertCircle size={18} />}
      {message}
    </div>
  );
}

function LoginPreview() {
  const viewportRef = useRef(null);
  const [scale, setScale] = useState(0.5);
  const previewWidth = 1280;
  const previewHeight = 800;

  useEffect(() => {
    const el = viewportRef.current;
    if (!el) return;

    const updateScale = () => {
      const nextScale = el.clientWidth / previewWidth;
      setScale(nextScale);
    };

    updateScale();
    const observer = new ResizeObserver(updateScale);
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <div className="login-preview">
      <div className="login-preview-intro">
        <img src="/assets/cavin_logo.svg" alt="Cavin Infotech" />
        <div>
          <h1>Content <span>Manager</span></h1>
          <p>Preview the live website before you sign in. Edits publish instantly after login.</p>
        </div>
        <a href="/" target="_blank" rel="noopener noreferrer" className="login-preview-link">
          <ExternalLink size={14} />
          Open full site
        </a>
      </div>

      <div className="login-preview-shell">
        <div className="login-preview-chrome">
          <span className="login-preview-dot" />
          <span className="login-preview-dot" />
          <span className="login-preview-dot" />
          <span className="login-preview-url">cavininfotech.com</span>
        </div>
        <div
          className="login-preview-viewport"
          ref={viewportRef}
          style={{ height: previewHeight * scale }}
        >
          <div
            className="login-preview-stage"
            style={{ width: previewWidth * scale, height: previewHeight * scale }}
          >
            <iframe
              src="/"
              title="Website preview"
              className="login-preview-iframe"
              style={{
                width: previewWidth,
                height: previewHeight,
                transform: `scale(${scale})`,
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

function Login({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const { token } = await adminApi.login(username, password);
      setToken(token);
      onLogin();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-page">
      <LoginPreview />
      <div className="login-form-side">
        <form className="login-card" onSubmit={handleSubmit}>
          <h2>Welcome back</h2>
          <p className="login-subtitle">Sign in to your admin account</p>
          {error && <div className="login-error"><AlertCircle size={16} />{error}</div>}
          <Field label="Username" value={username} onChange={setUsername} />
          <Field label="Password" value={password} onChange={setPassword} type="password" />
          <button type="submit" className="btn-primary" disabled={loading}>
            {loading ? 'Signing in...' : 'Sign in'}
          </button>
        </form>
      </div>
    </div>
  );
}

function EditorPlaceholder({ loading, error }) {
  return (
    <div className="admin-editor-placeholder">
      {loading ? (
        <>
          <div className="admin-spinner" />
          <p>Loading section content...</p>
        </>
      ) : (
        <>
          <AlertCircle size={22} />
          <p>{error || 'Unable to load this section.'}</p>
        </>
      )}
    </div>
  );
}

class AdminErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  static getDerivedStateFromError(error) {
    return { error };
  }

  render() {
    if (this.state.error) {
      return (
        <div className="admin-card admin-editor-placeholder">
          <AlertCircle size={22} />
          <p>Something went wrong loading this section.</p>
          <p style={{ fontSize: '0.8rem', color: '#94a3b8' }}>{this.state.error.message}</p>
          <button type="button" className="btn-secondary" onClick={() => this.setState({ error: null })}>
            Try again
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

function SectionEditor({ section, data, onChange }) {
  if (!data) return <EditorPlaceholder loading={false} error="No content found for this section." />;

  switch (section) {
    case 'hero':
      return (
        <>
          <ImageUpload label="Hero Video" value={data.hero?.video} onChange={(v) => onChange({ ...data, hero: { ...data.hero, video: v } })} />
          <Field label="Badge Text" value={data.hero?.badge} onChange={(v) => onChange({ ...data, hero: { ...data.hero, badge: v } })} />
          <Field label="Headline" value={data.hero?.headline} onChange={(v) => onChange({ ...data, hero: { ...data.hero, headline: v } })} />
          <Field label="Subheadline" value={data.hero?.subheadline} onChange={(v) => onChange({ ...data, hero: { ...data.hero, subheadline: v } })} />
          <ArrayEditor label="Metrics" items={data.metrics || []} onChange={(metrics) => onChange({ ...data, metrics })} fields={[{ key: 'value', label: 'Value' }, { key: 'label', label: 'Label' }]} />
        </>
      );
    case 'about':
      return (
        <>
          <Field label="About Heading" value={data.about?.heading} onChange={(v) => onChange({ about: { ...data.about, heading: v }, partners: data.partners })} />
          <ImageUpload label="Badge Image" value={data.about?.badgeImage} onChange={(v) => onChange({ about: { ...data.about, badgeImage: v }, partners: data.partners })} />
          <Field label="Badge Alt Text" value={data.about?.badgeAlt} onChange={(v) => onChange({ about: { ...data.about, badgeAlt: v }, partners: data.partners })} />
          <ImageUpload label="Background Image" value={data.about?.backgroundImage} onChange={(v) => onChange({ about: { ...data.about, backgroundImage: v }, partners: data.partners })} />
          <Field label="Partners Heading" value={data.partners?.heading} onChange={(v) => onChange({ about: data.about, partners: { ...data.partners, heading: v } })} />
          <Field label="Partners Subheading" value={data.partners?.subheading} onChange={(v) => onChange({ about: data.about, partners: { ...data.partners, subheading: v } })} />
          <Field label="Partners Body" value={data.partners?.body} onChange={(v) => onChange({ about: data.about, partners: { ...data.partners, body: v } })} multiline />
          <ArrayEditor label="Partner Logos" items={data.partners?.logos || []} onChange={(logos) => onChange({ about: data.about, partners: { ...data.partners, logos } })} fields={[{ key: 'name', label: 'Name' }, { key: 'image', label: 'Logo', type: 'image' }]} />
        </>
      );
    case 'certifications':
      return (
        <>
          <Field label="Section Heading" value={data.heading} onChange={(v) => onChange({ ...data, heading: v })} />
          <ArrayEditor label="Certifications" items={data.items || []} onChange={(items) => onChange({ ...data, items })} fields={[{ key: 'image', label: 'Image', type: 'image' }, { key: 'alt', label: 'Alt Text' }]} />
        </>
      );
    case 'services':
      return (
        <>
          <Field label="Eyebrow" value={data.eyebrow} onChange={(v) => onChange({ ...data, eyebrow: v })} />
          <Field label="Title" value={data.title} onChange={(v) => onChange({ ...data, title: v })} />
          <Field label="Intro" value={data.intro} onChange={(v) => onChange({ ...data, intro: v })} multiline />
          <ArrayEditor label="Service Cards" items={data.items || []} onChange={(items) => onChange({ ...data, items })} fields={[
            { key: 'number', label: 'Number' }, { key: 'title', label: 'Title' }, { key: 'boldStatement', label: 'Bold Statement' },
            { key: 'description', label: 'Description', multiline: true }, { key: 'cta', label: 'CTA Text' },
          ]} />
        </>
      );
    case 'whyUs':
      return (
        <>
          <Field label="Eyebrow" value={data.eyebrow} onChange={(v) => onChange({ ...data, eyebrow: v })} />
          <Field label="Title" value={data.title} onChange={(v) => onChange({ ...data, title: v })} />
          <ArrayEditor label="Value Cards" items={data.cards || []} onChange={(cards) => onChange({ ...data, cards })} fields={[{ key: 'title', label: 'Title' }, { key: 'description', label: 'Description', multiline: true }]} />
          <ArrayEditor label="Images" items={data.images || []} onChange={(images) => onChange({ ...data, images })} fields={[{ key: 'src', label: 'Image', type: 'image' }, { key: 'alt', label: 'Alt Text' }]} />
        </>
      );
    case 'gallery':
      return (
        <>
          <Field label="Eyebrow" value={data.eyebrow} onChange={(v) => onChange({ ...data, eyebrow: v })} />
          <Field label="Title" value={data.title} onChange={(v) => onChange({ ...data, title: v })} />
          <Field label="Subtitle" value={data.subtitle} onChange={(v) => onChange({ ...data, subtitle: v })} multiline />
          <ArrayEditor label="Gallery Items" items={data.items || []} onChange={(items) => onChange({ ...data, items })} fields={[
            { key: 'title', label: 'Title' }, { key: 'category', label: 'Category' },
            { key: 'excerpt', label: 'Excerpt', multiline: true }, { key: 'image', label: 'Image', type: 'image' }, { key: 'readTime', label: 'Read Time' },
          ]} />
        </>
      );
    case 'products':
      return (
        <>
          <Field label="Eyebrow" value={data.eyebrow} onChange={(v) => onChange({ ...data, eyebrow: v })} />
          <Field label="Title" value={data.title} onChange={(v) => onChange({ ...data, title: v })} />
          <Field label="Subtitle" value={data.subtitle} onChange={(v) => onChange({ ...data, subtitle: v })} multiline />
          <ArrayEditor label="Products" items={data.items || []} onChange={(items) => onChange({ ...data, items })} fields={[
            { key: 'name', label: 'Name' }, { key: 'description', label: 'Description', multiline: true }, { key: 'image', label: 'Dashboard Image', type: 'image' },
          ]} />
        </>
      );
    case 'insights':
      return (
        <>
          <Field label="Title" value={data.title} onChange={(v) => onChange({ ...data, title: v })} />
          <Field label="Subtitle" value={data.subtitle} onChange={(v) => onChange({ ...data, subtitle: v })} multiline />
          <ArrayEditor label="Insight Cards" items={data.items || []} onChange={(items) => onChange({ ...data, items })} fields={[
            { key: 'category', label: 'Category' }, { key: 'title', label: 'Title' }, { key: 'date', label: 'Date' },
            { key: 'excerpt', label: 'Excerpt', multiline: true }, { key: 'image', label: 'Image', type: 'image' },
          ]} />
        </>
      );
    case 'footer':
      return (
        <>
          <Field label="CTA Headline" value={data.cta?.headline} onChange={(v) => onChange({ ...data, cta: { ...data.cta, headline: v } })} />
          <Field label="CTA Body" value={data.cta?.body} onChange={(v) => onChange({ ...data, cta: { ...data.cta, body: v } })} multiline />
          <ImageUpload label="CTA Image" value={data.cta?.image} onChange={(v) => onChange({ ...data, cta: { ...data.cta, image: v } })} />
          <Field label="Primary Button" value={data.cta?.primaryButton} onChange={(v) => onChange({ ...data, cta: { ...data.cta, primaryButton: v } })} />
          <Field label="Secondary Button" value={data.cta?.secondaryButton} onChange={(v) => onChange({ ...data, cta: { ...data.cta, secondaryButton: v } })} />
          <ArrayEditor label="Quick Links" items={data.quickLinks || []} onChange={(quickLinks) => onChange({ ...data, quickLinks })} fields={[{ key: 'label', label: 'Label' }, { key: 'href', label: 'Link' }]} />
          <ArrayEditor label="Product Links" items={data.productLinks || []} onChange={(productLinks) => onChange({ ...data, productLinks })} fields={[{ key: 'label', label: 'Label' }, { key: 'href', label: 'Link' }]} />
          <ArrayEditor label="Social Links" items={data.social || []} onChange={(social) => onChange({ ...data, social })} fields={[{ key: 'platform', label: 'Platform' }, { key: 'url', label: 'URL' }]} />
          <ArrayEditor label="Legal Links" items={data.legal || []} onChange={(legal) => onChange({ ...data, legal })} fields={[{ key: 'label', label: 'Label' }, { key: 'href', label: 'Link' }]} />
        </>
      );
    default:
      return null;
  }
}

function SettingsPage() {
  const [current, setCurrent] = useState('');
  const [next, setNext] = useState('');
  const [msg, setMsg] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await adminApi.changePassword(current, next);
      setMsg('Password updated successfully');
      setCurrent('');
      setNext('');
    } catch (err) {
      setMsg(err.message);
    }
  };

  return (
    <div className="admin-card settings-card">
      <h1>Settings</h1>
      <p className="subtitle">Update your admin password. Use at least 6 characters.</p>
      <form onSubmit={handleSubmit}>
        <Field label="Current Password" value={current} onChange={setCurrent} type="password" />
        <Field label="New Password" value={next} onChange={setNext} type="password" />
        {msg && <p className={msg.includes('success') ? 'msg-success' : 'msg-error'}>{msg}</p>}
        <button type="submit" className="btn-primary" style={{ marginTop: '0.5rem' }}>
          Update Password
        </button>
      </form>
    </div>
  );
}

function formatDate(iso) {
  if (!iso) return '—';
  return new Date(iso).toLocaleString('en-IN', {
    day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
  });
}

export default function App() {
  const [authed, setAuthed] = useState(false);
  const [checking, setChecking] = useState(true);
  const [activeSection, setActiveSection] = useState('dashboard');
  const [content, setContent] = useState(null);
  const [contentLoading, setContentLoading] = useState(false);
  const [contentError, setContentError] = useState('');
  const [sectionData, setSectionData] = useState(null);
  const [saving, setSaving] = useState(false);
  const [toast, setToast] = useState({ message: '', type: '' });
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [lastUpdated, setLastUpdated] = useState(null);

  const showToast = (message, type) => {
    setToast({ message, type });
    setTimeout(() => setToast({ message: '', type: '' }), 3500);
  };

  const goToSection = (id) => {
    setActiveSection(id);
    setSidebarOpen(false);

    if (id === 'dashboard' || id === 'settings') {
      setSectionData(null);
      return;
    }

    if (!content) return;
    setSectionData(pickSectionData(content, id));
  };

  useEffect(() => {
    const onResize = () => {
      if (window.innerWidth > 900) setSidebarOpen(false);
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  useEffect(() => {
    const token = getToken();
    if (!token) { setChecking(false); return; }
    adminApi.me().then(() => { setAuthed(true); setChecking(false); }).catch(() => { clearToken(); setChecking(false); });
  }, []);

  useEffect(() => {
    if (!authed) return;

    const prefetch = document.createElement('link');
    prefetch.rel = 'prefetch';
    prefetch.href = '/preview.html';
    document.head.appendChild(prefetch);

    setContentLoading(true);
    setContentError('');

    adminApi.getContent()
      .then((data) => {
        const { _updatedAt, ...rest } = data;
        setContent(rest);
        setLastUpdated(_updatedAt);
      })
      .catch((err) => {
        console.warn('Admin content API failed, using seed fallback:', err.message);
        setContent(defaultContent);
        setContentError('Could not reach the API. Showing default content — start the server with npm run dev.');
      })
      .finally(() => setContentLoading(false));
  }, [authed]);

  useEffect(() => {
    if (!content || activeSection === 'dashboard' || activeSection === 'settings') return;
    setSectionData(pickSectionData(content, activeSection));
  }, [content, activeSection]);

  const handleSave = async () => {
    setSaving(true);
    try {
      if (activeSection === 'hero') {
        await adminApi.updateSection('hero', sectionData.hero);
        await adminApi.updateSection('metrics', sectionData.metrics);
      } else if (activeSection === 'about') {
        await adminApi.updateSection('about', sectionData.about);
        await adminApi.updateSection('partners', sectionData.partners);
      } else {
        await adminApi.updateSection(activeSection, sectionData);
      }
      const updated = await adminApi.getContent();
      const { _updatedAt, ...rest } = updated;
      setContent(rest);
      setLastUpdated(_updatedAt);
      showToast('Changes saved successfully', 'success');
    } catch (err) {
      showToast(err.message, 'error');
    } finally {
      setSaving(false);
    }
  };

  if (checking) {
    return (
      <div className="admin-loading">
        <div className="admin-spinner" />
        <span>Loading admin panel...</span>
      </div>
    );
  }

  if (!authed) return <Login onLogin={() => setAuthed(true)} />;

  const sectionInfo = ALL_SECTIONS.find((s) => s.id === activeSection);
  const isEditor = activeSection !== 'dashboard' && activeSection !== 'settings';

  return (
    <div className="admin-layout">
      <button
        type="button"
        className="admin-mobile-toggle"
        aria-label="Toggle menu"
        onClick={() => setSidebarOpen((o) => !o)}
      >
        {sidebarOpen ? <X size={20} /> : <Menu size={20} />}
      </button>

      <div
        className={`admin-sidebar-overlay ${sidebarOpen ? 'visible' : ''}`}
        onClick={() => setSidebarOpen(false)}
      />

      <aside className={`admin-sidebar ${sidebarOpen ? 'open' : ''}`}>
        <div className="admin-sidebar-brand">
          <img src="/assets/cavin_logo.svg" alt="Cavin Infotech" />
          <h2>Content Manager</h2>
          <p>Cavin Infotech Website</p>
        </div>

        <nav className="admin-nav">
          {NAV_GROUPS.map((group) => (
            <div key={group.label} className="admin-nav-group">
              <div className="admin-nav-group-label">{group.label}</div>
              {group.items.map(({ id, label, icon: Icon }) => (
                <button
                  key={id}
                  type="button"
                  className={activeSection === id ? 'active' : ''}
                  onClick={() => goToSection(id)}
                >
                  <Icon size={17} />
                  {label}
                </button>
              ))}
            </div>
          ))}
        </nav>

        <div className="admin-sidebar-footer">
          <button type="button" className="logout-btn" onClick={() => { clearToken(); setAuthed(false); }}>
            <LogOut size={15} />
            Sign out
          </button>
        </div>
      </aside>

      <div className="admin-main-wrap">
        <header className="admin-topbar">
          <div>
            <h1 className="admin-topbar-title">{sectionInfo?.label || 'Admin'}</h1>
            <p className="admin-topbar-sub">{SECTION_DESCRIPTIONS[activeSection]}</p>
          </div>
          <div className="admin-topbar-actions">
            <a href="/" target="_blank" rel="noopener noreferrer" className="btn-ghost">
              <ExternalLink size={14} />
              View site
            </a>
            {isEditor && (
              <button type="button" className="btn-primary" onClick={handleSave} disabled={saving}>
                <Save size={15} />
                {saving ? 'Saving...' : 'Save changes'}
              </button>
            )}
          </div>
        </header>

        <main className="admin-main">
          {activeSection === 'dashboard' ? (
            <>
              <div className="dashboard-welcome">
                <h2>Welcome to your CMS</h2>
                <p>Edit any section below. All changes are saved to the database and appear on the live website immediately.</p>
                <div className="dashboard-meta">
                  <span className="dashboard-meta-item">
                    <Clock size={13} />
                    Last updated: {formatDate(lastUpdated)}
                  </span>
                </div>
              </div>
              <div className="dashboard-grid">
                {ALL_SECTIONS.filter((s) => s.id !== 'dashboard').map(({ id, label, icon: Icon, desc }) => (
                  <button key={id} type="button" className="dashboard-tile" onClick={() => goToSection(id)}>
                    <div className="dashboard-tile-icon">
                      <Icon size={20} />
                    </div>
                    <h3>{label}</h3>
                    <p>{desc}</p>
                  </button>
                ))}
              </div>
            </>
          ) : activeSection === 'settings' ? (
            <SettingsPage />
          ) : (
            <AdminErrorBoundary>
            <div className="admin-editor-layout">
              <div className="admin-editor-form admin-card">
                {contentLoading || !sectionData ? (
                  <EditorPlaceholder loading={contentLoading} error={contentError} />
                ) : (
                  <SectionEditor
                    key={activeSection}
                    section={activeSection}
                    data={sectionData}
                    onChange={setSectionData}
                  />
                )}
                <div className="save-bar">
                  <button type="button" className="btn-secondary" onClick={() => goToSection('dashboard')}>
                    Cancel
                  </button>
                  <button type="button" className="btn-primary" onClick={handleSave} disabled={saving || !sectionData}>
                    <Save size={15} />
                    {saving ? 'Saving...' : 'Save changes'}
                  </button>
                </div>
              </div>
              {!contentLoading && content && sectionData && (
                <SectionPreview
                  section={activeSection}
                  label={sectionInfo?.label || 'Section'}
                  content={content}
                  sectionData={sectionData}
                />
              )}
            </div>
            </AdminErrorBoundary>
          )}
        </main>
      </div>

      <Toast {...toast} />
    </div>
  );
}
