import React, { useEffect, useMemo, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';
import {
  AudioLines,
  BookOpen,
  Check,
  ChevronLeft,
  CircleHelp,
  Download,
  Gauge,
  Info,
  Library,
  Menu,
  Mic,
  Music2,
  Pause,
  Play,
  RotateCcw,
  Share2,
  SlidersHorizontal,
  Square,
  Trash2,
  Upload,
  Wind,
  X,
} from 'lucide-react';
import './styles.css';
import { approvedNey, goldWaveform, tealWaveform } from './assets.js';

const NOTE_OPTIONS = ['دو 5', 'ري 5', 'مي نصف بيمول 5', 'فا 5', 'صول 5'];
const SPEEDS = [50, 60, 70, 80];

const demoRecordings = [
  { id: 'demo-1', note: 'دو 5', createdAt: 'بيانات معاينة', duration: '00:04', quality: 'ممتازة' },
  { id: 'demo-2', note: 'ري 5', createdAt: 'بيانات معاينة', duration: '00:04', quality: 'جيدة' },
  { id: 'demo-3', note: 'مي نصف بيمول 5', createdAt: 'بيانات معاينة', duration: '00:04', quality: 'تحتاج مراجعة' },
];

function formatTime(seconds) {
  const safe = Math.max(0, Math.floor(seconds));
  return `${String(Math.floor(safe / 60)).padStart(2, '0')}:${String(safe % 60).padStart(2, '0')}`;
}

function AppIcon({ children, label, onClick, className = '' }) {
  return <button className={`icon-button ${className}`} type="button" aria-label={label} onClick={onClick}>{children}</button>;
}

function Header({ title = 'معيار الناي', onMenu }) {
  return (
    <header className="tool-header">
      <AppIcon label="فتح القائمة" onClick={onMenu}><Menu size={21} /></AppIcon>
      <div className="brand-title"><span>{title}</span><Music2 size={18} /></div>
      <AppIcon label="معلومات"><Info size={19} /></AppIcon>
    </header>
  );
}

function NeyHero() {
  return (
    <div className="ney-hero" aria-hidden="true">
      <img src={approvedNey} alt="" />
      <span className="ney-glow" />
    </div>
  );
}

function BottomNav({ active, onChange }) {
  const items = [
    { id: 'record', label: 'تسجيل', icon: Mic },
    { id: 'library', label: 'المكتبة', icon: BookOpen },
    { id: 'about', label: 'حول', icon: CircleHelp },
  ];
  return (
    <nav className="bottom-nav" aria-label="التنقل الرئيسي">
      {items.map(({ id, label, icon: Icon }) => (
        <button key={id} type="button" className={active === id ? 'active' : ''} onClick={() => onChange(id)}>
          <Icon size={20} />
          <span>{label}</span>
        </button>
      ))}
    </nav>
  );
}

function ReadyScreen({ note, setNote, speed, setSpeed, scale, setScale, onStart }) {
  return (
    <section className="screen ready-screen" aria-labelledby="ready-title">
      <Header onMenu={() => {}} />
      <NeyHero />
      <div className="ready-content">
        <p className="eyebrow">تسجيل وتحليل نغمات الناي</p>
        <h1 id="ready-title">استعد لنغمتك</h1>
        <div className="segment" aria-label="نظام القياس">
          <button type="button" className={scale === 'eastern' ? 'selected' : ''} onClick={() => setScale('eastern')}>شرقي</button>
          <button type="button" className={scale === 'western' ? 'selected' : ''} onClick={() => setScale('western')}>غربي</button>
        </div>
        <label className="field-label" htmlFor="note">النغمة المستهدفة</label>
        <select id="note" className="select-field" value={note} onChange={(event) => setNote(event.target.value)}>
          {NOTE_OPTIONS.map((item) => <option key={item}>{item}</option>)}
        </select>
        <label className="field-label" htmlFor="speed">السرعة التجريبية</label>
        <div className="speed-control">
          <button type="button" onClick={() => setSpeed((value) => Math.max(40, value - 10))}>−</button>
          <input id="speed" type="range" min="40" max="100" step="10" value={speed} onChange={(event) => setSpeed(Number(event.target.value))} />
          <button type="button" onClick={() => setSpeed((value) => Math.min(100, value + 10))}>+</button>
          <strong>{speed}</strong>
        </div>
        <button className="gold-button" type="button" onClick={onStart}><Mic size={18} /><span>ابدأ جلسة التسجيل</span></button>
        <p className="preview-note">القيم المعروضة للمعاينة ويمكن تعديلها بعد الاختبار.</p>
      </div>
    </section>
  );
}

function ListenScreen({ note, onContinue, onBack }) {
  const [playing, setPlaying] = useState(false);
  return (
    <section className="screen centered-screen" aria-labelledby="listen-title">
      <Header title="الاستماع للنغمة" onMenu={onBack} />
      <div className="listening-copy">
        <p>استمع إلى النغمة قبل التسجيل</p>
        <h1 id="listen-title">{note}</h1>
      </div>
      <img className={`waveform large ${playing ? 'playing' : ''}`} src={tealWaveform} alt="تمثيل بصري للموجة الصوتية" />
      <div className="pitch-dial" aria-label="مؤشر النغمة في وضع المعاينة">
        <span className="dial-arc" />
        <strong>{note}</strong>
        <small>جاهز للاستماع</small>
      </div>
      <button className="listen-toggle" type="button" onClick={() => setPlaying((value) => !value)}>
        {playing ? <Pause size={20} /> : <Play size={20} fill="currentColor" />}
        <span>{playing ? 'إيقاف المثال' : 'تشغيل المثال'}</span>
      </button>
      <button className="green-button" type="button" onClick={onContinue}><Check size={18} /><span>سمعت النغمة — متابعة</span></button>
      <p className="breath-hint"><Wind size={18} /> حافظ على نفس ثابت ومستمر</p>
    </section>
  );
}

function RecordScreen({ note, onCancel, onComplete }) {
  const [state, setState] = useState('idle');
  const [seconds, setSeconds] = useState(0);
  const [message, setMessage] = useState('اضغط لبدء التسجيل');
  const recorderRef = useRef(null);
  const chunksRef = useRef([]);
  const timerRef = useRef(null);
  const secondsRef = useRef(0);

  useEffect(() => () => {
    clearInterval(timerRef.current);
    recorderRef.current?.stream?.getTracks().forEach((track) => track.stop());
  }, []);

  const finish = () => {
    clearInterval(timerRef.current);
    if (recorderRef.current?.state === 'recording') recorderRef.current.stop();
    setState('done');
  };

  const startRecording = async () => {
    if (state === 'recording') return finish();
    setSeconds(0);
    secondsRef.current = 0;
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const recorder = new MediaRecorder(stream);
      chunksRef.current = [];
      recorder.ondataavailable = (event) => event.data.size && chunksRef.current.push(event.data);
      recorder.onstop = () => {
        const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'audio/webm' });
        stream.getTracks().forEach((track) => track.stop());
        onComplete({ blob, duration: secondsRef.current || 1 });
      };
      recorderRef.current = recorder;
      recorder.start();
      setMessage('التسجيل جارٍ — حافظ على نفس ثابت');
      setState('recording');
      timerRef.current = setInterval(() => setSeconds((value) => {
        if (value >= 3) {
          secondsRef.current = 4;
          setTimeout(finish, 0);
          return 4;
        }
        secondsRef.current = value + 1;
        return value + 1;
      }), 1000);
    } catch {
      setState('blocked');
      setMessage('تعذّر الوصول إلى الميكروفون. اسمح بالإذن ثم أعد المحاولة.');
    }
  };

  return (
    <section className="screen centered-screen record-screen" aria-labelledby="record-title">
      <Header title={`تسجيل نغمة: ${note}`} onMenu={onCancel} />
      <div className={`record-orbit ${state}`}>
        <span className="orbit-one" /><span className="orbit-two" />
        <strong id="record-title">{state === 'recording' ? Math.min(4, seconds + 1) : state === 'done' ? <Check size={58} /> : <Mic size={50} />}</strong>
        <small>{state === 'recording' ? `من 4 ثوانٍ` : state === 'done' ? 'اكتمل التسجيل' : 'جاهز'}</small>
      </div>
      <img className={`waveform record-wave ${state === 'recording' ? 'playing' : ''}`} src={tealWaveform} alt="مؤشر بصري للتسجيل" />
      <p className={`record-message ${state === 'blocked' ? 'error' : ''}`}>{message}</p>
      {state !== 'done' && <button className={state === 'recording' ? 'red-button' : 'gold-button'} type="button" onClick={startRecording}>{state === 'recording' ? <Square size={18} fill="currentColor" /> : <Mic size={18} />}<span>{state === 'recording' ? 'إيقاف التسجيل' : state === 'blocked' ? 'إعادة طلب الإذن' : 'بدء التسجيل'}</span></button>}
      <button className="text-button" type="button" onClick={onCancel}>إلغاء والعودة</button>
    </section>
  );
}

