"use client";

import { useState, useEffect, useCallback } from "react";
import { Huddle, HuddleParticipant, startHuddle, joinHuddle, leaveHuddle, endHuddle } from "@/lib/api";
import { HuddleControls } from "./HuddleControls";
import { HuddleParticipants } from "./HuddleParticipants";
import { HuddleNotes } from "./HuddleNotes";
import { useAuth } from "@/lib/auth";
import { Phone, Users, Clock } from "lucide-react";

interface HuddleViewProps {
  channelId: string;
}

export function HuddleView({ channelId }: HuddleViewProps) {
  const { user } = useAuth();
  const [huddle, setHuddle] = useState<Huddle | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [muted, setMuted] = useState(false);
  const [videoOn, setVideoOn] = useState(false);
  const [elapsed, setElapsed] = useState(0);

  // Timer
  useEffect(() => {
    if (!huddle || huddle.status !== "active") return;
    const interval = setInterval(() => {
      setElapsed((prev) => prev + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, [huddle]);

  const handleStart = async () => {
    setLoading(true);
    setError("");
    setElapsed(0);
    try {
      const newHuddle = await startHuddle(channelId);
      setHuddle(newHuddle);
    } catch (err: any) {
      const msg = err.response?.data?.error || err.response?.data?.message || err.message || "Failed to start huddle";
      setError(typeof msg === "string" ? msg : JSON.stringify(msg));
    } finally {
      setLoading(false);
    }
  };

  const handleLeave = async () => {
    if (!huddle) return;
    try {
      await leaveHuddle(huddle.id);
    } catch (err) {
      console.error("Failed to leave huddle:", err);
    }
    setHuddle(null);
    setElapsed(0);
  };

  const handleEnd = async () => {
    if (!huddle) return;
    try {
      await endHuddle(huddle.id);
    } catch (err) {
      console.error("Failed to end huddle:", err);
    }
    setHuddle(null);
    setElapsed(0);
  };

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
  };

  // Mock participants for UI demo
  const participants: HuddleParticipant[] = huddle?.participants || [
    {
      user_id: user?.id || "me",
      user: { id: user?.id || "me", name: user?.name || user?.email, email: user?.email },
      muted,
      video_on: videoOn,
    },
  ];

  if (loading) {
    return (
      <div className="flex items-center justify-center h-full text-gray-400">
        <div className="animate-pulse">Starting huddle...</div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200 bg-white">
        <div className="flex items-center gap-2">
          <Phone size={22} className="text-slack-purple" />
          <h1 className="text-lg font-bold text-gray-800">Huddle</h1>
          {huddle && huddle.status === "active" && (
            <div className="flex items-center gap-1.5 ml-3 px-2 py-0.5 rounded-full bg-slack-green/10 text-slack-green">
              <div className="w-2 h-2 rounded-full bg-slack-green animate-pulse" />
              <span className="text-xs font-medium">Live</span>
            </div>
          )}
        </div>
        {huddle && (
          <div className="flex items-center gap-1.5 text-sm text-gray-500">
            <Clock size={16} />
            <span className="font-mono">{formatTime(elapsed)}</span>
          </div>
        )}
      </div>

      {error && (
        <div className="px-6 py-2 bg-red-50 border-b border-red-200 text-red-700 text-sm">{error}</div>
      )}

      {!huddle ? (
        // No active huddle
        <div className="flex-1 flex items-center justify-center flex-col gap-6">
          <div className="w-24 h-24 rounded-full bg-slack-purple/10 flex items-center justify-center">
            <Phone size={40} className="text-slack-purple" />
          </div>
          <div className="text-center">
            <h2 className="text-xl font-bold text-gray-800 mb-1">No active huddle</h2>
            <p className="text-sm text-gray-500">Start a huddle to begin an audio call with your channel.</p>
          </div>
          <button
            onClick={handleStart}
            disabled={loading}
            className="flex items-center gap-2 px-6 py-3 rounded-full bg-slack-purple text-white font-semibold hover:bg-slack-darkpurple disabled:opacity-40 transition-colors shadow-lg"
          >
            <Phone size={20} />
            <span>Start huddle</span>
          </button>
        </div>
      ) : (
        // Active huddle
        <div className="flex-1 flex overflow-hidden">
          {/* Main area: video/audio stage */}
          <div className="flex-1 flex flex-col bg-gray-900">
            {/* Video grid / audio visualization */}
            <div className="flex-1 flex items-center justify-center p-6">
              {videoOn ? (
                <div className="w-full max-w-2xl aspect-video rounded-lg bg-gray-800 flex items-center justify-center">
                  <div className="w-20 h-20 rounded-full bg-slack-purple flex items-center justify-center text-2xl font-bold text-white">
                    {(user?.name || user?.email || "U")[0].toUpperCase()}
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center gap-4">
                  <div className="w-24 h-24 rounded-full bg-slack-purple flex items-center justify-center text-3xl font-bold text-white">
                    {(user?.name || user?.email || "U")[0].toUpperCase()}
                  </div>
                  <div className="flex items-center gap-2 text-white/60">
                    <div className={`w-2 h-2 rounded-full ${muted ? "bg-slack-red" : "bg-slack-green"} animate-pulse`} />
                    <span className="text-sm">{muted ? "Muted" : "Speaking..."}</span>
                  </div>
                </div>
              )}
            </div>

            {/* Controls */}
            <HuddleControls
              muted={muted}
              videoOn={videoOn}
              onToggleMute={() => setMuted(!muted)}
              onToggleVideo={() => setVideoOn(!videoOn)}
              onScreenShare={() => {
                // Mock screen share
                console.log("Screen share not implemented");
              }}
              onLeave={handleLeave}
              onEnd={handleEnd}
              canEnd={true}
            />
          </div>

          {/* Right sidebar: participants + notes */}
          <div className="w-80 flex flex-col border-l border-gray-200 bg-white overflow-y-auto">
            <div className="flex items-center gap-2 px-4 py-3 border-b border-gray-200">
              <Users size={18} className="text-gray-500" />
              <h3 className="text-sm font-semibold text-gray-700">Participants</h3>
            </div>
            <HuddleParticipants participants={participants} currentUserId={user?.id} />
            <div className="flex-1 min-h-[200px]">
              <HuddleNotes huddleId={huddle.id} initialNotes={huddle.notes} />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}