/* eslint-disable no-undef */
// VisiListen — shared icons, tags, and sample data

const Icon = ({ name, size = 20, color = 'currentColor', stroke = 1.8 }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor',
    strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round',
    style: { color, display: 'block', flexShrink: 0 },
  };
  switch (name) {
    case 'play':   return <span className="material-symbols-outlined" style={{ fontSize: size, color, display: 'block', flexShrink: 0, userSelect: 'none', lineHeight: 1 }}>play_arrow</span>;
    case 'pause':  return <span className="material-symbols-outlined" style={{ fontSize: size, color, display: 'block', flexShrink: 0, userSelect: 'none', lineHeight: 1 }}>pause</span>;
    case 'back5':  return <span className="material-symbols-outlined" style={{ fontSize: size, color, display: 'block', flexShrink: 0, userSelect: 'none', lineHeight: 1 }}>replay_5</span>;
    case 'fwd5':         return <span className="material-symbols-outlined" style={{ fontSize: size, color, display: 'block', flexShrink: 0, userSelect: 'none', lineHeight: 1 }}>forward_5</span>;
    case 'check_circle': return <span className="material-symbols-outlined" style={{ fontSize: size, color, display: 'block', flexShrink: 0, userSelect: 'none', lineHeight: 1 }}>check_circle</span>;
    case 'cancel':       return <span className="material-symbols-outlined" style={{ fontSize: size, color, display: 'block', flexShrink: 0, userSelect: 'none', lineHeight: 1 }}>cancel</span>;
    case 'chevL':    return <svg {...props}><polyline points="15 6 9 12 15 18"/></svg>;
    case 'chevR':    return <svg {...props}><polyline points="9 6 15 12 9 18"/></svg>;
    case 'check':    return <svg {...props}><polyline points="4 12 10 18 20 6"/></svg>;
    case 'x':        return <svg {...props}><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>;
    case 'key':      return <svg {...props}><circle cx="8" cy="15" r="4"/><path d="m11 12 9-9"/><path d="m17 6 3 3"/><path d="m14 9 3 3"/></svg>;
    case 'share':    return <svg {...props}><path d="M12 3v13"/><polyline points="7 8 12 3 17 8"/><path d="M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5"/></svg>;
    case 'headphones': return <svg {...props}><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1v-7h3z"/><path d="M3 19a2 2 0 0 0 2 2h1v-7H3z"/></svg>;
    case 'cam':      return <svg {...props}><path d="M14.5 4l1.5 2H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l1.5-2z"/><circle cx="12" cy="13" r="4"/></svg>;
    case 'upload':   return <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>;
    case 'sparkles': return <svg {...props}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>;
    case 'sound':    return <svg {...props}><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="currentColor" stroke="none"/><path d="M16 8a5 5 0 0 1 0 8"/></svg>;
    case 'clock':    return <svg {...props}><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>;
    case 'flame':    return <svg {...props}><path d="M12 3s4 4 4 8a4 4 0 1 1-8 0c0-1 .5-2 1-2.5 0 2 1 3 1 3s-2-3 2-8.5z"/></svg>;
    case 'arrow':    return <svg {...props}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>;
    case 'arrowL':   return <svg {...props}><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>;
    case 'sun':      return <svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></svg>;
    case 'moon':     return <svg {...props}><path d="M21 12.5A9 9 0 1 1 11.5 3a7 7 0 0 0 9.5 9.5z"/></svg>;
    case 'doc':      return <svg {...props}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><polyline points="14 3 14 8 19 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></svg>;
    case 'briefcase': return <svg {...props}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>;
    case 'plane':    return <svg {...props}><path d="M21 15l-3-3 3-7-2-1-5 5-6-2-2 2 5 3-3 5 2 1 4-3 5 2z"/></svg>;
    case 'building': return <svg {...props}><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 7h0M15 7h0M9 11h0M15 11h0M9 15h0M15 15h0" strokeWidth="2" strokeLinecap="round"/><path d="M10 21v-4h4v4"/></svg>;
    case 'shop':     return <svg {...props}><path d="M3 9l1-5h16l1 5"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9"/><path d="M9 13h6"/></svg>;
    case 'repeat':   return <svg {...props}><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>;
    case 'settings': return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>;
    // ── NEW ICONS ──────────────────────────────────────────────────────────────
    case 'trash':    return <svg {...props}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>;
    case 'user':     return <svg {...props}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>;
    case 'image':    return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>;
    default: return <span style={{ width: size, height: size, display: 'block' }}/>;
  }
};

