'use client';

import {useRef,useState,type CSSProperties} from 'react';
import Link from 'next/link';
import Image from 'next/image';
import {ArrowLeft,ArrowRight,ArrowUpLeft,Check,CheckCheck,ChevronLeft,Copy,ExternalLink,Eye,LayoutGrid,Link2,PackageOpen,Palette,Plus,Search,ShoppingBag,Sparkles,Store,X} from 'lucide-react';
import {SiteFrame,useSite} from './site-shell';
import {TokenIcon,Change24h} from './token-market';
import {useWallexMarkets} from './use-wallex-markets';
import {assetHref,assetPriceText,filterMarketAssets,isWallexAsset,mergeMarketAssets,type MarketAsset} from '@/lib/market-assets';
import {localized,n,categoryNames,type Catalog,type Locale} from '@/lib/catalog';
import {projectCoverImage} from '@/lib/project-cover';
import {buildStorefrontPath,parseStorefrontConfig,resolveStorefrontAssets,storefrontThemes,type StorefrontConfig,type StorefrontTheme} from '@/lib/storefront';

const palettes:Record<StorefrontTheme,{accent:string;secondary:string;fa:string;en:string;ar:string}>={mint:{accent:'#84dac5',secondary:'#68aebb',fa:'نعنایی',en:'Mint',ar:'نعناعي'},violet:{accent:'#b3a5ed',secondary:'#858bc9',fa:'بنفش',en:'Violet',ar:'بنفسجي'},amber:{accent:'#ebc08f',secondary:'#c39491',fa:'کهربایی',en:'Amber',ar:'كهرماني'}};
const themeStyle=(theme:StorefrontTheme)=>({'--sf-accent':palettes[theme].accent,'--sf-secondary':palettes[theme].secondary} as CSSProperties);
const label=(locale:Locale,fa:string,en:string,ar:string)=>localized({fa,en,ar},locale);
const sample=(asset:MarketAsset,catalog:Catalog)=>!isWallexAsset(asset)&&(asset.is_demo||catalog.mode==='preview');
const price=(asset:MarketAsset,locale:Locale)=>!isWallexAsset(asset)&&(!Number.isFinite(asset.unit_price_rial)||asset.unit_price_rial<=0)?'—':assetPriceText(asset,locale);

export function StorefrontPage({catalog,config,mode}:{catalog:Catalog;config:StorefrontConfig|null;mode:'create'|'public'}) {
 return <SiteFrame content={catalog.content} mode={catalog.mode} dashboard detail><StorefrontBody catalog={catalog} config={config} mode={mode}/></SiteFrame>;
}

function StorefrontBody({catalog,config,mode}:{catalog:Catalog;config:StorefrontConfig|null;mode:'create'|'public'}) {
 const {locale}=useSite();
 const feed=useWallexMarkets();
 const assets=mergeMarketAssets(catalog.projects.filter(project=>project.status==='published'),feed.quotes);
 const say=(fa:string,en:string,ar:string)=>label(locale,fa,en,ar);
 return <main id="dashboard" className={`sf-page sf-mode-${mode}`} style={themeStyle(config?.theme||'mint')} dir={locale==='en'?'ltr':'rtl'}>
  <Link className="sf-back" href={mode==='create'?'/#build-your-market':'/market'}>{locale==='en'?<ArrowLeft size={17}/>:<ArrowRight size={17}/>} {mode==='create'?say('بازگشت به صفحهٔ اصلی','Back to home','العودة إلى الرئيسية'):say('همهٔ دارایی‌های پلانک','All Planck assets','جميع أصول بلانك')}</Link>
  {mode==='create'?<StorefrontEditor catalog={catalog} initial={config} assets={assets} locale={locale}/>:config?<PublicStorefront catalog={catalog} config={config} assets={assets} locale={locale}/>:<section className="sf-invalid"><div className="sf-invalid-icon"><PackageOpen size={36}/></div><h1>{say('لینک ویترین کامل نیست','This storefront link is incomplete','رابط الواجهة غير مكتمل')}</h1><p>{say('این لینک اطلاعات معتبرِ نام و دارایی‌های ویترین را ندارد. لینک کامل را باز کنید یا ویترین تازه‌ای بسازید.','This link does not contain a valid storefront name and asset selection. Open the complete link or create a new storefront.','لا يحتوي الرابط على اسم صالح واختيار أصول. افتح الرابط الكامل أو أنشئ واجهة جديدة.')}</p><Link href="/storefront/create" className="sf-primary"><Plus size={18}/>{say('ساخت ویترین من','Create my storefront','إنشاء واجهتي')}</Link></section>}
 </main>;
}

