"use client";

import { useMemo, useState } from "react";
import { Archive, CheckCircle2, Inbox, MessageSquareText, Plus, Send, Users2, XCircle } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
import { Textarea } from "@/components/ui/textarea";
import { useCommunication } from "@/hooks/use-communication";
import { useTeams } from "@/hooks/use-teams";
import { formatRelativeDate } from "@/lib/utils";
import type { CommunicationKind, DirectMessage, TeamMessage } from "@/types";

interface MessageFormState {
  kind: CommunicationKind;
  body: string;
  taskTitle: string;
  taskDescription: string;
}

const DEFAULT_MESSAGE_FORM: MessageFormState = {
  kind: "message",
  body: "",
  taskTitle: "",
  taskDescription: "",
};

export default function CommunicationPage() {
  const {
    directMessages,
    teamMessages,
    loading,
    userId,
    activeTeamId,
    sendDirectMessage,
    updateDirectMessageStatus,
    acceptDirectTask,
    sendTeamMessage,
    createTaskFromTeamMessage,
  } = useCommunication();
  const { activeTeam } = useTeams();
  const [recipientEmail, setRecipientEmail] = useState("");
  const [directForm, setDirectForm] = useState<MessageFormState>(DEFAULT_MESSAGE_FORM);
  const [teamForm, setTeamForm] = useState<MessageFormState>(DEFAULT_MESSAGE_FORM);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  const activeDirectMessages = useMemo(
    () => directMessages.filter((message) => message.status !== "archived"),
    [directMessages]
  );
  const archivedDirectCount = directMessages.length - activeDirectMessages.length;
  const inboxMessages = useMemo(
    () => activeDirectMessages.filter((message) => message.sender_id !== userId),
    [activeDirectMessages, userId]
  );
  const sentMessages = useMemo(
    () => activeDirectMessages.filter((message) => message.sender_id === userId),
    [activeDirectMessages, userId]
  );
  const openTaskRequests = useMemo(
    () =>
      inboxMessages.filter(
        (message) => message.kind === "task_request" && message.status === "open"
      ).length,
    [inboxMessages]
  );

  async function handleSendDirect() {
    if (!recipientEmail.trim()) {
      setError("Add a recipient email.");
      return;
    }
    if (
      directForm.kind === "message" &&
      !directForm.body.trim()
    ) {
      setError("Write a message first.");
      return;
    }
    if (directForm.kind === "task_request" && !directForm.taskTitle.trim()) {
      setError("Add a task title first.");
      return;
    }

    setSaving(true);
    setError("");
    try {
      await sendDirectMessage({
        recipient_email: recipientEmail,
        kind: directForm.kind,
        body: directForm.body,
        task_title: directForm.taskTitle,
        task_description: directForm.taskDescription,
      });
      setRecipientEmail("");
      setDirectForm(DEFAULT_MESSAGE_FORM);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not send message.");
    } finally {
      setSaving(false);
    }
  }

  async function handleSendTeam() {
    if (teamForm.kind === "message" && !teamForm.body.trim()) {
      setError("Write a team message first.");
      return;
    }
    if (teamForm.kind === "task_request" && !teamForm.taskTitle.trim()) {
      setError("Add a team task title first.");
      return;
    }

    setSaving(true);
    setError("");
    try {
      await sendTeamMessage({
        kind: teamForm.kind,
        body: teamForm.body,
        task_title: teamForm.taskTitle,
        task_description: teamForm.taskDescription,
      });
      setTeamForm(DEFAULT_MESSAGE_FORM);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not send team message.");
    } finally {
      setSaving(false);
    }
  }

  if (loading) {
    return (
      <div>
        <div className="mb-6 flex items-center gap-3">
          <MessageSquareText className="h-5 w-5 text-muted-foreground" />
          <h1 className="text-2xl font-bold tracking-tight">Communication</h1>
        </div>
        <div className="grid gap-4 lg:grid-cols-2">
          {Array.from({ length: 4 }).map((_, index) => (
            <Skeleton key={index} className="h-40 rounded-2xl" />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-1">
          <div className="flex items-center gap-3">
            <MessageSquareText className="h-5 w-5 text-muted-foreground" />
            <h1 className="text-2xl font-bold tracking-tight">Communication</h1>
          </div>
          <p className="text-sm text-muted-foreground">
            Lightweight direct messages, direct task requests, and team room updates.
          </p>
        </div>
      </div>

      {error && (
        <p className="rounded-lg bg-destructive/10 px-3 py-2 text-sm text-destructive">
          {error}
        </p>
      )}

      <div className="grid gap-6 xl:grid-cols-[1fr,1fr]">
        <section className="space-y-4 rounded-2xl border border-border/60 bg-card p-4">
          <div className="flex flex-wrap items-center gap-2">
            <Inbox className="h-4 w-4 text-primary" />
            <h2 className="font-semibold">Direct inbox</h2>
            <Badge variant="secondary">{inboxMessages.length} incoming</Badge>
            {openTaskRequests > 0 && <Badge>{openTaskRequests} open requests</Badge>}
            {archivedDirectCount > 0 && <Badge variant="outline">{archivedDirectCount} archived</Badge>}
          </div>

          <div className="space-y-3 rounded-xl border border-border/60 bg-background/60 p-3">
            <Input
              value={recipientEmail}
              onChange={(event) => setRecipientEmail(event.target.value)}
              placeholder="friend@example.com"
              type="email"
            />
            <select
              value={directForm.kind}
              onChange={(event) =>
                setDirectForm((current) => ({
                  ...current,
                  kind: event.target.value as CommunicationKind,
                }))
              }
              className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
            >
              <option value="message">Message</option>
              <option value="task_request">Task request</option>
            </select>
            {directForm.kind === "task_request" && (
              <>
                <Input
                  value={directForm.taskTitle}
                  onChange={(event) =>
                    setDirectForm((current) => ({ ...current, taskTitle: event.target.value }))
                  }
                  placeholder="Task title"
                />
                <Textarea
                  value={directForm.taskDescription}
                  onChange={(event) =>
                    setDirectForm((current) => ({
                      ...current,
                      taskDescription: event.target.value,
                    }))
                  }
                  placeholder="What should they do?"
                />
              </>
            )}
            <Textarea
              value={directForm.body}
              onChange={(event) =>
                setDirectForm((current) => ({ ...current, body: event.target.value }))
              }
              placeholder="Optional note..."
            />
            <Button onClick={() => void handleSendDirect()} disabled={saving}>
              <Send className="h-4 w-4" />
              {saving ? "Sending..." : "Send direct"}
            </Button>
          </div>

          <MessageList
            title="Incoming"
            messages={inboxMessages}
            currentUserId={userId}
            onAcceptDirectTask={acceptDirectTask}
            onDeclineDirectTask={(message) =>
              updateDirectMessageStatus(message.id, "declined", { claimRecipient: true })
            }
            onArchiveDirectMessage={(message) =>
              updateDirectMessageStatus(message.id, "archived")
            }
            onMarkDirectTaskDone={(message) =>
              updateDirectMessageStatus(message.id, "done")
            }
          />
          <MessageList
            title="Sent"
            messages={sentMessages}
            currentUserId={userId}
            onArchiveDirectMessage={(message) =>
              updateDirectMessageStatus(message.id, "archived")
            }
          />
        </section>

        <section className="space-y-4 rounded-2xl border border-border/60 bg-card p-4">
          <div className="flex items-center gap-2">
            <Users2 className="h-4 w-4 text-primary" />
            <h2 className="font-semibold">
              Team room{activeTeam ? ` - ${activeTeam.name}` : ""}
            </h2>
          </div>

          {!activeTeamId ? (
            <EmptyState
              icon={<Users2 className="h-10 w-10" />}
              title="No active team"
              description="Select a team from the workspace switcher to use the team room."
            />
          ) : (
            <>
              <div className="space-y-3 rounded-xl border border-border/60 bg-background/60 p-3">
                <select
                  value={teamForm.kind}
                  onChange={(event) =>
                    setTeamForm((current) => ({
                      ...current,
                      kind: event.target.value as CommunicationKind,
                    }))
                  }
                  className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
                >
                  <option value="message">Message</option>
                  <option value="task_request">Task request</option>
                </select>
                {teamForm.kind === "task_request" && (
                  <>
                    <Input
                      value={teamForm.taskTitle}
                      onChange={(event) =>
                        setTeamForm((current) => ({
                          ...current,
                          taskTitle: event.target.value,
                        }))
                      }
                      placeholder="Task title"
                    />
                    <Textarea
                      value={teamForm.taskDescription}
                      onChange={(event) =>
                        setTeamForm((current) => ({
                          ...current,
                          taskDescription: event.target.value,
                        }))
                      }
                      placeholder="What should the team know?"
                    />
                  </>
                )}
                <Textarea
                  value={teamForm.body}
                  onChange={(event) =>
                    setTeamForm((current) => ({ ...current, body: event.target.value }))
                  }
                  placeholder="Post a team update..."
                />
                <Button onClick={() => void handleSendTeam()} disabled={saving}>
                  <Send className="h-4 w-4" />
                  {saving ? "Posting..." : "Post to team"}
                </Button>
              </div>

              {teamMessages.length === 0 ? (
                <EmptyState
                  icon={<MessageSquareText className="h-10 w-10" />}
                  title="No team messages yet"
                  description="Post the first update or task request for this team."
                />
              ) : (
                <div className="space-y-3">
                  {teamMessages.map((message) => (
                    <TeamMessageCard
                      key={message.id}
                      message={message}
                      onCreateTask={createTaskFromTeamMessage}
                    />
                  ))}
                </div>
              )}
            </>
          )}
        </section>
      </div>
    </div>
  );
}

function MessageList({
  title,
  messages,
  currentUserId,
  onAcceptDirectTask,
  onDeclineDirectTask,
  onArchiveDirectMessage,
  onMarkDirectTaskDone,
}: {
  title: string;
  messages: DirectMessage[];
  currentUserId: string | null;
  onAcceptDirectTask?: (message: DirectMessage) => Promise<unknown>;
  onDeclineDirectTask?: (message: DirectMessage) => Promise<unknown>;
  onArchiveDirectMessage?: (message: DirectMessage) => Promise<unknown>;
  onMarkDirectTaskDone?: (message: DirectMessage) => Promise<unknown>;
}) {
  if (messages.length === 0) {
    return (
      <div className="rounded-xl border border-dashed border-border p-5 text-center">
        <p className="text-sm font-medium">{title}</p>
        <p className="mt-1 text-sm text-muted-foreground">Nothing here yet.</p>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <p className="text-sm font-semibold">{title}</p>
      {messages.map((message) => {
        const incoming = message.sender_id !== currentUserId;
        const canAccept = incoming && message.kind === "task_request" && message.status === "open";
        const canMarkDone =
          incoming &&
          message.kind === "task_request" &&
          (message.status === "accepted" || message.status === "done");
        return (
          <div key={message.id} className="rounded-xl border border-border/60 p-4">
            <div className="flex flex-wrap items-start justify-between gap-3">
              <div>
                <div className="flex flex-wrap items-center gap-2">
                  <p className="font-medium">
                    {message.kind === "task_request" ? message.task_title : "Message"}
                  </p>
                  <Badge variant={message.kind === "task_request" ? "secondary" : "outline"}>
                    {message.kind === "task_request" ? "Task request" : "Message"}
                  </Badge>
                  <Badge variant="outline">{message.status}</Badge>
                </div>
                <p className="mt-1 text-xs text-muted-foreground">
                  {incoming ? "From" : "To"}{" "}
                  {incoming
                    ? message.sender?.full_name || message.sender?.email || "Someone"
                    : message.recipient_email}{" "}
                  - {formatRelativeDate(message.created_at)}
                </p>
              </div>
              {message.created_task_id && (
                <Badge variant="secondary">
                  <CheckCircle2 className="mr-1 h-3 w-3" />
                  Task created
                </Badge>
              )}
            </div>
            {message.body && <p className="mt-3 text-sm">{message.body}</p>}
            {message.task_description && (
              <p className="mt-3 rounded-lg bg-muted/60 p-3 text-sm text-muted-foreground">
                {message.task_description}
              </p>
            )}
            {canAccept && onAcceptDirectTask && onDeclineDirectTask && (
              <div className="mt-3 flex flex-wrap gap-2">
                <Button size="sm" onClick={() => void onAcceptDirectTask(message)}>
                  <Plus className="h-4 w-4" />
                  Create my task
                </Button>
                <Button size="sm" variant="outline" onClick={() => void onDeclineDirectTask(message)}>
                  <XCircle className="h-4 w-4" />
                  Decline
                </Button>
              </div>
            )}
            {!canAccept && (
              <div className="mt-3 flex flex-wrap gap-2">
                {canMarkDone && onMarkDirectTaskDone && message.status !== "done" && (
                  <Button size="sm" variant="outline" onClick={() => void onMarkDirectTaskDone(message)}>
                    <CheckCircle2 className="h-4 w-4" />
                    Mark done
                  </Button>
                )}
                {onArchiveDirectMessage && (
                  <Button size="sm" variant="ghost" onClick={() => void onArchiveDirectMessage(message)}>
                    <Archive className="h-4 w-4" />
                    Archive
                  </Button>
                )}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function TeamMessageCard({
  message,
  onCreateTask,
}: {
  message: TeamMessage;
  onCreateTask: (message: TeamMessage) => Promise<unknown>;
}) {
  return (
    <div className="rounded-xl border border-border/60 p-4">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="flex flex-wrap items-center gap-2">
            <p className="font-medium">
              {message.kind === "task_request" ? message.task_title : "Team update"}
            </p>
            <Badge variant={message.kind === "task_request" ? "secondary" : "outline"}>
              {message.kind === "task_request" ? "Task request" : "Message"}
            </Badge>
          </div>
          <p className="mt-1 text-xs text-muted-foreground">
            {message.sender?.full_name || message.sender?.email || "Team member"} -{" "}
            {formatRelativeDate(message.created_at)}
          </p>
        </div>
        {message.created_task_id && <Badge variant="secondary">Task created</Badge>}
      </div>
      {message.body && <p className="mt-3 text-sm">{message.body}</p>}
      {message.task_description && (
        <p className="mt-3 rounded-lg bg-muted/60 p-3 text-sm text-muted-foreground">
          {message.task_description}
        </p>
      )}
      {message.kind === "task_request" && !message.created_task_id && (
        <div className="mt-3">
          <Button size="sm" variant="outline" onClick={() => void onCreateTask(message)}>
            <Plus className="h-4 w-4" />
            Create team task
          </Button>
        </div>
      )}
    </div>
  );
}