import React, { useState, useEffect } from 'react';
import ViolationForm from './components/ViolationForm';
import Dashboard     from './components/Dashboard';
import ReadmeModal   from './components/ReadmeModal';
import ToastProvider from './components/ToastProvider';

const REPO_URL      = 'https://git.alwisp.com/jason/cpas';
// First commit timestamp — used to drive the dev ticker
const PROJECT_START = new Date('2026-03-06T11:33:32-06:00');

const tabs = [
  { id: 'dashboard', label: '📊 Dashboard' },
  { id: 'violation', label: '+ New Violation' },
];

/* ── helpers ──────────────────────────────────────────────────── */
function elapsed(from) {
  const diff = Math.floor((Date.now() - from.getTime()) / 1000);
  const d = Math.floor(diff / 86400);
  const h = Math.floor((diff % 86400) / 3600);
  const m = Math.floor((diff % 3600) / 60);
  const s = diff % 60;
  return `${d}d ${String(h).padStart(2,'0')}h ${String(m).padStart(2,'0')}m ${String(s).padStart(2,'0')}s`;
}

/* ── sub-components ───────────────────────────────────────────── */
function DevTicker() {
  const [tick, setTick] = useState(() => elapsed(PROJECT_START));
  useEffect(() => {
    const id = setInterval(() => setTick(elapsed(PROJECT_START)), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <span style={sf.ticker} title="Time since first commit">
      <span style={sf.tickerDot} />
      {tick}
    </span>
  );
}

function GiteaIcon() {
  // Simple Gitea-style icon using SVG path
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{ display:'block' }}>
      <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482
               0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.34-3.369-1.34-.454-1.154-1.11-1.462
               -1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529
               2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943
               0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025
               A9.564 9.564 0 0112 6.844a9.59 9.59 0 012.504.337c1.909-1.294 2.747-1.025 2.747-1.025
               .546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687
               -4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578
               .688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
    </svg>
  );
}

function AppFooter() {
  return (
    <footer style={sf.footer}>
      <span style={sf.copy}>© {new Date().getFullYear()} Jason Stedwell</span>
      <span style={sf.sep}>·</span>
      <DevTicker />
      <span style={sf.sep}>·</span>
      <a href={REPO_URL} target="_blank" rel="noopener noreferrer" style={sf.repoLink} title="View source on Gitea">
        <GiteaIcon />
        <span>cpas</span>
      </a>
    </footer>
  );
}

/* ── styles ───────────────────────────────────────────────────── */
const s = {
  app:      { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa', display: 'flex', flexDirection: 'column' },
  nav:      { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
  logoWrap: { display: 'flex', alignItems: 'center', marginRight: '32px', padding: '14px 0' },
  logoImg:  { height: '28px', marginRight: '10px' },
  logoText: { color: '#f8f9fa', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px' },
  tab: (active) => ({
    padding: '18px 22px',
    color: active ? '#f8f9fa' : 'rgba(248,249,250,0.6)',
    borderBottom: active ? '3px solid #d4af37' : '3px solid transparent',
    cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
    background: 'none', border: 'none',
  }),
  docsBtn: {
    marginLeft: 'auto',
    background: 'none',
    border: '1px solid #2a2b3a',
    color: '#9ca0b8',
    borderRadius: '6px',
    padding: '6px 14px',
    fontSize: '12px',
    cursor: 'pointer',
    fontWeight: 600,
    letterSpacing: '0.3px',
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
  },
  main: { flex: 1 },
  card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
};

// Footer-specific styles kept separate for clarity
const sf = {
  footer: {
    background: '#000',
    borderTop: '1px solid #1e1f2e',
    padding: '12px 40px',
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
    fontSize: '12px',
    color: '#4a4d66',
    flexWrap: 'wrap',
  },
  copy:      { color: '#4a4d66', whiteSpace: 'nowrap' },
  sep:       { color: '#2a2b3a', userSelect: 'none' },
  ticker: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    fontFamily: "'Courier New', monospace",
    fontSize: '11px',
    color: '#5a7a5a',
    letterSpacing: '0.5px',
  },
  tickerDot: {
    width: '6px',
    height: '6px',
    borderRadius: '50%',
    background: '#3a6a3a',
    boxShadow: '0 0 4px #3a6a3a',
    flexShrink: 0,
  },
  repoLink: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '5px',
    color: '#4a4d66',
    textDecoration: 'none',
    transition: 'color 0.15s',
  },
};

/* ── main app ─────────────────────────────────────────────────── */
export default function App() {
  const [tab,        setTab]        = useState('dashboard');
  const [showReadme, setShowReadme] = useState(false);

  return (
    <ToastProvider>
      <div style={s.app}>
        <nav style={s.nav}>
          <div style={s.logoWrap}>
            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
            <div style={s.logoText}>CPAS Tracker</div>
          </div>

          {tabs.map(t => (
            <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
              {t.label}
            </button>
          ))}

          <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
            <span>?</span> Docs
          </button>
        </nav>

        <div style={s.main}>
          <div style={s.card}>
            {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
          </div>
        </div>

        <AppFooter />

        {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
      </div>
    </ToastProvider>
  );
}
