import React from 'react';
import { ArrowDownTrayIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { usePwaInstall } from '../../hooks/usePwaInstall';

export default function PwaInstallBanner() {
  const { promptEvent, isInstalled, isDismissed, install, dismiss } = usePwaInstall();

  if (isInstalled || isDismissed || !promptEvent) return null;

  const handleInstall = async () => {
    await install();
  };

  return (
    <div style={{
      position: 'fixed', bottom: 20, right: 20, left: 20, zIndex: 9999,
      maxWidth: 420, margin: '0 auto',
      background: 'var(--surface)',
      border: '1px solid var(--border)',
      borderRadius: 'var(--r)',
      boxShadow: '0 8px 32px rgba(0,0,0,.12)',
      padding: '14px 16px',
      display: 'flex', alignItems: 'center', gap: 12,
      direction: 'rtl',
    }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--primary-soft)', color: 'var(--primary-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <ArrowDownTrayIcon style={{ width: 18, height: 18 }} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', margin: 0 }}>نصب ClinicPro</p>
        <p style={{ fontSize: 12, color: 'var(--text-3)', margin: '2px 0 0' }}>دسترسی سریع‌تر از روی صفحه اصلی</p>
      </div>
      <button
        onClick={handleInstall}
        style={{ height: 34, padding: '0 14px', borderRadius: 'var(--r-sm)', border: 'none', background: 'var(--primary)', color: 'var(--on-primary)', fontSize: 13, fontWeight: 700, cursor: 'pointer', flexShrink: 0 }}>
        نصب
      </button>
      <button
        onClick={dismiss}
        style={{ width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-3)', borderRadius: 6, flexShrink: 0 }}>
        <XMarkIcon style={{ width: 16, height: 16 }} />
      </button>
    </div>
  );
}