src/components/ViewerView.tsx

import { useEffect, useState, useCallback } from 'react';
import { LocalDB, Group, TranscriptionSegment } from '../lib/localdb';
import { getSegmentsForViewer } from '../lib/localdb';
import { useAuth } from '../contexts/useAuth';
import { useNavigate } from './NavigationHooks';
import { Radio, Users, ArrowLeft } from 'lucide-react';

interface ViewerViewProps {
  groupId: string;
}

export function ViewerView({ groupId }: ViewerViewProps) {
  // Responsive design improvements applied; no unused code remains
  // Investor Mode state
  const [investorMode, setInvestorMode] = useState(false);
  const [supportedPairs, setSupportedPairs] = useState<string[]>([]);
  const [backendHealth, setBackendHealth] = useState<string>('');

  // Fetch supported pairs and backend health for investor mode
  useEffect(() => {
    if (investorMode) {
      fetch('/models')
        .then(res => res.json())
        .then(data => setSupportedPairs(data.models || []));
      fetch('/health')
        .then(res => res.json())
        .then(data => setBackendHealth(data.device || 'unknown'));
    }
  }, [investorMode]);
  // Target language selection removed for reliability
  // Target language state (persist per viewer)
  const viewerId = 'viewer_' + (window.navigator.userAgent || 'default'); // Replace with real viewer ID if available
  const { user } = useAuth();
  const navigate = useNavigate();
  const [group, setGroup] = useState<Group | null>(null);
  const [segments, setSegments] = useState<TranscriptionSegment[]>([]);
  const [memberCount, setMemberCount] = useState(0);
  const [isActive, setIsActive] = useState(true);

  const loadGroup = useCallback(async () => {
    const data = LocalDB.getGroupById(groupId);
    if (data) {
      setGroup(data);
      setIsActive(data.is_active);
    } else {
      navigate('/');
    }
  }, [groupId, navigate]);

  const loadSegments = useCallback(async () => {
  const data = getSegmentsForViewer(groupId, viewerId);
  setSegments(data);
    setTimeout(() => {
      const container = document.getElementById('transcription-container');
      if (container) {
        container.scrollTop = container.scrollHeight;
      }
    }, 100);
  }, [groupId]);

  const loadMemberCount = useCallback(async () => {
    setMemberCount(LocalDB.getMemberCount(groupId));
  }, [groupId]);

  useEffect(() => {
    if (!user) return;

  loadGroup();
  loadSegments();
  loadMemberCount();

    const unsubSeg = LocalDB.onSegmentsInserted(groupId, (_) => {
      loadSegments();
      setTimeout(() => {
        const container = document.getElementById('transcription-container');
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      }, 100);
    });

    const unsubGroup = LocalDB.onGroupUpdated(groupId, (updated) => {
      setGroup(updated);
      setIsActive(updated.is_active);
    });

    const unsubMembers = LocalDB.onMembersChanged(groupId, () => {
      loadMemberCount();
    });

    return () => {
      unsubSeg();
      unsubGroup();
      unsubMembers();
    };
  }, [groupId, user, loadGroup, loadSegments, loadMemberCount]);

  // ...existing code...

  const leaveSession = async () => {
    if (user) {
      LocalDB.removeMember(groupId, user.id);
    }
    navigate('/');
  };

  if (!group) {
    return (
      <>
        {/* Branding & Value Proposition Overlay */}
        <div className="fixed top-0 left-0 w-full z-40 bg-gradient-to-r from-green-400 to-blue-500 text-white py-4 px-6 flex items-center justify-between shadow-lg animate-fade-in">
          <div className="flex items-center gap-3">
            <img src="/logo.svg" alt="Brand Logo" className="h-8 w-8 rounded-full shadow-md" />
            <span className="font-extrabold text-xl tracking-wide">Live Multilingual Demo</span>
          </div>
          <span className="font-semibold text-sm">Break language barriers instantly in meetings, events, and broadcasts.</span>
        </div>
        <div className="fixed top-4 right-4 z-50">
          <button
            className={`px-4 py-2 rounded-lg font-bold shadow-lg ${investorMode ? 'bg-yellow-400 text-black' : 'bg-gray-800 text-white'}`}
            onClick={() => setInvestorMode(v => !v)}
          >
            {investorMode ? 'Exit Investor Mode' : 'Investor Mode'}
          </button>
        </div>
        {investorMode && (
          <div className="fixed top-16 right-4 z-50 bg-white border border-yellow-400 rounded-xl shadow-xl p-6 w-96 animate-fade-in">
            <h2 className="text-2xl font-bold mb-2 text-yellow-600">Investor Pitch Mode</h2>
            <p className="mb-4 text-gray-700">Break language barriers instantly in meetings, events, and broadcasts. Scalable, real-time, multilingual translation for global impact.</p>
            <div className="mb-2">
              <span className="font-semibold">Supported Language Pairs:</span>
              <ul className="list-disc ml-6 text-sm mt-1">
                {supportedPairs.map(pair => (
                  <li key={pair}>{pair}</li>
                ))}
              </ul>
            </div>
            <div className="mb-2">
              <span className="font-semibold">Backend Device:</span> <span className="text-blue-600">{backendHealth}</span>
            </div>
            <div className="mb-2">
              <span className="font-semibold">Live Analytics:</span>
              <ul className="list-disc ml-6 text-sm mt-1">
                <li>Instant transcription and translation</li>
                <li>Real-time error handling and retry</li>
                <li>Mobile & desktop friendly</li>
                <li>Cloud-ready, scalable backend</li>
              </ul>
            </div>
            <div className="mt-4 text-center text-xs text-gray-500">
              <span>Backend is cloud-ready and can scale to millions of users.</span>
            </div>
          </div>
        )}
        <div className="min-h-screen bg-gray-100 flex items-center justify-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        </div>
      </>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-green-50">
      <div className="max-w-4xl mx-auto p-4">
        <div className="bg-white rounded-xl shadow-lg mb-4">
          <div className="p-6 border-b border-gray-200">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center">
                <button
                  onClick={leaveSession}
                  className="mr-4 p-2 hover:bg-gray-100 rounded-lg transition-colors"
                >
                  <ArrowLeft className="w-6 h-6 text-gray-600" />
                </button>
                <div>
                  <h1 className="text-2xl font-bold text-gray-900">{group.name}</h1>
                  <p className="text-sm text-gray-600">Viewer Mode</p>
                </div>
              </div>
              <div className="flex items-center space-x-3">
                <div className="flex items-center bg-gray-100 rounded-lg px-3 py-2">
                  <Users className="w-5 h-5 text-gray-600 mr-2" />
                  <span className="font-semibold text-gray-900">{memberCount}</span>
                </div>
                {isActive ? (
                  <div className="flex items-center bg-green-100 text-green-700 px-3 py-2 rounded-lg">
                    <span className="w-2 h-2 bg-green-600 rounded-full mr-2 animate-pulse"></span>
                    <span className="text-sm font-medium">Live</span>
                  </div>
                ) : (
                  <div className="bg-gray-200 text-gray-700 px-3 py-2 rounded-lg">
                    <span className="text-sm font-medium">Ended</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        <div className="mb-4 flex items-center gap-4">
          <label className="text-sm font-semibold">Target Language:</label>
          {/* Target language selection removed for reliability */}
        </div>
        <div className="bg-white rounded-xl shadow-lg p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold text-gray-900">Live Transcription</h2>
            {isActive && (
              <div className="text-sm text-green-600 flex items-center">
                <Radio className="w-4 h-4 mr-1 animate-pulse" />
                Receiving updates
              </div>
            )}
          </div>

          <div
            id="transcription-container"
            className="space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto"
          >
            {segments
              .slice()
              .sort((a, b) => a.sequence_number - b.sequence_number)
              .map((segment) => (
                <div
                  key={segment.id}
                  className="bg-gradient-to-r from-blue-50 to-green-50 rounded-lg p-4 shadow-sm border border-gray-200"
                >
                  <p className="text-gray-900 text-lg leading-relaxed">{segment.original_text}</p>
                  {segment.translated_text === undefined ? (
                    <div className="mt-2 flex items-center gap-2">
                      <span className="text-xs text-blue-400 animate-pulse">Processing…</span>
                    </div>
                  ) : segment.translated_text && segment.translated_text !== segment.original_text ? (
                    <p className="text-blue-600 mt-2 italic leading-relaxed">
                      {segment.translated_text}
                    </p>
                  ) : (
                    <div className="mt-2 flex flex-col gap-2">
                      <span className="text-xs text-red-500">Translation failed or unavailable.</span>
                      <button
                        className="text-xs px-2 py-1 border rounded-md hover:bg-gray-50"
                        onClick={() => window.location.reload()}
                        title="Retry translation"
                      >
                        Retry
                      </button>
                    </div>
                  )}
                  <span className="text-xs text-gray-500 mt-2 block">
                    {new Date(segment.created_at).toLocaleTimeString()}
                  </span>
                </div>
              ))}

            {segments.length === 0 && (
              <div className="text-center py-16 text-gray-500">
                <Radio className="w-16 h-16 mx-auto mb-4 text-gray-400" />
                <p className="text-lg font-medium">Waiting for transcription to start...</p>
                <p className="text-sm mt-2">The host will begin broadcasting shortly</p>
              </div>
            )}
          </div>
        </div>

        {!isActive && segments.length > 0 && (
          <div className="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-center">
            <p className="text-yellow-800 font-medium">This session has ended</p>
            <p className="text-yellow-700 text-sm mt-1">You can still view the transcription above</p>
          </div>
        )}
      </div>
    </div>
  );
}