"use client";

import { useEffect, useState } from "react";
import { avatarColor, initials } from "../lib/avatar";
import {
  IconMic,
  IconMicOff,
  IconMore,
  IconPhoneOff,
  IconShare,
  IconSmile,
  IconUsers,
  IconVideo,
  IconX,
} from "./icons";

export interface ConnectParticipant {
  id: string | number;
  name: string;
  muted?: boolean;
  speaking?: boolean;
}

function formatClock(seconds: number) {
  const m = Math.floor(seconds / 60);
  const s = seconds % 60;
  return `${m}:${String(s).padStart(2, "0")}`;
}

/**
 * Mock Connect overlay — UI only (no WebRTC). Matches Windshield Connect chrome.
 */
export function ConnectOverlay({
  title,
  participants,
  onLeave,
}: {
  title: string;
  participants: ConnectParticipant[];
  onLeave: () => void;
}) {
  const [elapsed, setElapsed] = useState(0);
  const [micOn, setMicOn] = useState(true);
  const [camOn, setCamOn] = useState(true);
  const tiles = participants.slice(0, 4);

  useEffect(() => {
    const id = window.setInterval(() => setElapsed((v) => v + 1), 1000);
    return () => window.clearInterval(id);
  }, []);

  return (
    <div className="connect-backdrop" role="presentation" onClick={onLeave}>
      <div
        className="connect"
        role="dialog"
        aria-modal="true"
        aria-label={`${title} Connect`}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="connect-head">
          <span className="connect-live" aria-hidden="true" />
          <span className="connect-title">{title} Connect</span>
          <span className="connect-clock">{formatClock(elapsed)}</span>
          <span className="connect-spacer" />
          <span className="connect-count">{tiles.length} people</span>
          <button className="connect-close" type="button" onClick={onLeave} aria-label="Close Connect">
            <IconX />
          </button>
        </div>

        <div className={`connect-grid count-${Math.max(tiles.length, 1)}`}>
          {tiles.map((p, index) => {
            const color = avatarColor(String(p.id));
            const muted = p.muted ?? index === 2;
            return (
              <div key={String(p.id)} className={p.speaking || index === 0 ? "connect-tile speaking" : "connect-tile"}>
                <span className="connect-tile-avatar" style={{ background: color.bg, color: color.fg }}>
                  {initials(p.name)}
                </span>
                <div className="connect-tile-foot">
                  <span className="connect-tile-who">{p.name}</span>
                  <span className={muted ? "connect-mic off" : "connect-mic"} aria-hidden="true">
                    {muted ? <IconMicOff size={12} /> : <IconMic size={12} />}
                  </span>
                </div>
              </div>
            );
          })}
          {tiles.length === 0 && (
            <div className="connect-tile">
              <span className="connect-tile-avatar" style={{ background: "var(--accent)", color: "#fff" }}>
                You
              </span>
              <div className="connect-tile-foot">
                <span className="connect-tile-who">Waiting for others…</span>
              </div>
            </div>
          )}
        </div>

        <div className="connect-controls">
          <button
            className={micOn ? "connect-control" : "connect-control off"}
            type="button"
            aria-label={micOn ? "Mute" : "Unmute"}
            onClick={() => setMicOn((v) => !v)}
          >
            {micOn ? <IconMic /> : <IconMicOff />}
          </button>
          <button
            className={camOn ? "connect-control" : "connect-control off"}
            type="button"
            aria-label={camOn ? "Turn camera off" : "Turn camera on"}
            onClick={() => setCamOn((v) => !v)}
          >
            <IconVideo />
          </button>
          <button className="connect-control" type="button" aria-label="Share screen" title="Not built yet" disabled>
            <IconShare />
          </button>
          <button className="connect-control" type="button" aria-label="People" title="Not built yet" disabled>
            <IconUsers />
          </button>
          <button className="connect-control" type="button" aria-label="Reactions" title="Not built yet" disabled>
            <IconSmile />
          </button>
          <button className="connect-control" type="button" aria-label="More" title="Not built yet" disabled>
            <IconMore />
          </button>
          <button className="connect-leave" type="button" onClick={onLeave}>
            <IconPhoneOff size={16} />
            Leave
          </button>
        </div>
      </div>
    </div>
  );
}