function ReviewScreen({ note, recording, onRetry, onSave }) {
  const [playing, setPlaying] = useState(false);
  const audioRef = useRef(null);
  const audioUrl = useMemo(() => recording?.blob ? URL.createObjectURL(recording.blob) : '', [recording]);
  useEffect(() => () => audioUrl && URL.revokeObjectURL(audioUrl), [audioUrl]);

  const toggleAudio = () => {
    if (!audioRef.current || !audioUrl) return;
    if (playing) audioRef.current.pause(); else audioRef.current.play();
    setPlaying((value) => !value);
  };

  return (
    <section className="screen review-screen" aria-labelledby="review-title">
      <Header title="مراجعة التسجيل" onMenu={onRetry} />
      <div className="review-note"><h1 id="review-title">{note}</h1><span>تسجيل جديد</span></div>
      <div className="audio-card">
        <button type="button" className="round-play" onClick={toggleAudio} disabled={!audioUrl}>{playing ? <Pause size={20} /> : <Play size={20} fill="currentColor" />}</button>
        <img src={goldWaveform} alt="الموجة الصوتية للتسجيل" />
        <div className="time-row"><span>00:00</span><span>{formatTime(recording?.duration || 4)}</span></div>
        {audioUrl && <audio ref={audioRef} src={audioUrl} onEnded={() => setPlaying(false)} />}
      </div>
      <div className="result-card">
        <div><span>نتيجة الجودة</span><strong>بانتظار التحليل المعتمد</strong></div>
        <div className="quality-dots" aria-hidden="true">{[0,1,2,3,4,5].map((item) => <i key={item} />)}</div>
        <div className="confidence"><span>اكتمال التسجيل</span><strong>100%</strong></div>
      </div>
      <p className="analysis-note">لا تعرض هذه النسخة حكمًا موسيقيًا نهائيًا قبل ربط محرّك التحليل واختباره.</p>
      <button className="dark-button" type="button" onClick={onRetry}><RotateCcw size={18} /><span>إعادة التسجيل</span></button>
      <button className="gold-button" type="button" onClick={onSave}><Check size={18} /><span>اعتماد وحفظ</span></button>
    </section>
  );
}