function StorefrontEditor({catalog,initial,assets,locale}:{catalog:Catalog;initial:StorefrontConfig|null;assets:MarketAsset[];locale:Locale}) {
 const say=(fa:string,en:string,ar:string)=>label(locale,fa,en,ar);
 const [name,setName]=useState(initial?.name||'');
 const [intro,setIntro]=useState(initial?.intro||'');
 const [theme,setTheme]=useState<StorefrontTheme>(initial?.theme||'mint');
 const [ids,setIds]=useState<string[]>(initial?.assets||[]);
 const [query,setQuery]=useState('');
 const [error,setError]=useState('');
 const [errorField,setErrorField]=useState('');
 const [generated,setGenerated]=useState('');
 const [copied,setCopied]=useState<'idle'|'done'|'error'>('idle');
 const nameInput=useRef<HTMLInputElement>(null);
 const introInput=useRef<HTMLTextAreaElement>(null);
 const chooseHeading=useRef<HTMLHeadingElement>(null);
 const shareResult=useRef<HTMLDivElement>(null);
 const resolved=resolveStorefrontAssets(ids,assets);
 const shown=filterMarketAssets(assets,query,'all','featured',locale);
 const invalidate=()=>{setGenerated('');setCopied('idle');setError('');setErrorField('');};
 const toggle=(id:string)=>{invalidate();setIds(current=>current.includes(id)?current.filter(value=>value!==id):current.length<12?[...current,id]:current);};
 const createLink=()=>{
  const parsed=parseStorefrontConfig({name,intro,theme,assets:ids.join(',')});
  if(!parsed.config){
   setErrorField(parsed.error);
   setError(parsed.error==='name'?say('نامی بین ۱ تا ۶۰ نویسه برای ویترین بنویسید.','Enter a storefront name of 1–60 characters.','اكتب اسماً للواجهة من ١ إلى ٦٠ حرفاً.'):parsed.error==='intro'?say('توضیح کوتاه حداکثر ۱۶۰ نویسه و بدون نویسهٔ کنترل باشد.','Keep the introduction within 160 characters without control characters.','اجعل المقدمة في حدود ١٦٠ حرفاً دون محارف التحكم.'):say('بین ۱ تا ۱۲ دارایی برای ویترین انتخاب کنید.','Choose between 1 and 12 assets.','اختر بين أصل واحد و١٢ أصلاً.'));
   if(parsed.error==='name')nameInput.current?.focus();else if(parsed.error==='intro')introInput.current?.focus();else chooseHeading.current?.focus();
   return;
  }
  if(resolved.missing.length){setErrorField('assets');setError(say('دارایی‌های خارج از دسترس را از انتخاب‌ها حذف کنید و دوباره لینک بسازید.','Remove unavailable assets from the selection before creating a link.','أزل الأصول غير المتاحة من الاختيار قبل إنشاء الرابط.'));chooseHeading.current?.focus();return;}
  const path=buildStorefrontPath(parsed.config);
  if(!path)return;
  setGenerated(new URL(path,window.location.origin).href);setError('');setErrorField('');setCopied('idle');
  requestAnimationFrame(()=>shareResult.current?.focus());
 };
 const copyLink=async()=>{if(!generated)return;try{await navigator.clipboard.writeText(generated);setCopied('done');}catch{setCopied('error');}};
 return <div className="sf-editor" style={themeStyle(theme)}>
  <header className="sf-editor-heading"><div><span className="sf-eyebrow">PLANCK / YOUR STOREFRONT</span><h1>{say('بازار خودتون را بسازید','Create your own market','أنشئ سوقك الخاص')}</h1><p>{say('دارایی‌ها را انتخاب کنید، به ویترینتان هویت بدهید و یک لینک برای معرفی آن داشته باشید.','Choose assets, give your storefront an identity and create a link to share it.','اختر الأصول وامنح واجهتك هويتها وأنشئ رابطاً لمشاركتها.')}</p></div><div className="sf-heading-emblem" aria-hidden="true"><Store size={38}/><i><Plus size={16}/></i></div></header>
  <form className="sf-editor-layout" onSubmit={event=>{event.preventDefault();createLink();}}>
   <div className="sf-editor-controls">
    <section className="sf-editor-panel" aria-labelledby="sf-identity-heading"><header><span className="sf-step-number">{n(1,locale)}</span><div><h2 id="sf-identity-heading">{say('هویت ویترین شما','Your storefront identity','هوية واجهتك')}</h2><p>{say('با یک نام و حال‌وهوای دلخواه شروع کنید.','Start with a name and a palette you like.','ابدأ باسم وألوان تفضلها.')}</p></div></header>
     <label className="sf-form-field" htmlFor="sf-name"><span>{say('نام ویترین','Storefront name','اسم الواجهة')}<small>{n(name.length,locale)} / {n(60,locale)}</small></span><input ref={nameInput} id="sf-name" value={name} maxLength={60} onChange={event=>{invalidate();setName(event.target.value);}} placeholder={say('مثلاً: منتخب انرژی و دارایی','e.g. Energy & asset selection','مثلاً: مختارات الطاقة والأصول')} autoComplete="off" aria-invalid={errorField==='name'} aria-describedby={errorField==='name'?'sf-error':undefined}/></label>
     <label className="sf-form-field" htmlFor="sf-intro"><span>{say('توضیح کوتاه','Short introduction','مقدمة قصيرة')}<small>{say('اختیاری','Optional','اختياري')} · {n(intro.length,locale)} / {n(160,locale)}</small></span><textarea ref={introInput} id="sf-intro" value={intro} maxLength={160} rows={3} onChange={event=>{invalidate();setIntro(event.target.value);}} placeholder={say('این ویترین چه دارایی‌هایی را معرفی می‌کند؟','What does this collection feature?','ما الأصول التي تعرضها هذه المجموعة؟')} aria-invalid={errorField==='intro'} aria-describedby={errorField==='intro'?'sf-error':undefined}/></label>
     <fieldset className="sf-palettes"><legend><Palette size={16}/>{say('رنگ ویترین','Storefront palette','ألوان الواجهة')}</legend>{storefrontThemes.map(value=><label key={value} style={themeStyle(value)}><input type="radio" name="sf-theme" value={value} checked={theme===value} onChange={()=>{invalidate();setTheme(value);}}/><span><i/>{palettes[value][locale]}{theme===value&&<Check size={15}/>}</span></label>)}</fieldset>
    </section>
    <section className="sf-editor-panel sf-picker-panel" aria-labelledby="sf-assets-heading"><header><span className="sf-step-number">{n(2,locale)}</span><div><h2 id="sf-assets-heading" tabIndex={-1} ref={chooseHeading}>{say('دارایی‌ها را انتخاب کنید','Choose your assets','اختر الأصول')}</h2><p>{say('از دارایی‌های منتشرشده در بازار پلانک انتخاب کنید.','Choose from assets published in the Planck market.','اختر من الأصول المنشورة في سوق بلانك.')}</p></div><strong className="sf-picked-count">{n(ids.length,locale)} / {n(12,locale)}</strong></header>
     <label className="sf-search"><Search size={18}/><input type="search" value={query} maxLength={100} onChange={event=>setQuery(event.target.value)} placeholder={say('جستجوی نام یا نماد دارایی…','Search asset name or symbol…','ابحث عن اسم الأصل أو رمزه…')} aria-label={say('جستجوی دارایی','Search assets','البحث عن الأصول')}/>{query&&<button type="button" onClick={()=>setQuery('')} aria-label={say('پاک‌کردن جستجو','Clear search','مسح البحث')}><X size={16}/></button>}</label>
     <div className="sf-picker-list">{shown.length?shown.map(asset=>{const checked=ids.includes(asset.id);return <label key={asset.id} className={`sf-pick-asset ${checked?'is-picked':''} ${!checked&&ids.length>=12?'is-disabled':''}`}><input type="checkbox" checked={checked} disabled={!checked&&ids.length>=12} onChange={()=>toggle(asset.id)}/><TokenIcon project={asset}/><span className="sf-pick-identity"><strong>{localized(asset.title,locale)}</strong><span><b dir="ltr">{asset.symbol}</b>{sample(asset,catalog)&&<em>{say('نمونه','Sample','نموذج')}</em>}</span></span><span className="sf-pick-price"><strong>{price(asset,locale)}</strong><small>{say('تومان','TMN','تومان')}</small></span><span className="sf-pick-check" aria-hidden="true">{checked?<Check size={15}/>:<Plus size={15}/>}</span></label>}):<div className="sf-picker-empty"><Search size={23}/><p>{say('دارایی مطابق جستجو پیدا نشد.','No matching assets found.','لم يتم العثور على أصول مطابقة.')}</p></div>}</div>
     {catalog.mode==='unavailable'&&<p className="sf-inline-note">{say('فهرست پروژه‌ها اکنون در دسترس نیست؛ دارایی‌های دیگر بازار را می‌توانید انتخاب کنید.','The project catalog is unavailable right now; other market assets can still be selected.','قائمة المشاريع غير متاحة الآن؛ يمكنك اختيار الأصول الأخرى في السوق.')}</p>}
     {ids.length>=12&&<p className="sf-inline-note">{say('۱۲ دارایی انتخاب شده است. برای افزودن دارایی تازه، یکی را حذف کنید.','12 assets selected. Remove one to add another.','تم اختيار ١٢ أصلاً. أزل أحدها لإضافة غيره.')}</p>}
     {!!ids.length&&<div className="sf-chosen-tags" aria-label={say('دارایی‌های انتخاب‌شده','Selected assets','الأصول المختارة')}>{ids.map(id=>{const asset=assets.find(item=>item.id===id);return <span key={id} className={!asset?'sf-missing-tag':''}>{asset?asset.symbol:say('خارج از دسترس','Unavailable','غير متاح')}<button type="button" onClick={()=>toggle(id)} aria-label={`${say('حذف','Remove','إزالة')} ${asset?localized(asset.title,locale):say('دارایی خارج از دسترس','unavailable asset','الأصل غير المتاح')}`}><X size={13}/></button></span>;})}</div>}
    </section>
    <section className="sf-create-bar"><p><Link2 size={17}/>{say('نام، توضیح و انتخاب‌ها در لینک عمومی ویترین قرار می‌گیرند. تغییرات بعدی، لینک تازه‌ای می‌سازند.','The name, introduction and selection are included in the public link. Later edits create a new link.','يتضمن الرابط العام الاسم والمقدمة والاختيارات. التعديلات اللاحقة تنشئ رابطاً جديداً.')}</p>{error&&<p id="sf-error" className="sf-error" role="alert">{error}</p>}<button type="submit" className="sf-primary"><Link2 size={18}/>{say('ساخت لینک ویترین','Create storefront link','إنشاء رابط الواجهة')}</button></section>
    {generated&&<div className="sf-share-result" ref={shareResult} tabIndex={-1} aria-label={say('لینک ویترین آماده است','Your storefront link is ready','رابط واجهتك جاهز')}><div><CheckCheck size={22}/><h2>{say('ویترین شما آمادهٔ اشتراک است','Your storefront is ready to share','واجهتك جاهزة للمشاركة')}</h2></div><p>{say('این صفحه از روی لینک ساخته می‌شود و فروشگاه ذخیره‌شده در حساب نیست.','This page is defined by its link; it is not a store saved to an account.','تُنشأ هذه الصفحة من الرابط وليست متجراً محفوظاً في حساب.')}</p><label className="sf-link-field"><span>{say('لینک عمومی ویترین','Public storefront link','رابط الواجهة العام')}</span><input readOnly value={generated} dir="ltr" onFocus={event=>event.currentTarget.select()}/></label><div className="sf-share-actions"><button type="button" className="sf-secondary" onClick={()=>void copyLink()}>{copied==='done'?<Check size={17}/>:<Copy size={17}/>} {copied==='done'?say('لینک کپی شد','Link copied','تم نسخ الرابط'):say('کپی لینک','Copy link','نسخ الرابط')}</button><Link className="sf-primary" href={generated}><ExternalLink size={17}/>{say('باز کردن ویترین','Open storefront','فتح الواجهة')}</Link></div><p className={copied==='error'?'sf-error':'sf-copy-feedback'} aria-live="polite">{copied==='error'?say('کپی خودکار انجام نشد؛ لینک بالا را انتخاب و کپی کنید.','Automatic copying failed; select and copy the link above.','تعذر النسخ التلقائي؛ حدد الرابط أعلاه وانسخه.'):copied==='done'?say('لینک کامل برای اشتراک‌گذاری کپی شد.','The complete link was copied for sharing.','تم نسخ الرابط الكامل للمشاركة.'):''}</p></div>}
   </div>
   <aside className="sf-editor-preview" aria-label={say('پیش‌نمایش زندهٔ ویترین','Live storefront preview','معاينة مباشرة للواجهة')}><div className="sf-preview-caption"><span><Eye size={17}/>{say('پیش‌نمایش زنده','Live preview','معاينة مباشرة')}</span><span>{n(resolved.assets.length,locale)} {say('دارایی','assets','أصول')}</span></div><StorefrontMini name={name} intro={intro} assets={resolved.assets} theme={theme} locale={locale} catalog={catalog}/><p className="sf-preview-note"><ShoppingBag size={17}/>{say('جزئیات و گزینه‌های خرید و فروش در صفحهٔ هر دارایی در بازار پلانک قرار دارد.','Details and trading options are on each asset’s page in the Planck market.','تتوفر التفاصيل وخيارات التداول في صفحة كل أصل في سوق بلانك.')}</p></aside>
  </form>
 </div>;
}

