import React, { Suspense, lazy, useMemo, useState } from 'react';

class ViewErrorBoundary extends React.Component {
  state = { failed: false };
  static getDerivedStateFromError() { return { failed: true }; }
  render() {
    if (this.state.failed) return <div role="alert" className="p-4 border border-red-200 rounded-xl bg-red-50 text-red-900">
      <p>Bu ekran yüklenemedi. Bağlantınızı kontrol edip yeniden deneyebilirsiniz.</p>
      <button type="button" onClick={this.props.retry} className="mt-3 px-4 py-2 rounded-lg border border-red-300">Yeniden dene</button>
    </div>;
    return this.props.children;
  }
}

/** Retry only this view; keep the application and saved work mounted. */
export function DeferredView({ load }) {
  const [attempt, setAttempt] = useState(0);
  const View = useMemo(() => lazy(load), [load, attempt]);
  return <ViewErrorBoundary key={attempt} retry={() => setAttempt(n => n + 1)}>
    <Suspense fallback={<p role="status" className="p-4 text-slate-600">Ekran yükleniyor…</p>}><View /></Suspense>
  </ViewErrorBoundary>;
}