function LibraryScreen({ recordings, onDelete }) {
  const [selected, setSelected] = useState(null);
  const rows = [...recordings, ...demoRecordings];
  return (
    <section className="screen library-screen" aria-labelledby="library-title">
      <Header title="المكتبة" onMenu={() => {}} />
      <div className="library-tools">
        <h1 id="library-title">دفتر العازف</h1>
        <div><AppIcon label="بحث وفرز"><SlidersHorizontal size={19} /></AppIcon><AppIcon label="رفع تسجيل"><Upload size={19} /></AppIcon></div>
      </div>
      <div className="recording-table" role="list">
        {rows.map((item) => (
          <article key={item.id} className="recording-row" role="listitem">
            <button className="mini-play" type="button" aria-label={`تشغيل ${item.note}`}><Play size={15} fill="currentColor" /></button>
            <button className="recording-main" type="button" onClick={() => setSelected(item)}><strong>{item.note}</strong><span>{item.createdAt} · {item.duration}</span></button>
            <span className={`status-dot ${item.quality === 'تحتاج مراجعة' ? 'warn' : ''}`} />
            {!item.id.startsWith('demo') && <button className="delete-mini" type="button" aria-label="حذف التسجيل" onClick={() => onDelete(item.id)}><Trash2 size={16} /></button>}
          </article>
        ))}
      </div>
      {selected && (
        <div className="recording-sheet" role="dialog" aria-modal="true" aria-label="تفاصيل التسجيل">
          <button className="sheet-close" type="button" aria-label="إغلاق" onClick={() => setSelected(null)}><X size={20} /></button>
          <h2>{selected.note}</h2><p>{selected.createdAt}</p>
          <img src={goldWaveform} alt="موجة التسجيل" />
          <button type="button"><Play size={18} /> استماع</button>
          <button type="button"><Download size={18} /> تصدير</button>
          <button type="button"><Share2 size={18} /> مشاركة</button>
        </div>
      )}
    </section>
  );
}