function StorefrontMini({name,intro,assets,theme,locale,catalog}:{name:string;intro:string;assets:MarketAsset[];theme:StorefrontTheme;locale:Locale;catalog:Catalog}) {
 const say=(fa:string,en:string,ar:string)=>label(locale,fa,en,ar);
 return <div className="sf-mini" style={themeStyle(theme)}><div className="sf-mini-top"><span><i/><i/><i/></span><b>PLANCK / STOREFRONT</b></div><div className="sf-mini-cover"><Store size={33}/><div className="sf-mini-cover-orbit" aria-hidden="true"/><span>{say('ویترین انتخابی','Curated storefront','واجهة مختارة')}</span><h3>{name.trim()||say('نام ویترین شما','Your storefront name','اسم واجهتك')}</h3><p>{intro.trim()||say('انتخاب‌های شما، در یک قاب.','Your selection, in one place.','اختياراتك في مكان واحد.')}</p></div><div className="sf-mini-assets">{assets.length?assets.slice(0,4).map(asset=><div className="sf-mini-asset" key={asset.id}><TokenIcon project={asset}/><div><strong>{localized(asset.title,locale)}</strong><span dir="ltr">{asset.symbol}{sample(asset,catalog)&&` · ${say('نمونه','Sample','نموذج')}`}</span></div><span>{price(asset,locale)}<small>{say('تومان','TMN','تومان')}</small></span></div>):<div className="sf-mini-empty"><LayoutGrid size={27}/><p>{say('اولین دارایی را انتخاب کنید','Choose your first asset','اختر أول أصل')}</p><span>{say('کارت‌های ویترین اینجا نمایش داده می‌شوند.','Your asset cards will appear here.','ستظهر بطاقات أصولك هنا.')}</span></div>}{assets.length>4&&<p className="sf-mini-more">+ {n(assets.length-4,locale)} {say('دارایی دیگر در ویترین','more assets in the storefront','أصول أخرى في الواجهة')}</p>}</div><div className="sf-mini-footer"><span>PLANCK</span><Link2 size={15}/></div></div>;
}

