"use client";

import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useConfirm } from "@/components/shared/use-confirm";

interface ScheduledMessage {
  id: number;
  recipient_id: number;
  body: string;
  send_at: string;
  status: string;
  created_at: string;
  recipient_username: string | null;
}

interface Conversation {
  id: number;
  participant: { id: number; username: string | null } | null;
}

export default function ScheduledMessagesPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [messages, setMessages] = useState<ScheduledMessage[]>([]);
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const { confirm: askConfirm, dialog: confirmDialog } = useConfirm();

  // Form state
  const [recipientId, setRecipientId] = useState("");
  const [body, setBody] = useState("");
  const [sendAt, setSendAt] = useState("");

  useEffect(() => {
    if (status === "unauthenticated") router.push("/login");
  }, [status, router]);

  useEffect(() => {
    loadMessages();
    loadConversations();
  }, []);

  async function loadMessages() {
    try {
      const res = await fetch("/api/messages/scheduled");
      if (res.ok) {
        const data = await res.json();
        setMessages(data.data || []);
      }
    } catch {
      // silently fail
    } finally {
      setLoading(false);
    }
  }

  async function loadConversations() {
    try {
      const res = await fetch("/api/messages");
      if (res.ok) {
        const data = await res.json();
        setConversations(data.data || []);
      }
    } catch {
      // silently fail
    }
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!recipientId || !body.trim() || !sendAt) return;

    setSubmitting(true);
    setError(null);
    setSuccess(null);

    try {
      const res = await fetch("/api/messages/scheduled", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ recipient_id: Number(recipientId), body, send_at: sendAt }),
      });

      if (res.ok) {
        setSuccess("Message scheduled successfully!");
        setBody("");
        setSendAt("");
        setRecipientId("");
        loadMessages();
      } else {
        const data = await res.json();
        setError(data.error || "Failed to schedule message");
      }
    } catch {
      setError("Network error");
    } finally {
      setSubmitting(false);
    }
  }

  async function handleCancel(id: number) {
    if (!(await askConfirm({ title: "Cancel message", message: "Cancel this scheduled message?" }))) return;

    try {
      const res = await fetch("/api/messages/scheduled", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id }),
      });

      if (res.ok) {
        setMessages((prev) => prev.filter((m) => m.id !== id));
      }
    } catch {
      // silently fail
    }
  }

  // Get minimum datetime (now + 5 minutes)
  const minDateTime = new Date(Date.now() + 5 * 60 * 1000).toISOString().slice(0, 16);

  // Unique recipients from conversations
  const recipients = conversations
    .filter((c) => c.participant)
    .map((c) => ({ id: c.participant!.id, username: c.participant!.username }))
    .filter((r, i, arr) => arr.findIndex((a) => a.id === r.id) === i);

  if (status === "loading" || loading) {
    return (
      <div className="max-w-3xl mx-auto space-y-6">
        <div className="h-8 w-64 bg-surface-light rounded animate-pulse" />
        <div className="bg-surface rounded-xl p-6 space-y-4 animate-pulse">
          <div className="h-10 bg-surface-light rounded" />
          <div className="h-24 bg-surface-light rounded" />
          <div className="h-10 bg-surface-light rounded" />
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      {confirmDialog}
      <h1 className="text-2xl font-bold">Scheduled Messages</h1>
      <p className="text-text-muted text-sm">
        Compose messages now and have them delivered at a future date and time.
      </p>

      {/* Create form */}
      <form onSubmit={handleSubmit} className="bg-surface rounded-xl p-6 border border-white/5 space-y-4">
        <h2 className="text-lg font-semibold">Schedule New Message</h2>

        {error && (
          <div className="bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-2.5 text-sm text-red-400">
            {error}
          </div>
        )}
        {success && (
          <div className="bg-green-500/10 border border-green-500/20 rounded-lg px-4 py-2.5 text-sm text-green-400">
            {success}
          </div>
        )}

        <div>
          <label className="block text-sm font-medium text-text-muted mb-1">Recipient</label>
          <select
            value={recipientId}
            onChange={(e) => setRecipientId(e.target.value)}
            required
            className="w-full rounded-lg border border-white/10 bg-surface-light px-4 py-2.5 text-text focus:border-primary focus:outline-none"
          >
            <option value="">Select a recipient...</option>
            {recipients.map((r) => (
              <option key={r.id} value={r.id}>
                {r.username || `User #${r.id}`}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-text-muted mb-1">Message</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
            required
            maxLength={5000}
            rows={4}
            placeholder="Type your message..."
            className="w-full rounded-lg border border-white/10 bg-surface-light px-4 py-2.5 text-text placeholder-text-muted focus:border-primary focus:outline-none resize-none"
          />
          <p className="text-xs text-text-muted mt-1">{body.length}/5000</p>
        </div>

        <div>
          <label className="block text-sm font-medium text-text-muted mb-1">Send At</label>
          <input
            type="datetime-local"
            value={sendAt}
            onChange={(e) => setSendAt(e.target.value)}
            required
            min={minDateTime}
            className="w-full rounded-lg border border-white/10 bg-surface-light px-4 py-2.5 text-text focus:border-primary focus:outline-none"
          />
        </div>

        <button
          type="submit"
          disabled={submitting || !recipientId || !body.trim() || !sendAt}
          className="gradient-gold text-background px-6 py-2.5 rounded-lg font-semibold disabled:opacity-40 hover:opacity-90 transition-opacity"
        >
          {submitting ? "Scheduling..." : "Schedule Message"}
        </button>
      </form>

      {/* Pending messages list */}
      <div className="bg-surface rounded-xl p-6 border border-white/5">
        <h2 className="text-lg font-semibold mb-4">Pending Messages</h2>

        {messages.length === 0 ? (
          <p className="text-text-muted text-sm">No scheduled messages yet.</p>
        ) : (
          <div className="space-y-3">
            {messages.map((msg) => (
              <div
                key={msg.id}
                className="flex items-start justify-between gap-4 p-4 bg-surface-light rounded-lg border border-white/5"
              >
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-text">
                    To: {msg.recipient_username || `User #${msg.recipient_id}`}
                  </p>
                  <p className="text-sm text-text-muted mt-1 line-clamp-2">{msg.body}</p>
                  <p className="text-xs text-text-muted mt-2 flex items-center gap-1.5">
                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Sends {new Date(msg.send_at).toLocaleString()}
                  </p>
                </div>
                <button
                  onClick={() => handleCancel(msg.id)}
                  className="shrink-0 text-red-400 hover:text-red-300 text-sm font-medium transition-colors"
                >
                  Cancel
                </button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}