import { useState, useEffect, useRef, useCallback } from "react";
import { Send, Paperclip, Image as ImageIcon, Copy, Check, Users, LogOut, File as FileIcon, X } from "lucide-react";

function makeCode() {
  const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
  let out = "";
  for (let i = 0; i < 6; i++) out += chars[Math.floor(Math.random() * chars.length)];
  return out;
}

function nameColor(name) {
  const colors = ["#e5533d", "#3f8f5f", "#3a6ea5", "#c9862a", "#8a5fc7", "#c2456a", "#2fa39a"];
  let hash = 0;
  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
  return colors[Math.abs(hash) % colors.length];
}

function timeLabel(ts) {
  const d = new Date(ts);
  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}

function resizeImage(file, maxDim = 800, quality = 0.72) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = () => reject(new Error("Could not read image"));
    reader.onload = () => {
      const img = new Image();
      img.onerror = () => reject(new Error("Could not decode image"));
      img.onload = () => {
        let { width, height } = img;
        if (width > height && width > maxDim) {
          height = Math.round((height * maxDim) / width);
          width = maxDim;
        } else if (height > maxDim) {
          width = Math.round((width * maxDim) / height);
          height = maxDim;
        }
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        resolve(canvas.toDataURL("image/jpeg", quality));
      };
      img.src = reader.result;
    };
    reader.readAsDataURL(file);
  });
}

function readFileAsDataURL(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = () => reject(new Error("Could not read file"));
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(file);
  });
}

function formatBytes(bytes) {
  if (bytes < 1024) return bytes + " B";
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
}

const MAX_MESSAGES = 60;
const MAX_FILE_BYTES = 1.5 * 1024 * 1024;