function PublicStorefront({catalog,config,assets,locale}:{catalog:Catalog;config:StorefrontConfig;assets:MarketAsset[];locale:Locale}) {
 const say=(fa:string,en:string,ar:string)=>label(locale,fa,en,ar);
 const resolved=resolveStorefrontAssets(config.assets,assets);
 const [copied,setCopied]=useState<'idle'|'done'|'error'>('idle');
 const path=buildStorefrontPath(config)!;
 const copyLink=async()=>{try{await navigator.clipboard.writeText(new URL(path,window.location.origin).href);setCopied('done');}catch{setCopied('error');}};
 return <>
  <section className="sf-public-hero"><div className="sf-public-emblem" aria-hidden="true"><Store size={45}/><span><ShoppingBag size={18}/></span></div><div className="sf-public-title"><span className="sf-eyebrow">PLANCK / CURATED STOREFRONT</span><p className="sf-public-kicker">{say('ویترین انتخابی','Curated storefront','واجهة مختارة')}</p><h1>{config.name}</h1>{config.intro&&<p>{config.intro}</p>}<div className="sf-public-stats"><span><LayoutGrid size={16}/>{n(resolved.assets.length,locale)} {say('دارایی قابل مشاهده','available assets','أصول متاحة')}</span><span><Link2 size={16}/>{say('یک مجموعه، یک لینک','One collection, one link','مجموعة واحدة، رابط واحد')}</span></div></div><div className="sf-public-hero-art" aria-hidden="true"><i/><i/><i/></div></section>
  <div className="sf-public-toolbar"><p><ShoppingBag size={18}/>{say('برای بررسی و خرید و فروش، وارد صفحهٔ هر دارایی در بازار پلانک شوید. این ویترین، انتخابی از دارایی‌های عمومی است.','Open each asset’s Planck market page to review its details and trading options. This storefront curates public assets.','افتح صفحة كل أصل في سوق بلانك لمراجعة تفاصيله وخيارات التداول. تعرض هذه الواجهة مختارات من الأصول العامة.')}</p><button type="button" className="sf-secondary" onClick={()=>void copyLink()}>{copied==='done'?<Check size={17}/>:<Copy size={17}/>} {copied==='done'?say('کپی شد','Copied','تم النسخ'):say('اشتراک ویترین','Share storefront','مشاركة الواجهة')}</button></div>
  {copied!=='idle'&&<p className={copied==='error'?'sf-error':'sf-copy-feedback'} aria-live="polite">{copied==='error'?say('کپی خودکار انجام نشد؛ آدرس همین صفحه را از مرورگر کپی کنید.','Automatic copying failed; copy this page’s URL from your browser.','تعذر النسخ التلقائي؛ انسخ عنوان الصفحة من المتصفح.'):say('لینک ویترین کپی شد.','Storefront link copied.','تم نسخ رابط الواجهة.')}</p>}
  {!!resolved.missing.length&&<p className="sf-unavailable-note"><PackageOpen size={19}/>{say(`${n(resolved.missing.length,locale)} دارایی انتخاب‌شده اکنون در فهرست عمومی موجود نیست و نمایش داده نمی‌شود.`,`${resolved.missing.length} selected assets are no longer available in the public catalog and are not shown.`,`${n(resolved.missing.length,locale)} من الأصول المختارة غير متاحة حالياً في القائمة العامة ولا يتم عرضها.`)}</p>}
  <section className="sf-public-assets" aria-labelledby="sf-public-assets-title"><header><h2 id="sf-public-assets-title">{say('دارایی‌های این ویترین','Assets in this storefront','أصول هذه الواجهة')}</h2><span>{say('قیمت‌ها با اطلاعات موجود بازار به‌روز می‌شوند','Prices update with available market data','تتحدث الأسعار حسب بيانات السوق المتاحة')}</span></header>{resolved.assets.length?<div className="sf-public-grid">{resolved.assets.map(asset=><StorefrontAssetCard key={asset.id} asset={asset} locale={locale} catalog={catalog}/>)}</div>:<div className="sf-public-empty"><PackageOpen size={36}/><h3>{say('دارایی قابل نمایش در دسترس نیست','No assets are available to display','لا توجد أصول متاحة للعرض')}</h3><p>{say('این دارایی‌ها ممکن است از انتشار خارج شده باشند یا فهرست بازار موقتاً در دسترس نباشد.','These assets may have been unpublished, or the market catalog may be temporarily unavailable.','قد تكون هذه الأصول قد أزيلت من النشر أو قد تكون قائمة السوق غير متاحة مؤقتاً.')}</p><Link href="/market" className="sf-secondary">{say('مشاهدهٔ بازار پلانک','Explore Planck market','استكشاف سوق بلانك')}<ArrowUpLeft size={17}/></Link></div>}</section>
  <section className="sf-public-footer"><div><Sparkles size={23}/><div><h2>{say('انتخاب‌های شما هم یک ویترین می‌خواهد','Your selection deserves a storefront too','اختياراتك تستحق واجهتها أيضاً')}</h2><p>{say('دارایی‌های مورد علاقه‌تان را در یک صفحه کنار هم قرار دهید.','Bring your favourite assets together on one page.','اجمع أصولك المفضلة في صفحة واحدة.')}</p></div></div><div><Link href={`/storefront/create${path.slice('/storefront'.length)}`} className="sf-secondary">{say('ساخت نسخهٔ خودم از این ویترین','Make my version','إنشاء نسختي من هذه الواجهة')}<ChevronLeft size={16}/></Link><Link href="/storefront/create" className="sf-primary"><Plus size={17}/>{say('ساخت ویترین تازه','Create a new storefront','إنشاء واجهة جديدة')}</Link></div></section>
 </>;
}