function AboutScreen() {
  return (
    <section className="screen about-screen" aria-labelledby="about-title">
      <Header title="حول الأداة" onMenu={() => {}} />
      <div className="about-hero"><Gauge size={42} /><h1 id="about-title">معيار الناي</h1><p>أداة تسجيل ومراجعة مصممة لهوية الناي العربي.</p></div>
      <article><div className="about-icon"><AudioLines size={25} /></div><div><h2>نظام القياس</h2><p>يدعم العرض الشرقي والغربي. القيم الموسيقية النهائية ستثبت بعد التحقق والاختبار العملي.</p></div></article>
      <article><div className="about-icon"><Wind size={25} /></div><div><h2>المعايرة السريعة</h2><p>قبل التسجيل، اختر بيئة هادئة واسمح للمتصفح باستخدام الميكروفون للحصول على تسجيل أوضح.</p></div><button type="button">إعادة المعايرة</button></article>
      <article><div className="about-icon"><Library size={25} /></div><div><h2>خصوصية التسجيل</h2><p>في هذه النسخة التجريبية يبقى التسجيل داخل الجلسة ولا يُرفع إلى قاعدة بيانات.</p></div></article>
    </section>
  );
}

function App() {
  const [tab, setTab] = useState('record');
  const [step, setStep] = useState('ready');
  const [note, setNote] = useState('دو 5');
  const [speed, setSpeed] = useState(60);
  const [scale, setScale] = useState('eastern');
  const [recording, setRecording] = useState(null);
  const [recordings, setRecordings] = useState([]);
  const [toast, setToast] = useState('');

  const changeTab = (next) => {
    setTab(next);
    if (next === 'record') setStep('ready');
  };

  const saveRecording = () => {
    const item = { id: crypto.randomUUID(), note, duration: formatTime(recording?.duration || 4), createdAt: 'الآن', quality: 'بانتظار التحليل', blob: recording?.blob };
    setRecordings((items) => [item, ...items]);
    setToast('تم حفظ التسجيل في دفتر العازف');
    setTab('library');
    setStep('ready');
    setTimeout(() => setToast(''), 2600);
  };

  let content;
  if (tab === 'library') content = <LibraryScreen recordings={recordings} onDelete={(id) => setRecordings((items) => items.filter((item) => item.id !== id))} />;
  else if (tab === 'about') content = <AboutScreen />;
  else if (step === 'listen') content = <ListenScreen note={note} onBack={() => setStep('ready')} onContinue={() => setStep('recording')} />;
  else if (step === 'recording') content = <RecordScreen note={note} onCancel={() => setStep('ready')} onComplete={(value) => { setRecording(value); setStep('review'); }} />;
  else if (step === 'review') content = <ReviewScreen note={note} recording={recording} onRetry={() => setStep('recording')} onSave={saveRecording} />;
  else content = <ReadyScreen note={note} setNote={setNote} speed={speed} setSpeed={setSpeed} scale={scale} setScale={setScale} onStart={() => setStep('listen')} />;

  return (
    <main className="app-shell" dir="rtl">
      <div className="background-grain" aria-hidden="true" />
      {content}
      <BottomNav active={tab} onChange={changeTab} />
      {toast && <div className="toast" role="status"><Check size={17} />{toast}</div>}
    </main>
  );
}

createRoot(document.getElementById('root')).render(<React.StrictMode><App /></React.StrictMode>);