// Welcome — shown when no key is loaded.
//
// Three options, matching mobile parity:
//   * Create — generate a new Ed25519 + X25519 keypair.
//   * Import — load node.json file (dialog).
//   * Pair   — pair with an existing phone/desktop (QR-less, 6-digit code
//              + device key, symmetrical with mobile's /auth/pair flow).
//
// v2.2.0-alpha4 wires the first two functionally and stubs Pair with a
// button that routes to a placeholder — the pairing poll loop shared
// with mobile comes in alpha5.

import React, { useState } from 'react';
import { useStore } from '@/lib/store';
import { saveKeyFile } from '@/lib/storage';
import { generateKeyFile } from '@/lib/crypto';
import type { KeyFile } from '@/lib/types';
import { Pair } from './Pair';

export function Welcome(): React.ReactElement {
  const setKeyFile = useStore(s => s.setKeyFile);
  const [busy, setBusy] = useState(false);
  const [err,  setErr]  = useState<string | null>(null);
  const [screen, setScreen] = useState<'welcome' | 'pair'>('welcome');

  if (screen === 'pair') return <Pair onBack={() => setScreen('welcome')} />;

  const onCreate = async () => {
    setBusy(true); setErr(null);
    try {
      const kf = generateKeyFile();
      await saveKeyFile(kf);
      setKeyFile(kf);
    } catch (e) {
      setErr(String(e));
    } finally {
      setBusy(false);
    }
  };

  const onImport = async () => {
    setBusy(true); setErr(null);
    try {
      const file = await window.dchain.dialog.openFile({
        title: 'Select node.json',
        filters: [{ name: 'JSON', extensions: ['json'] }],
        properties: ['openFile'],
      });
      if (!file) return;
      const contents = await window.dchain.fs.readText(file);
      const parsed = JSON.parse(contents) as KeyFile;
      if (!parsed.pub_key || !parsed.priv_key) {
        throw new Error('file doesn\'t look like a key file');
      }
      await saveKeyFile(parsed);
      setKeyFile(parsed);
    } catch (e) {
      setErr(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(false);
    }
  };

  const onPair = () => {
    setErr(null);
    setScreen('pair');
  };

  return (
    <div style={{
      height: '100%', display: 'flex',
      alignItems: 'center', justifyContent: 'center',
      padding: 40, background: '#000', color: '#fff',
    }}>
      <div style={{ maxWidth: 400, width: '100%', textAlign: 'center' }}>
        <div style={{
          width: 80, height: 80, borderRadius: 22,
          background: '#1d9bf0', margin: '0 auto',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 36, fontWeight: 800,
        }}>
          D
        </div>
        <h1 style={{ fontSize: 30, fontWeight: 800, letterSpacing: -0.5, margin: '16px 0 6px' }}>
          DChain
        </h1>
        <p style={{ color: '#8b8b8b', fontSize: 14, margin: 0, lineHeight: 1.5 }}>
          Decentralised messenger + social feed. Your keys stay on this device.
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 32 }}>
          <PrimaryBtn label="Create account" onClick={onCreate} disabled={busy} />
          <SecondaryBtn label="Import key file"        onClick={onImport} disabled={busy} />
          <SecondaryBtn label="Pair with another device" onClick={onPair}  disabled={busy} />
        </div>

        {err && (
          <div style={{
            marginTop: 20, padding: 10, borderRadius: 10,
            background: '#2a1414', color: '#ff9b9b', fontSize: 12,
            textAlign: 'left',
          }}>
            {err}
          </div>
        )}
      </div>
    </div>
  );
}

function PrimaryBtn({ label, onClick, disabled }: {
  label: string; onClick: () => void; disabled?: boolean;
}) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        height: 46, borderRadius: 999, border: 'none',
        background: '#1d9bf0', color: '#fff', fontSize: 14, fontWeight: 700,
        cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.6 : 1,
      }}
    >{label}</button>
  );
}

function SecondaryBtn({ label, onClick, disabled }: {
  label: string; onClick: () => void; disabled?: boolean;
}) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        height: 46, borderRadius: 999,
        background: '#0a0a0a', color: '#fff', fontSize: 14, fontWeight: 700,
        border: '1px solid #1f1f1f',
        cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.6 : 1,
      }}
    >{label}</button>
  );
}