function StorefrontAssetCard({asset,locale,catalog}:{asset:MarketAsset;locale:Locale;catalog:Catalog}) {
 const say=(fa:string,en:string,ar:string)=>label(locale,fa,en,ar);
 const isSample=sample(asset,catalog);
 return <article className="sf-asset-card"><Link className="sf-asset-cover" href={assetHref(asset,catalog.mode==='preview')} tabIndex={-1} aria-label={localized(asset.title,locale)}>{asset.image_url?<Image src={projectCoverImage(asset.image_url)} alt="" width={640} height={360} unoptimized/>:<div className="sf-asset-placeholder"><TokenIcon project={asset}/><i/><i/></div>}<span className="sf-asset-category">{localized(categoryNames[asset.category],locale)}</span>{isSample&&<span className="sf-sample-badge">{say('دارایی نمونه','Sample asset','أصل نموذجي')}</span>}</Link><div className="sf-asset-body"><div className="sf-asset-title"><TokenIcon project={asset}/><div><h3><Link href={assetHref(asset,catalog.mode==='preview')}>{localized(asset.title,locale)}</Link></h3><span dir="ltr">{asset.symbol}</span></div></div><div className="sf-asset-price"><div><span>{say('قیمت هر توکن','Price per token','سعر كل توكن')}</span><strong>{price(asset,locale)} <small>{say('تومان','TMN','تومان')}</small></strong></div><Change24h project={asset} locale={locale} compact/></div>{isSample&&<p className="sf-asset-sample-note">{say('اطلاعات این دارایی نمونه و برای نمایش است.','This asset’s information is illustrative.','معلومات هذا الأصل توضيحية.')}</p>}<Link className="sf-asset-action" href={assetHref(asset,catalog.mode==='preview')}><span>{say('جزئیات و خرید و فروش','Details & trading','التفاصيل والتداول')}</span><ArrowUpLeft size={18}/></Link></div></article>;
}