// AboutPage — version info, platform, build links. Reads app.version
// via the preload IPC bridge.

import React, { useEffect, useState } from 'react';
import { PageLayout } from './PageLayout';
import { Card, Label, Hint } from './NodePage';

export function AboutPage(): React.ReactElement {
  const [version,  setVersion]  = useState('dev');
  const [platform, setPlatform] = useState('');

  useEffect(() => {
    window.dchain?.app.version().then(setVersion).catch(() => {});
    window.dchain?.app.platform().then(setPlatform).catch(() => {});
  }, []);

  return (
    <PageLayout title="About">
      <Card>
        <Label>Build</Label>
        <div style={{ color: '#fff', fontSize: 14, fontFamily: 'monospace' }}>
          DChain Desktop v{version}
        </div>
        <Hint>
          Running on {platform || 'unknown'} · Electron / Chromium
        </Hint>
      </Card>

      <Card>
        <Label>Links</Label>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <LinkRow
            href="https://git.vsecoder.vodka/vsecoder/dchain"
            label="Source code (Gitea)"
          />
          <LinkRow
            href="https://git.vsecoder.vodka/vsecoder/dchain/releases"
            label="Releases"
          />
          <LinkRow
            href="https://git.vsecoder.vodka/vsecoder/dchain/src/branch/main/docs"
            label="Documentation"
          />
        </div>
      </Card>
    </PageLayout>
  );
}

function LinkRow({ href, label }: { href: string; label: string }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noreferrer"
      style={{ color: '#1d9bf0', fontSize: 13, textDecoration: 'none' }}
    >{label} ↗</a>
  );
}