"use client";

import { useState, useRef, useEffect } from "react";
import Link from "next/link";
import { Alert, AlertSeverity, AlertComment } from "@/lib/types";

// ── Severity theming ─────────────────────────────────────────────────────────

const severityAccent: Record<AlertSeverity, string> = {
  danger: "border-l-red-500",
  warning: "border-l-yellow-500",
  info: "border-l-blue-500",
};

const severityText: Record<AlertSeverity, string> = {
  danger: "text-red-400",
  warning: "text-yellow-400",
  info: "text-blue-400",
};

const severityLabel: Record<AlertSeverity, string> = {
  danger: "Critical",
  warning: "Warning",
  info: "Info",
};

// ── Helpers ───────────────────────────────────────────────────────────────────

function timeAgo(iso: string): string {
  const diff = Date.now() - new Date(iso).getTime();
  const mins = Math.floor(diff / 60_000);
  if (mins < 1) return "just now";
  if (mins < 60) return `${mins}m ago`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h ago`;
  return `${Math.floor(hrs / 24)}d ago`;
}

function shortDate(iso: string): string {
  return new Date(iso).toLocaleDateString(undefined, {
    month: "short", day: "numeric", hour: "numeric", minute: "2-digit",
  });
}

// ── Comment row ───────────────────────────────────────────────────────────────

function CommentRow({ comment }: { comment: AlertComment }) {
  const isSystem = comment.author === "system";

  if (isSystem) {
    return (
      <div className="flex items-center gap-3">
        <div className="h-px flex-1 bg-slate-800" />
        <div className="flex items-center gap-1.5 text-xs text-slate-600 shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-3 w-3">
            <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
          </svg>
          <span className="italic">{comment.body}</span>
          <span className="text-slate-700">·</span>
          <span>{timeAgo(comment.createdAt)}</span>
        </div>
        <div className="h-px flex-1 bg-slate-800" />
      </div>
    );
  }

  return (
    <div className="space-y-1.5">
      <div className="flex items-center gap-2">
        <div className="h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-3.5 w-3.5 text-slate-400">
            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
          </svg>
        </div>
        <span className="text-xs font-semibold text-slate-300">User</span>
        <span className="text-xs text-slate-600">{shortDate(comment.createdAt)}</span>
      </div>
      <div className="ml-8">
        <p className="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed bg-slate-800/60 rounded-lg border border-slate-700/40 px-4 py-3">
          {comment.body}
        </p>
      </div>
    </div>
  );
}

// ── Main component ────────────────────────────────────────────────────────────

export default function AlertDetail({ initialAlert }: { initialAlert: Alert }) {
  const [alert, setAlert] = useState<Alert>(initialAlert);
  const [actionLoading, setActionLoading] = useState(false);
  const [commentText, setCommentText] = useState("");
  const [commentLoading, setCommentLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [alert.comments.length]);

  async function toggleStatus() {
    setActionLoading(true);
    setError(null);
    try {
      const newStatus = alert.status === "open" ? "closed" : "open";
      const res = await fetch(`/api/alerts/${alert.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: newStatus }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setAlert(await res.json());
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setActionLoading(false);
    }
  }

  async function submitComment(e: React.FormEvent) {
    e.preventDefault();
    if (!commentText.trim()) return;
    setCommentLoading(true);
    setError(null);
    try {
      const res = await fetch(`/api/alerts/${alert.id}/comments`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ body: commentText.trim() }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const comment = await res.json();
      setAlert((prev) => ({ ...prev, comments: [...prev.comments, comment] }));
      setCommentText("");
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setCommentLoading(false);
    }
  }

  const isOpen = alert.status === "open";
  const isResolved = alert.closeReason === "resolved";
  const statusTime = isOpen ? alert.firstSeen : (alert.closedAt ?? alert.firstSeen);

  return (
    <main className="mx-auto max-w-5xl px-4 py-8 space-y-6">

      <Link
        href="/?tab=alerts"
        className="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-300 transition-colors"
      >
        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
        </svg>
        All Alerts
      </Link>

      {error && (
        <div className="rounded-lg border border-red-800 bg-red-950/30 px-4 py-3 text-red-300 text-sm">
          {error}
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6 items-start">

        {/* ── Alert detail ─────────────────────────────────────────────── */}
        <div className={`lg:col-span-3 rounded-xl bg-slate-800/40 border border-slate-700/60 border-l-4 overflow-hidden ${severityAccent[alert.severity]}`}>
          <div className="px-6 py-6 space-y-4">

            {/* Status row */}
            <div className="flex items-center justify-between gap-3">
              <span className={`inline-flex items-center gap-1.5 text-xs font-semibold ${
                isOpen ? "text-green-400" : isResolved ? "text-teal-400" : "text-slate-500"
              }`}>
                {isOpen && <span className="h-1.5 w-1.5 rounded-full bg-green-400 shrink-0" />}
                {isOpen ? "Open" : isResolved ? "Auto-resolved" : "Closed"}
                <span className="text-slate-700 font-normal">·</span>
                <span className="text-slate-600 font-normal">{timeAgo(statusTime)}</span>
              </span>

              <button
                onClick={toggleStatus}
                disabled={actionLoading}
                className={`rounded-lg px-4 py-1.5 text-xs font-semibold transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
                  isOpen
                    ? "bg-slate-700 hover:bg-slate-600 text-white"
                    : "bg-green-900/50 hover:bg-green-800/50 text-green-300 border border-green-800"
                }`}
              >
                {actionLoading ? "…" : isOpen ? "Close" : "Reopen"}
              </button>
            </div>

            {/* Severity + title + description */}
            <div className="space-y-1.5">
              <span className={`text-xs font-bold uppercase tracking-widest ${severityText[alert.severity]}`}>
                {severityLabel[alert.severity]}
              </span>
              <h1 className="text-xl font-bold text-white leading-snug">{alert.title}</h1>
              <p className="text-sm text-slate-400 leading-relaxed pt-1">{alert.description}</p>
            </div>

          </div>
        </div>

        {/* ── Comments ─────────────────────────────────────────────────── */}
        <div className="lg:col-span-2 flex flex-col gap-4">

          <h2 className="text-xs font-semibold uppercase tracking-widest text-slate-600">
            Comments
          </h2>

          <div className="space-y-4">
            {alert.comments.length === 0 && (
              <p className="text-sm text-slate-700">No comments yet.</p>
            )}
            {alert.comments.map((c) => (
              <CommentRow key={c.id} comment={c} />
            ))}
            <div ref={bottomRef} />
          </div>

          <form onSubmit={submitComment} className="flex flex-col gap-2 pt-2 border-t border-slate-800">
            <textarea
              value={commentText}
              onChange={(e) => setCommentText(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                  e.preventDefault();
                  if (commentText.trim()) submitComment(e as unknown as React.FormEvent);
                }
              }}
              placeholder="Add a comment…"
              rows={3}
              className="w-full rounded-lg bg-slate-800/40 border border-slate-700/60 focus:border-slate-500 text-sm text-white placeholder-slate-700 px-4 py-3 focus:outline-none resize-none transition-colors"
            />
            <div className="flex justify-end">
              <button
                type="submit"
                disabled={commentLoading || !commentText.trim()}
                className="rounded-lg bg-slate-700 hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed px-4 py-2 text-sm font-medium text-white transition-colors"
              >
                {commentLoading ? "Saving…" : "Comment"}
              </button>
            </div>
          </form>

        </div>
      </div>
    </main>
  );
}