const CAT_MAP = {
  business: { label: '商務',   icon: 'briefcase' },
  travel:   { label: '旅遊',   icon: 'plane'     },
  office:   { label: '辦公室', icon: 'building'  },
  shopping: { label: '購物',   icon: 'shop'      },
};

const CatTag = ({ cat }) => {
  const x = CAT_MAP[cat] || CAT_MAP.business;
  return (
    <span className="cat-tag">
      <Icon name={x.icon} size={11} stroke={2.2}/>
      {x.label}
    </span>
  );
};

// Sample data — replaced by live Firestore data once backend is up
const SAMPLE_QUIZZES = [
  { id: 'q1', cat: 'business', date: '2026-05-06', n: 3, mins: 1,
    title: 'Shipment Delay',
    en: 'A logistics manager updates a colleague on a port delay.',
    image_url: null, audio_url: null },
  { id: 'q2', cat: 'office', date: '2026-05-05', n: 3, mins: 2,
    title: 'Meeting Reschedule',
    en: 'Two teammates discuss moving a stand-up.',
    image_url: null, audio_url: null },
  { id: 'q3', cat: 'travel', date: '2026-05-04', n: 3, mins: 1,
    title: 'Hotel Check-in',
    en: 'A traveler arrives early and asks the front desk.',
    image_url: null, audio_url: null },
  { id: 'q4', cat: 'shopping', date: '2026-05-03', n: 3, mins: 2,
    title: 'Return Policy',
    en: 'Customer asks about returning a defective item.',
    image_url: null, audio_url: null },
];

const SAMPLE_TRANSCRIPT = [
  { who: 'M', name: 'Daniel', text: "Hi Sarah, did the shipment arrive at the warehouse this morning?" },
  { who: 'F', name: 'Sarah',  text: "Actually, no — there's been a delay at the port. They said another two days." },
  { who: 'M', name: 'Daniel', text: "Two days? We promised the client by Friday. Can we expedite anything?" },
  { who: 'F', name: 'Sarah',  text: "I'll call the carrier and see if we can switch to air freight for the urgent items." },
];

const SAMPLE_QUESTIONS = [
  {
    q: 'What is the main problem the speakers discuss?',
    options: ['Lost shipment', 'A delay at the port', 'Wrong delivery address', 'Budget cut'],
    correct: 1,
    explain: "Sarah explicitly says \"there's been a delay at the port.\"",
  },
  {
    q: 'When did the client expect the delivery?',
    options: ['Today', 'Tomorrow', 'By Friday', 'Next week'],
    correct: 2,
    explain: 'Daniel says, "We promised the client by Friday."',
  },
  {
    q: 'What does Sarah suggest as a solution?',
    options: ['Cancel the order', 'Switch to air freight for urgent items', 'Wait for the port to clear', 'Find another supplier'],
    correct: 1,
    explain: 'Sarah offers to call the carrier and switch to air freight.',
  },
];

const Spinner = ({ size = 16 }) => (
  <div className="spinner" style={{ width: size, height: size }}/>
);

// Firebase initialization
const firebaseConfig = {
  apiKey: "AIzaSyC2vFXYrF8qFRkH_eDjjxvmHIFbCzKHz6g",
  authDomain: "visilisten-71709.firebaseapp.com",
  projectId: "visilisten-71709",
  storageBucket: "visilisten-71709.firebasestorage.app",
  messagingSenderId: "886309926905",
  appId: "1:886309926905:web:5bf65de21ad278d6b8af28",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const auth = firebase.auth(firebaseApp);
const db = firebase.firestore(firebaseApp);

Object.assign(window, {
  Icon, CatTag, Spinner,
  SAMPLE_QUIZZES, SAMPLE_TRANSCRIPT, SAMPLE_QUESTIONS, CAT_MAP,
  auth, db,
});