import React, { useState } from 'react';
import { useAppSelector } from '../store';

export default function CallsPage() {
  const { activeCall, callHistory } = useAppSelector(state => state.calls);
  const [selectedCallHistory, setSelectedCallHistory] = useState(0);

  return (
    <div className="p-8 max-w-6xl mx-auto">
      {activeCall ? (
        // Active Call View
        <div className="bg-gray-800 rounded-lg p-8 text-center">
          <div className="mb-8">
            <div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-purple-400 to-pink-600 rounded-full flex items-center justify-center">
              <span className="text-4xl">👤</span>
            </div>
            <h2 className="text-3xl font-bold text-white mb-2">{activeCall.participantName}</h2>
            <p className="text-gray-400">Call in progress</p>
            <p className="text-2xl font-mono text-purple-400 mt-4">{activeCall.duration}</p>
          </div>

          <div className="flex justify-center gap-4 mb-8">
            <button
              className={`w-16 h-16 rounded-full flex items-center justify-center transition ${
                activeCall.isMuted ? 'bg-red-600 hover:bg-red-700' : 'bg-gray-700 hover:bg-gray-600'
              }`}
            >
              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
              </svg>
            </button>

            <button
              className={`w-16 h-16 rounded-full flex items-center justify-center transition ${
                activeCall.isCameraOn ? 'bg-gray-700 hover:bg-gray-600' : 'bg-red-600 hover:bg-red-700'
              }`}
            >
              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
            </button>

            <button className="w-16 h-16 rounded-full bg-red-600 hover:bg-red-700 flex items-center justify-center transition">
              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M16.5 1h-9C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h9c1.38 0 2.5-1.12 2.5-2.5v-17C19 2.12 17.88 1 16.5 1zm-4 21c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5-4H7V4h9v14z" />
              </svg>
            </button>
          </div>
        </div>
      ) : (
        // Call History
        <div>
          <h1 className="text-3xl font-bold text-white mb-8">Calls</h1>

          {callHistory.length === 0 ? (
            <div className="bg-gray-800 rounded-lg p-12 text-center">
              <p className="text-gray-400 text-lg">No call history yet. Start a call to get begun!</p>
            </div>
          ) : (
            <div className="space-y-4">
              {callHistory.map((call, index) => (
                <div key={index} className="bg-gray-800 rounded-lg p-4 flex items-center justify-between hover:bg-gray-700 transition">
                  <div className="flex items-center gap-4 flex-1">
                    <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-600 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="text-lg">👤</span>
                    </div>
                    <div className="flex-1 min-w-0">
                      <h3 className="text-white font-semibold">{call.participantName}</h3>
                      <p className="text-gray-400 text-sm">
                        {call.type === 'voice' ? '📞 Voice Call' : '📹 Video Call'} • {call.duration}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-4 flex-shrink-0">
                    <p className="text-gray-400 text-sm">
                      {new Date(call.timestamp).toLocaleDateString()}
                    </p>
                    <button className="text-purple-400 hover:text-purple-300 transition">
                      <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                      </svg>
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}
