import React from 'react';
import { CloudUpload, ShieldCheck, Smartphone, Mic, X } from 'lucide-react';

export const SyncAuthPromptModal = ({ isOpen, onClose, onLoginClick }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/75 backdrop-blur-md animate-fade-in">
      <div className="relative w-full max-w-md bg-[#0B0C10] border border-white/15 rounded-3xl p-6 sm:p-8 shadow-2xl text-white space-y-6">
        {/* Close Button */}
        <div className="flex justify-end">
          <button
            onClick={onClose}
            className="p-1 rounded-full text-slate-400 hover:text-white hover:bg-white/10 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Header Icon */}
        <div className="text-center space-y-3">
          <div className="w-16 h-16 rounded-full bg-white/5 border border-white/10 flex items-center justify-center mx-auto">
            <CloudUpload className="w-8 h-8 text-white" />
          </div>
          <div className="space-y-1">
            <h2 className="text-lg font-bold">同步录音需要登录</h2>
            <p className="text-xs text-slate-400 leading-relaxed">
              请先注册或登录星痕现场记录账号<br />数据才能安全同步至云端备份。
            </p>
          </div>
        </div>

        {/* Feature List */}
        <div className="p-4 rounded-2xl bg-white/[0.04] border border-white/10 space-y-3 text-xs text-slate-300">
          <div className="flex items-center space-x-3">
            <ShieldCheck className="w-4 h-4 text-white" />
            <span>HTTPS 安全传输与账号隔离</span>
          </div>
          <div className="flex items-center space-x-3">
            <Smartphone className="w-4 h-4 text-white" />
            <span>账号下的记录增量同步</span>
          </div>
          <div className="flex items-center space-x-3">
            <Mic className="w-4 h-4 text-white" />
            <span>专属录音设备绑定与管理</span>
          </div>
        </div>

        {/* Actions */}
        <div className="space-y-2 pt-2">
          <button
            onClick={() => {
              onClose();
              onLoginClick();
            }}
            className="w-full py-3 rounded-xl bg-white text-slate-950 font-semibold text-xs shadow-lg hover:bg-slate-100 transition-all"
          >
            立即注册 / 登录
          </button>
          <button
            onClick={onClose}
            className="w-full py-2 text-xs text-slate-400 hover:text-white transition-colors text-center block"
          >
            暂不同步
          </button>
        </div>
      </div>
    </div>
  );
};