'use client';
import {useEffect,useState} from 'react';
import {ArrowLeft,BellRing,ChevronDown,ChevronLeft,Code2,CreditCard,Eye,Gift,Headphones,Inbox,LockKeyhole,LogOut,Menu,Moon,Pencil,Settings2,ShieldCheck,Smartphone,Sun,UserRound,Wallet} from 'lucide-react';
import {Brand} from './brand';
import {CustomerProfilePanels} from './customer-profile-panels';
import {dashboardLabel} from '@/lib/dashboard-copy';
import {verificationPresentation} from '@/lib/identity-presentation';
import {profileInitial} from '@/lib/profile-photo';
import {MEMBER_PREVIEW_CHANNEL} from '@/lib/member-preview-origin';
import {acceptMemberPreviewMessage,memberPreviewExpired,type MemberPreviewData} from '@/lib/member-profile-preview';

const menu=[['profile',UserRound],['banks',CreditCard],['security',ShieldCheck],['settings',Settings2],['alerts',BellRing],['referrals',Gift],['api',Code2],['notifications',Inbox]] as const;
function PreviewAvatar({name,image,className=''}:{name:string;image:string|null;className?:string}){
 return <span data-slot="avatar" className={`user-avatar member-preview-avatar ${className}`} aria-label={name}>{image?<img src={image} alt={name}/>:<span data-slot="avatar-fallback">{profileInitial(name)||<UserRound size={20}/>}</span>}</span>;
}