export default function PrivateChatGroup() {
  const [screen, setScreen] = useState("loading"); // loading, landing, create, join, chat
  const [mode, setMode] = useState(null); // 'create' | 'join'
  const [name, setName] = useState("");
  const [code, setCode] = useState("");
  const [groupName, setGroupName] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  const [activeGroup, setActiveGroup] = useState(null); // {code, name, members}
  const [messages, setMessages] = useState([]);
  const [draft, setDraft] = useState("");
  const [copied, setCopied] = useState(false);
  const [sending, setSending] = useState(false);
  const [pendingFileError, setPendingFileError] = useState("");

  const scrollRef = useRef(null);
  const fileInputRef = useRef(null);
  const imageInputRef = useRef(null);
  const pollRef = useRef(null);

  // Prefill from last session (personal, not shared)
  useEffect(() => {
    (async () => {
      try {
        const last = await window.storage.get("lastSession", false);
        if (last && last.value) {
          const parsed = JSON.parse(last.value);
          if (parsed.name) setName(parsed.name);
        }
      } catch (e) {
        // no previous session, that's fine
      }
      setScreen("landing");
    })();
  }, []);

  const saveLastSession = useCallback(async (n) => {
    try {
      await window.storage.set("lastSession", JSON.stringify({ name: n }), false);
    } catch (e) {
      // non-critical
    }
  }, []);

  const loadMessages = useCallback(async (groupCode) => {
    try {
      const res = await window.storage.get(`messages:${groupCode}`, true);
      if (res && res.value) {
        setMessages(JSON.parse(res.value));
      } else {
        setMessages([]);
      }
    } catch (e) {
      setMessages([]);
    }
  }, []);

  // Polling while in chat
  useEffect(() => {
    if (screen === "chat" && activeGroup) {
      loadMessages(activeGroup.code);
      pollRef.current = setInterval(() => loadMessages(activeGroup.code), 2500);
      return () => clearInterval(pollRef.current);
    }
  }, [screen, activeGroup, loadMessages]);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages, screen]);

  async function handleCreate() {
    setError("");
    if (!name.trim()) return setError("Enter your name.");
    if (!groupName.trim()) return setError("Give the group a name.");
    setBusy(true);
    try {
      const newCode = makeCode();
      const groupData = { name: groupName.trim(), createdAt: Date.now(), members: [name.trim()] };
      await window.storage.set(`group:${newCode}`, JSON.stringify(groupData), true);
      await window.storage.set(`messages:${newCode}`, JSON.stringify([]), true);
      await saveLastSession(name.trim());
      setActiveGroup({ code: newCode, name: groupData.name, members: groupData.members });
      setMessages([]);
      setScreen("chat");
    } catch (e) {
      setError("Couldn't create the group. Try again.");
    } finally {
      setBusy(false);
    }
  }

  async function handleJoin() {
    setError("");
    if (!name.trim()) return setError("Enter your name.");
    const cleanCode = code.trim().toUpperCase();
    if (!cleanCode) return setError("Enter the invite code.");
    setBusy(true);
    try {
      const res = await window.storage.get(`group:${cleanCode}`, true);
      if (!res || !res.value) {
        setError("No group found with that code. Double-check it with whoever invited you.");
        setBusy(false);
        return;
      }
      const groupData = JSON.parse(res.value);
      if (!groupData.members.includes(name.trim())) {
        groupData.members = [...groupData.members, name.trim()];
        await window.storage.set(`group:${cleanCode}`, JSON.stringify(groupData), true);
      }
      await saveLastSession(name.trim());
      setActiveGroup({ code: cleanCode, name: groupData.name, members: groupData.members });
      await loadMessages(cleanCode);
      setScreen("chat");
    } catch (e) {
      setError("Couldn't join the group. Try again.");
    } finally {
      setBusy(false);
    }
  }

  async function pushMessage(msg) {
    try {
      const res = await window.storage.get(`messages:${activeGroup.code}`, true);
      const current = res && res.value ? JSON.parse(res.value) : [];
      const next = [...current, msg].slice(-MAX_MESSAGES);
      await window.storage.set(`messages:${activeGroup.code}`, JSON.stringify(next), true);
      setMessages(next);
    } catch (e) {
      setError("Message failed to send. Check your connection and try again.");
    }
  }

  async function handleSendText() {
    const text = draft.trim();
    if (!text || sending) return;
    setSending(true);
    setDraft("");
    await pushMessage({
      id: Date.now() + "-" + Math.random().toString(36).slice(2, 7),
      type: "text",
      sender: name,
      content: text,
      ts: Date.now(),
    });
    setSending(false);
  }

  async function handleImagePick(e) {
    const file = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!file) return;
    setPendingFileError("");
    setSending(true);
    try {
      const dataUrl = await resizeImage(file);
      await pushMessage({
        id: Date.now() + "-" + Math.random().toString(36).slice(2, 7),
        type: "image",
        sender: name,
        content: dataUrl,
        ts: Date.now(),
      });
    } catch (err) {
      setPendingFileError("Couldn't send that photo. Try a different one.");
    } finally {
      setSending(false);
    }
  }

  async function handleFilePick(e) {
    const file = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!file) return;
    setPendingFileError("");
    if (file.size > MAX_FILE_BYTES) {
      setPendingFileError(`That file is ${formatBytes(file.size)}. Please pick something under ${formatBytes(MAX_FILE_BYTES)} for this demo.`);
      return;
    }
    setSending(true);
    try {
      const dataUrl = await readFileAsDataURL(file);
      await pushMessage({
        id: Date.now() + "-" + Math.random().toString(36).slice(2, 7),
        type: "file",
        sender: name,
        content: dataUrl,
        filename: file.name,
        size: file.size,
        ts: Date.now(),
      });
    } catch (err) {
      setPendingFileError("Couldn't send that file. Try again.");
    } finally {
      setSending(false);
    }
  }

  function copyInvite() {
    const inviteText = `Join my chat group "${activeGroup.name}" — use code: ${activeGroup.code}`;
    if (navigator.clipboard) {
      navigator.clipboard.writeText(inviteText).catch(() => {});
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  }

  function leaveGroup() {
    clearInterval(pollRef.current);
    setActiveGroup(null);
    setMessages([]);
    setScreen("landing");
    setMode(null);
    setGroupName("");
    setCode("");
    setError("");
  }

  // ---------- Screens ----------

  if (screen === "loading") {
    return (
      <div className="flex items-center justify-center h-full w-full min-h-[500px] bg-stone-50">
        <div className="text-stone-400 text-sm">Loading…</div>
      </div>
    );
  }

  if (screen === "landing" || screen === "create" || screen === "join") {
    return (
      <div className="flex items-center justify-center min-h-[560px] w-full bg-gradient-to-b from-stone-100 to-stone-200 p-6">
        <div className="w-full max-w-sm bg-white rounded-2xl shadow-lg p-6">
          <div className="mb-6 text-center">
            <div className="mx-auto mb-3 w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center">
              <Users size={22} color="white" />
            </div>
            <h1 className="text-xl font-semibold text-stone-800">Private Chat Group</h1>
            <p className="text-sm text-stone-500 mt-1">Invite-only. Share the code, no signup needed.</p>
          </div>

          {screen === "landing" && (
            <div className="flex flex-col gap-3">
              <button
                onClick={() => { setError(""); setScreen("create"); }}
                className="w-full py-3 rounded-xl bg-indigo-600 text-white font-medium hover:bg-indigo-700 transition"
              >
                Create a new group
              </button>
              <button
                onClick={() => { setError(""); setScreen("join"); }}
                className="w-full py-3 rounded-xl bg-stone-100 text-stone-700 font-medium hover:bg-stone-200 transition"
              >
                Join with a code
              </button>
              <p className="text-xs text-stone-400 text-center mt-2">
                This is a demo prototype: anyone with the code can join, and data is stored for this artifact only.
              </p>
            </div>
          )}

          {screen === "create" && (
            <div className="flex flex-col gap-3">
              <label className="text-sm text-stone-600">
                Your name
                <input
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="mt-1 w-full border border-stone-300 rounded-lg px-3 py-2 text-stone-800 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                  placeholder="e.g. Sarah"
                  maxLength={24}
                />
              </label>
              <label className="text-sm text-stone-600">
                Group name
                <input
                  value={groupName}
                  onChange={(e) => setGroupName(e.target.value)}
                  className="mt-1 w-full border border-stone-300 rounded-lg px-3 py-2 text-stone-800 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                  placeholder="e.g. Weekend Trip"
                  maxLength={40}
                />
              </label>
              {error && <p className="text-sm text-red-500">{error}</p>}
              <button
                onClick={handleCreate}
                disabled={busy}
                className="w-full py-3 rounded-xl bg-indigo-600 text-white font-medium hover:bg-indigo-700 transition disabled:opacity-60"
              >
                {busy ? "Creating…" : "Create group"}
              </button>
              <button onClick={() => setScreen("landing")} className="text-sm text-stone-400 hover:text-stone-600">
                Back
              </button>
            </div>
          )}

          {screen === "join" && (
            <div className="flex flex-col gap-3">
              <label className="text-sm text-stone-600">
                Your name
                <input
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="mt-1 w-full border border-stone-300 rounded-lg px-3 py-2 text-stone-800 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                  placeholder="e.g. Sarah"
                  maxLength={24}
                />
              </label>
              <label className="text-sm text-stone-600">
                Invite code
                <input
                  value={code}
                  onChange={(e) => setCode(e.target.value.toUpperCase())}
                  className="mt-1 w-full border border-stone-300 rounded-lg px-3 py-2 text-stone-800 tracking-widest font-mono focus:outline-none focus:ring-2 focus:ring-indigo-400"
                  placeholder="ABC123"
                  maxLength={6}
                />
              </label>
              {error && <p className="text-sm text-red-500">{error}</p>}
              <button
                onClick={handleJoin}
                disabled={busy}
                className="w-full py-3 rounded-xl bg-indigo-600 text-white font-medium hover:bg-indigo-700 transition disabled:opacity-60"
              >
                {busy ? "Joining…" : "Join group"}
              </button>
              <button onClick={() => setScreen("landing")} className="text-sm text-stone-400 hover:text-stone-600">
                Back
              </button>
            </div>
          )}
        </div>
      </div>
    );
  }

  // ---------- Chat screen ----------
  return (
    <div className="flex flex-col h-full min-h-[560px] max-h-[720px] w-full bg-stone-50 rounded-2xl overflow-hidden border border-stone-200">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 bg-indigo-600 text-white">
        <div className="min-w-0">
          <div className="font-semibold truncate">{activeGroup.name}</div>
          <div className="text-xs text-indigo-100 truncate">{activeGroup.members.length} member{activeGroup.members.length !== 1 ? "s" : ""}</div>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          <button
            onClick={copyInvite}
            className="flex items-center gap-1 text-xs bg-indigo-500/60 hover:bg-indigo-500 px-2 py-1.5 rounded-lg transition"
            title="Copy invite code"
          >
            {copied ? <Check size={14} /> : <Copy size={14} />}
            <span className="font-mono">{activeGroup.code}</span>
          </button>
          <button onClick={leaveGroup} className="p-1.5 rounded-lg hover:bg-indigo-500/60 transition" title="Leave group">
            <LogOut size={16} />
          </button>
        </div>
      </div>

      {/* Messages */}
      <div ref={scrollRef} className="flex-1 overflow-y-auto px-3 py-4 flex flex-col gap-3">
        {messages.length === 0 && (
          <div className="text-center text-stone-400 text-sm mt-10">
            No messages yet. Say hi 👋
          </div>
        )}
        {messages.map((m) => {
          const mine = m.sender === name;
          return (
            <div key={m.id} className={`flex ${mine ? "justify-end" : "justify-start"}`}>
              <div className={`max-w-[75%] flex flex-col ${mine ? "items-end" : "items-start"}`}>
                {!mine && (
                  <span className="text-xs font-medium mb-0.5" style={{ color: nameColor(m.sender) }}>
                    {m.sender}
                  </span>
                )}
                <div
                  className={`rounded-2xl px-3 py-2 text-sm ${
                    mine ? "bg-indigo-600 text-white rounded-br-sm" : "bg-white text-stone-800 border border-stone-200 rounded-bl-sm"
                  }`}
                >
                  {m.type === "text" && <span className="whitespace-pre-wrap break-words">{m.content}</span>}
                  {m.type === "image" && (
                    <img src={m.content} alt="shared" className="rounded-lg max-w-full max-h-64 object-contain" />
                  )}
                  {m.type === "file" && (
                    <a
                      href={m.content}
                      download={m.filename}
                      className={`flex items-center gap-2 ${mine ? "text-white" : "text-indigo-700"}`}
                    >
                      <FileIcon size={18} />
                      <span className="flex flex-col">
                        <span className="underline break-all">{m.filename}</span>
                        <span className={`text-xs ${mine ? "text-indigo-100" : "text-stone-400"}`}>{formatBytes(m.size || 0)}</span>
                      </span>
                    </a>
                  )}
                </div>
                <span className="text-[10px] text-stone-400 mt-0.5">{timeLabel(m.ts)}</span>
              </div>
            </div>
          );
        })}
      </div>

      {pendingFileError && (
        <div className="mx-3 mb-1 flex items-center justify-between bg-red-50 text-red-600 text-xs px-3 py-2 rounded-lg">
          <span>{pendingFileError}</span>
          <button onClick={() => setPendingFileError("")}><X size={14} /></button>
        </div>
      )}

      {/* Composer */}
      <div className="flex items-center gap-2 px-3 py-3 border-t border-stone-200 bg-white">
        <button
          onClick={() => imageInputRef.current && imageInputRef.current.click()}
          className="p-2 rounded-full text-stone-500 hover:bg-stone-100 transition shrink-0"
          title="Send a photo"
        >
          <ImageIcon size={20} />
        </button>
        <button
          onClick={() => fileInputRef.current && fileInputRef.current.click()}
          className="p-2 rounded-full text-stone-500 hover:bg-stone-100 transition shrink-0"
          title="Send a file"
        >
          <Paperclip size={20} />
        </button>
        <input
          ref={imageInputRef}
          type="file"
          accept="image/*"
          className="hidden"
          onChange={handleImagePick}
        />
        <input
          ref={fileInputRef}
          type="file"
          className="hidden"
          onChange={handleFilePick}
        />
        <input
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") handleSendText(); }}
          placeholder="Type a message…"
          className="flex-1 min-w-0 border border-stone-300 rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
        />
        <button
          onClick={handleSendText}
          disabled={sending || !draft.trim()}
          className="p-2.5 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 transition disabled:opacity-40 shrink-0"
          title="Send"
        >
          <Send size={18} />
        </button>
      </div>
    </div>
  );
}