'use client';

import {useEffect,useState} from 'react';
import {DirectionProvider} from '@base-ui/react/direction-provider';
import {ArrowUpLeft,ArrowUpRight,BookOpen,Check,ChevronLeft,ChevronRight,Layers3,MessagesSquare,Sparkles,X} from 'lucide-react';
import {Tabs,TabsList,TabsTrigger,TabsContent} from './ui/tabs';
import {Dialog,DialogContent,DialogTitle,DialogDescription,DialogClose} from './ui/dialog';
import {useSite} from './site-shell';
import {n} from '@/lib/catalog';
import {TokenizationStepIcon} from './tokenization-step-icon';
import {TokenizationStageScene} from './tokenization-stage-scene';

export function AssetTokenization({reducedMotion=false}:{reducedMotion?:boolean}){
 const {locale,open,openAssistant}=useSite();
 const [stage,setStage]=useState(0),[guide,setGuide]=useState(false),[compact,setCompact]=useState(false);
 useEffect(()=>{const media=window.matchMedia('(max-width:680px)');const update=()=>setCompact(media.matches);update();media.addEventListener('change',update);return()=>media.removeEventListener('change',update)},[]);
 const say=(fa:string,en:string,ar:string)=>locale==='en'?en:locale==='ar'?ar:fa;
 const steps=[
  {
   title:say('انتخاب دارایی','Choose your asset','اختيار الأصل'),
   short:say('ملک، پروژه یا دارایی نامشهود','Property, projects or intangible assets','عقار أو مشروع أو أصل غير ملموس'),
   titleLong:say('اول، دارایی‌تان را انتخاب کنید.','First, choose your asset.','أولاً، اختر أصلك.'),
   description:say('دارایی یا پروژه‌ای را که می‌خواهید توکنایز کنید انتخاب می‌کنید؛ سپس نوع دارایی، مشخصات اولیه و هدف خود از عرضه را معرفی می‌کنید.','Choose the asset or project you want to tokenize, then introduce its type, key details and your goal for the offering.','اختر الأصل أو المشروع الذي تريد ترميزه، ثم حدّد نوعه وتفاصيله الأولية وهدفك من الطرح.'),
   tags:[say('املاک و تجهیزات','Property & equipment','عقارات ومعدات'),say('پروژه و کسب‌وکار','Projects & businesses','مشاريع وأعمال'),say('دارایی نامشهود','Intangible assets','أصول غير ملموسة')],
  },
  {
   title:say('ارزیابی و تأیید','Review & approval','التقييم والاعتماد'),
   short:say('مالکیت، ارزش‌گذاری و استعلام‌ها','Ownership, valuation and due diligence','الملكية والتقييم والاستعلامات'),
   titleLong:say('ارزش روشن، پشتوانهٔ حقوقی معتبر.','Clear value. Verified legal foundations.','قيمة واضحة وأساس قانوني موثّق.'),
   description:say('مالکیت و وضعیت حقوقی دارایی بررسی و ارزیابی مالی انجام می‌شود؛ استعلام‌های مرتبط و تأییدیه‌های لازم نیز پیش از ادامهٔ مسیر دریافت می‌شوند.','Ownership and legal status are reviewed alongside financial valuation. Relevant due diligence and required approvals are completed before moving forward.','تُراجع الملكية والوضع القانوني ويُجرى التقييم المالي، مع استكمال الاستعلامات والموافقات اللازمة قبل الانتقال للمرحلة التالية.'),
   tags:[say('بررسی حقوقی و مالکیت','Legal & ownership review','مراجعة قانونية وملكية'),say('ارزیابی مالی','Financial valuation','تقييم مالي'),say('استعلام و تأییدیه','Checks & approvals','استعلامات وموافقات')],
  },
  {
   title:say('طراحی توکنومیکس','Design tokenomics','تصميم اقتصاد الرمز'),
   short:say('تعداد، نوع توکن و شبکهٔ عرضه','Supply, token type and network','العدد والنوع وشبكة الطرح'),
   titleLong:say('توکنومیکس، متناسب با دارایی شما.','Tokenomics, built around your asset.','اقتصاد رمز مصمّم لأصلك.'),
   description:say('میزان دارایی قابل توکنایز، تعداد و نوع توکن، شبکهٔ عرضه و شیوهٔ توزیع مشخص می‌شود؛ حقوق دارندگان و قواعد اقتصادی توکن نیز در همین مرحله طراحی می‌شوند.','Define how much of the asset to tokenize, token supply and type, the issuing network and distribution. Holder rights and the token’s economic rules are designed at this stage.','تُحدّد حصة الأصل المراد ترميزها وعدد الرموز ونوعها وشبكة الطرح والتوزيع، مع تصميم حقوق الحامِلين والقواعد الاقتصادية للرمز.'),
   tags:[say('میزان و تعداد توکن','Amount & supply','الحصة وعدد الرموز'),say('نوع و شبکهٔ توکن','Token type & network','نوع الرمز وشبكته'),say('مدل اقتصادی و توزیع','Economics & distribution','النموذج الاقتصادي والتوزيع')],
  },
  {
   title:say('عرضه در بازار','Go to market','الطرح في الأسواق'),
   short:say('بازار پلانک و دیگر بازارهای سازگار','Planck and other compatible markets','بلانك والأسواق المتوافقة الأخرى'),
   titleLong:say('از پلانک، به بازارهای بیشتر.','From Planck to more markets.','من بلانك إلى أسواق أوسع.'),
   description:say('توکن دارایی شما برای عرضه در مارکت‌پلیس و بازار پلانک آماده می‌شود؛ می‌توانید آن را با رعایت شرایط پذیرش و سازگاری شبکه، به بازارهای دیگر هم ببرید.','Prepare your asset token for the Planck marketplace and market. You can also take it to other markets that meet admission requirements and support its network.','يُجهّز رمز أصلك للطرح في سوق بلانك، ويمكن نقله إلى أسواق أخرى وفق شروط القبول وتوافق الشبكة.'),
   tags:[say('مارکت‌پلیس پلانک','Planck marketplace','سوق بلانك'),say('بازار معاملات','Trading market','سوق التداول'),say('سایر بازارها','Other markets','أسواق أخرى')],
  },
  {
   title:say('پنل مدیریت دارایی','Manage your asset','لوحة إدارة الأصل'),
   short:say('خرید و فروش، استیک و خدمات مالی','Trading, staking and financial services','التداول والتخزين والخدمات المالية'),
   titleLong:say('تمام مسیر دارایی، در یک پنل.','Your asset journey, in one dashboard.','رحلة أصلك بالكامل في لوحة واحدة.'),
   description:say('از پنل مدیریت دارایی، خرید و فروش، استیک، وام و خدمات فعال برای دارایی‌تان را دنبال می‌کنید؛ موجودی، گزارش‌ها، منافع و درخواست‌ها در یک نمای یکپارچه در دسترس شما قرار می‌گیرند.','Use the asset dashboard to access trading, staking, loans and services enabled for your asset. Balances, reports, benefits and requests come together in one view.','تابع التداول والتخزين والقروض والخدمات المفعّلة لأصلك من لوحة الإدارة، مع الأرصدة والتقارير والمنافع والطلبات في مكان واحد.'),
   tags:[say('خرید و فروش','Buy & sell','شراء وبيع'),say('استیک و وام','Staking & loans','التخزين والقروض'),say('گزارش و مدیریت','Reports & management','تقارير وإدارة')],
  },
 ];
 const DirectionArrow=locale==='en'?ArrowUpRight:ArrowUpLeft;
 const StepArrow=locale==='en'?ChevronRight:ChevronLeft;
 return <section id="asset-tokenization" className="asset-tokenization" aria-labelledby="tz-title" data-reduced-motion={reducedMotion||undefined}>
  <header className="tz-heading"><div className="tz-eyebrow"><span>{n(3,locale).padStart(2,locale==='fa'?'۰':locale==='ar'?'٠':'0')}</span><Sparkles size={14}/>{say('برای صاحبان دارایی و پروژه','FOR ASSET & PROJECT OWNERS','لأصحاب الأصول والمشاريع')}</div><div className="tz-heading-row"><h2 id="tz-title">{say('دارایی از شما،','Your asset.','أصلك أنت،')}<br/><span>{say('فرصت‌های تازه با پلانک.','New possibilities with Planck.','وفرص جديدة مع بلانك.')}</span></h2><p>{say('دارایی یا پروژه‌ای دارید؟ با پلانک، حقوق مشخص آن را به توکن تبدیل کنید و برای عرضه در این مارکت‌پلیس یا بازارهای سازگار آماده شوید.','Own an asset or a project? Use Planck to turn defined rights into tokens and prepare to offer them here or on compatible markets.','هل تملك أصلاً أو مشروعاً؟ حوّل حقوقه المحددة إلى رموز مع بلانك واستعد لطرحها هنا أو في الأسواق المتوافقة.')}</p></div></header>
  <div className="tz-experience">
   <DirectionProvider direction={locale==='en'?'ltr':'rtl'}><Tabs className="tz-process" data-stage={stage} orientation={compact?'horizontal':'vertical'} value={stage} onValueChange={value=>setStage(Number(value))}>
    <div className="tz-path"><div className="tz-path-label"><span>{say('از دارایی تا بازار','FROM ASSET TO MARKET','من الأصل إلى السوق')}</span><span>{n(5,locale)} {say('گام روشن','clear steps','خطوات واضحة')}</span></div><TabsList activateOnFocus className="tz-step-list" aria-label={say('مراحل توکنایزیشن دارایی','Asset tokenization stages','مراحل ترميز الأصول')}>{steps.map((step,i)=><TabsTrigger key={i} value={i} className="tz-step" data-stage={i}><span className="tz-step-number">{n(i+1,locale).padStart(2,locale==='fa'?'۰':locale==='ar'?'٠':'0')}</span><span className="tz-step-icon"><TokenizationStepIcon stage={i}/></span><span className="tz-step-copy"><strong>{step.title}</strong><small>{step.short}</small></span><StepArrow className="tz-step-arrow" size={17}/></TabsTrigger>)}</TabsList></div>
    <div className="tz-stage"><div className="tz-stage-top"><span><span/>{say('توکنایزیشن دارایی','ASSET TOKENIZATION','ترميز الأصول')}</span><span className="tz-stage-index">{n(stage+1,locale)} / {n(5,locale)}</span></div><div className="tz-stage-visual" key={stage}><TokenizationStageScene stage={stage}/></div>{steps.map((step,i)=><TabsContent key={i} value={i} className="tz-stage-detail"><h3>{step.titleLong}</h3><p>{step.description}</p><div className="tz-tags">{step.tags.map(tag=><span key={tag}><Check size={12}/>{tag}</span>)}</div></TabsContent>)}<div className="tz-stage-progress" aria-hidden="true">{steps.map((_,i)=><span key={i} data-current={i===stage||undefined}/>)}</div></div>
   </Tabs></DirectionProvider>
   <div className="tz-bottom"><div className="tz-bottom-copy"><span className="tz-bottom-icon"><Layers3 size={21}/></span><div><strong>{say('ارزش دارایی‌تان را به فرصت تبدیل کنید.','Turn asset value into opportunity.','حوّل قيمة أصلك إلى فرصة.')}</strong><p>{say('مسیر مناسب دارایی خود را از همین‌جا پیدا کنید.','Find the right path for your asset.','ابحث هنا عن المسار المناسب لأصلك.')}</p></div></div><div className="tz-actions"><button type="button" className="tz-start" onClick={()=>open('tokenize')}>{say('شروع توکنایز کردن دارایی','Start tokenizing your asset','ابدأ ترميز أصلك')}<DirectionArrow size={18}/></button><button type="button" className="tz-consult" onClick={()=>openAssistant(say('برای توکنایزیشن دارایی‌ام از کجا شروع کنم؟','Where should I start with asset tokenization?','من أين أبدأ ترميز أصلي؟'))}><MessagesSquare size={17}/>{say('دریافت مشاوره','Get guidance','الحصول على استشارة')}</button><button type="button" className="tz-guide" onClick={()=>setGuide(true)}><BookOpen size={16}/>{say('راهنما','Guide','الدليل')}</button></div></div>
  </div>
  <div className="tz-section-note"><span>{say('مشاورهٔ اولیه با دستیار پلانک','Initial guidance with the Planck assistant','إرشاد أولي مع مساعد بلانك')}</span><p>{say('عرضه تابع پذیرش بازار است؛ دسترسی به استیک، وام و سایر خدمات به نوع دارایی و شرایط هر خدمت بستگی دارد.','Offering depends on market admission. Staking, loans and other services depend on the asset and each service’s terms.','يخضع الطرح لقبول السوق؛ ويتوقف التخزين والقروض والخدمات الأخرى على الأصل وشروط كل خدمة.')}</p></div>
  <Dialog open={guide} onOpenChange={setGuide}><DialogContent className="tz-guide-dialog" showCloseButton={false} dir={locale==='en'?'ltr':'rtl'} data-reduced-motion={reducedMotion||undefined}><DialogClose className="tz-guide-close" aria-label={say('بستن راهنما','Close guide','إغلاق الدليل')}><X size={20}/></DialogClose><div className="tz-guide-symbol"><BookOpen size={27}/></div><DialogTitle>{say('پیش از توکنایز کردن دارایی','Before tokenizing your asset','قبل ترميز أصلك')}</DialogTitle><DialogDescription>{say('توکن، نمایندهٔ حقوق مشخص نسبت به دارایی است. نوع مالکیت، سهم منافع و شرایط انتقال باید برای هر پروژه روشن باشد.','A token represents defined asset rights. Ownership, benefits and transfer terms need to be clear for each project.','يمثل الرمز حقوقاً محددة في أصل. يجب توضيح الملكية والمنافع وشروط التحويل لكل مشروع.')}</DialogDescription><ol className="tz-guide-checklist">{steps.map((step,i)=><li key={i}><span><TokenizationStepIcon stage={i}/></span><div><strong>{step.title}</strong><p>{step.description}</p></div></li>)}</ol><p className="tz-guide-note">{say('برای شروع، معرفی کوتاه دارایی، مدارک مالکیت و هدف عرضه را آماده کنید. مدارک حساس را فقط در مسیر رسمی پذیرش دارایی بارگذاری کنید.','Prepare a short asset introduction, ownership records and your offering goal. Upload sensitive documents only through the official asset-intake flow.','جهّز تعريفاً موجزاً بالأصل ومستندات الملكية وهدف الطرح. ارفع المستندات الحساسة فقط عبر مسار قبول الأصول الرسمي.')}</p></DialogContent></Dialog>
 </section>;
}