/** Presentation only: never mounts the member's authenticated session or mutation hooks. */
export function MemberProfilePreview({adminOrigin}:{adminOrigin:string|null}){
 const [view,setView]=useState<{data:MemberPreviewData;avatar:string|null}|null>(null),[message,setMessage]=useState('در حال دریافت نمای پروفایل از مدیریت…'),[now,setNow]=useState(0);
 useEffect(()=>{
  if(!adminOrigin||window.parent===window){setMessage('این نما را از دکمهٔ «نمایش پروفایل از دید کاربر» در پروندهٔ مدیریت باز کنید.');return;}
  const frameId=crypto.randomUUID();let sequence=0,boundUserId:string|null=null,receivedAt=0;
  const ready=()=>window.parent.postMessage({channel:MEMBER_PREVIEW_CHANNEL,type:'ready',frameId},adminOrigin);
  const clear=(text:string)=>{receivedAt=0;setView(null);setMessage(text)};
  const receive=(event:MessageEvent)=>{
   if(event.origin!==adminOrigin||event.source!==window.parent)return;
   const accepted=acceptMemberPreviewMessage(event.data,frameId,sequence,boundUserId);if(!accepted)return;
   sequence=accepted.sequence;
   if(accepted.type==='clear'){clear(accepted.message);return;}
   if(document.visibilityState==='hidden')return;
   boundUserId=accepted.payload.user.id;receivedAt=Date.now();setNow(receivedAt);setMessage('');
   setView({data:accepted.payload,avatar:accepted.avatar});
  };
  const visibility=()=>{if(document.visibilityState==='hidden')clear('برای دریافت نمای تازه، صفحهٔ مدیریت را فعال کنید.');else ready()};
  window.addEventListener('message',receive);document.addEventListener('visibilitychange',visibility);ready();
  const timer=window.setInterval(()=>{const time=Date.now();setNow(time);if(memberPreviewExpired(receivedAt,time))clear('ارتباط با مدیریت قطع شد. برای مشاهدهٔ اطلاعات تازه، از بالای صفحه تازه‌سازی کنید.');if(!receivedAt)ready()},1000);
  return()=>{window.removeEventListener('message',receive);document.removeEventListener('visibilitychange',visibility);window.clearInterval(timer)};
 },[adminOrigin]);
 useEffect(()=>{
  if(!view)return;
  const {theme,locale,reduced_motion}=view.data.preferences,html=document.documentElement;
  html.dataset.theme=theme;html.classList.toggle('dark',theme==='dark');html.style.colorScheme=theme;html.lang=locale;html.dir=locale==='en'?'ltr':'rtl';html.dataset.memberPreview='';html.dataset.reducedMotion=String(reduced_motion);
 },[view?.data.preferences.theme,view?.data.preferences.locale,view?.data.preferences.reduced_motion]);
 if(!view)return <main className="member-preview-empty" dir="rtl"><Eye size={32}/><h1>نمای پروفایل کاربر</h1><p role="status">{message}</p></main>;
 const {data,avatar}=view,{account,user,preferences,identity}=data,locale=preferences.locale,t=(key:string)=>dashboardLabel(key,locale);
 const name=[account.first_name,account.last_name].filter(Boolean).join(' ')||user.name||user.username||t('personal');
 const verification=verificationPresentation({...account,status:account.verification_status,level:account.account_level},locale,now);
 const request=identity.request;
 const status=request?verificationPresentation({...request,status:request.status,level:request.verification_level||account.account_level},locale,now):verification;
 const verifiedDate=request?.verified_at||request?.final_decided_at;
 const since=verifiedDate&&Number.isFinite(Date.parse(verifiedDate))?new Intl.DateTimeFormat(locale,{dateStyle:'medium'}).format(new Date(verifiedDate)):'';
 const photo=<span className="profile-photo-editor"><span className="profile-photo-control"><PreviewAvatar name={name} image={avatar} className="dash-profile-avatar"/><button type="button" className="profile-photo-edit" disabled aria-label="ویرایش عکس پروفایل"><Pencil size={16}/></button></span><span className="profile-photo-feedback">JPG، PNG یا WebP • حداکثر ۲ مگابایت</span></span>;
 return <div className="member-profile-preview" dir={locale==='en'?'ltr':'rtl'}>
  <header className="site-nav island detail-nav dashboard-nav"><span aria-label="پلانک"><Brand compact/></span><nav aria-label="منوی اصلی"><span>بازار<ChevronDown size={13}/></span><span>معامله<ChevronDown size={13}/></span><span>توکنایزیشن</span><span>مستندات</span><span>درباره ما</span></nav><div className="nav-actions"><button className="theme-toggle" disabled aria-label="پوستهٔ فعلی کاربر">{preferences.theme==='dark'?<Sun size={20}/>:<Moon size={20}/>}</button><span className="customer-auth-slot"><button className="account-avatar-button" disabled aria-label="حساب کاربری"><PreviewAvatar name={name} image={avatar}/></button><button className="theme-toggle" disabled aria-label="کیف پول"><Wallet size={20}/></button><button className="theme-toggle" disabled aria-label="اعلان‌ها"><BellRing size={20}/></button></span><button className="app-button app-icon-only" disabled aria-label="اپلیکیشن"><Smartphone size={18}/></button><button className="mobile-menu" disabled aria-label="منو"><Menu size={22}/></button></div></header>
  <main id="dashboard" className="customer-dashboard"><div className="dash-breadcrumb"><span>پلانک</span><ChevronLeft size={13}/><span>{t('account')}</span><ChevronLeft size={13}/><span>{t('profile')}</span></div>
   <div className="dashboard-layout member-preview-layout"><aside data-slot="sidebar" className="dashboard-sidebar"><div data-slot="sidebar-header"><div className="dash-sidebar-user"><PreviewAvatar name={name} image={avatar}/><div><strong>{name}</strong><small>{t('personal')}</small></div></div><div className="dash-area-switch"><a aria-current="page" aria-disabled="true">{t('account')}</a><a aria-disabled="true">{t('wallet')}</a></div></div><div data-slot="sidebar-content"><nav aria-label={t('account')}><ul data-slot="sidebar-menu">{menu.map(([key,Icon])=><li data-slot="sidebar-menu-item" key={key}><button data-slot="sidebar-menu-button" data-active={key==='profile'} disabled><Icon/><span>{t(key)}</span></button></li>)}</ul></nav></div><div data-slot="sidebar-footer"><button disabled><Headphones size={18}/>{t('support')}</button><button disabled><ArrowLeft size={18}/>{t('market')}</button><button disabled><LogOut size={18}/>{t('logout')}</button></div></aside>
    <div className="dashboard-main"><header className="dash-page-heading"><div><span className="dash-eyebrow">PLANCK / ACCOUNT</span><h1><UserRound/>{t('profile')}</h1></div><span className="dash-personal-label"><LockKeyhole size={14}/>{t('personal')}</span></header>
     <section className={`identity-entry ${status.permanent?'is-verified':status.temporary?'is-temporary':''}`} aria-label="احراز هویت حساب"><span className="identity-emblem"><ShieldCheck size={25}/></span><div><strong>{request?status.label:'احراز هویت حساب شما'}</strong><p>{status.temporary?[status.expiresText,status.detail].filter(Boolean).join(' · '):status.permanent?`سطح ${status.levelLabel}${since?' · '+since:''}`:'مشخصات و مدارک خود را برای بررسی و تکمیل احراز اولیه ثبت کنید.'}</p></div><button className="dash-primary" disabled>{status.temporary?'مشاهده جزئیات احراز موقت':status.permanent?'مشاهده مشخصات تأییدشده':request&&request.status!=='draft'?'پیگیری احراز هویت':'احراز هویت'}<ArrowLeft size={16}/></button></section>
     <CustomerProfilePanels access={data.access} user={{...user,username:user.username||undefined}} account={account} locale={locale} verification={verification} hasBankOwnership={data.hasBankOwnership} avatar={photo} readOnly/>
    </div>
   </div>
  </main>
 </div>;
}