"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import {
  CalendarDays,
  CheckCircle2,
  ChevronLeft,
  Clock,
  Sparkles,
  Target,
  Zap,
} from "lucide-react";
import { FocusReviewExport } from "@/components/focus/focus-review-export";
import { dataUrlToFile } from "@/components/reviews/review-share-studio";
import { ShareToChatModal, type ChatSharePayload } from "@/components/chat/share-to-chat-modal";
import { ShareCardButton } from "@/components/shared/mindavio-share-card";
import { createClient } from "@/lib/supabase/client";
import { fmtDelta, fmtMs, useFocusStore } from "@/stores/focus-store";
import type { CalendarEvent, Task } from "@/types";

export default function FocusReviewPage() {
  const router = useRouter();
  const supabase = createClient();
  const focusReviewHistory = useFocusStore((state) => state.focusReviewHistory);
  const lastFocusReview = useFocusStore((state) => state.lastFocusReview);
  const selectedFocusReviewId = useFocusStore((state) => state.selectedFocusReviewId);
  const clearFocusReview = useFocusStore((state) => state.clearFocusReview);
  const review = useMemo(() => {
    if (selectedFocusReviewId) {
      return (
        focusReviewHistory.find((item) => item.id === selectedFocusReviewId) ??
        lastFocusReview
      );
    }

    return lastFocusReview ?? focusReviewHistory[0] ?? null;
  }, [focusReviewHistory, lastFocusReview, selectedFocusReviewId]);

  const [events, setEvents] = useState<CalendarEvent[]>([]);
  const [remainingTasks, setRemainingTasks] = useState<Task[]>([]);
  const [loading, setLoading] = useState(true);
  const [shareCardPayload, setShareCardPayload] = useState<{
    dataUrl: string;
    label: string;
  } | null>(null);

  const loadReviewContext = useCallback(async () => {
    if (!review) return;

    setLoading(true);

    const sessionStartIso = new Date(review.startedAt ?? review.endedAt).toISOString();
    const sessionEndIso = new Date(review.endedAt).toISOString();

    const eventsQuery = review.activeTeamId
      ? supabase
          .from("events")
          .select("*")
          .eq("team_id", review.activeTeamId)
          .gte("start_time", sessionStartIso)
          .lte("start_time", sessionEndIso)
          .order("start_time")
      : supabase
          .from("events")
          .select("*")
          .is("team_id", null)
          .gte("start_time", sessionStartIso)
          .lte("start_time", sessionEndIso)
          .order("start_time");

    const tasksQuery = review.activeTeamId
      ? supabase
          .from("tasks")
          .select("*")
          .eq("team_id", review.activeTeamId)
          .in("status", ["todo", "in_progress"])
          .order("is_focus", { ascending: false })
          .order("focus_order")
          .order("deadline", { ascending: true, nullsFirst: false })
          .limit(5)
      : supabase
          .from("tasks")
          .select("*")
          .is("team_id", null)
          .in("status", ["todo", "in_progress"])
          .order("is_focus", { ascending: false })
          .order("focus_order")
          .order("deadline", { ascending: true, nullsFirst: false })
          .limit(5);

    const [{ data: eventsData }, { data: tasksData }] = await Promise.all([
      eventsQuery,
      tasksQuery,
    ]);

    setEvents((eventsData as CalendarEvent[]) || []);
    setRemainingTasks((tasksData as Task[]) || []);
    setLoading(false);
  }, [review, supabase]);

  useEffect(() => {
    const timer = window.setTimeout(() => {
      void loadReviewContext();
    }, 0);

    return () => window.clearTimeout(timer);
  }, [loadReviewContext]);

  const avgTaskTime = useMemo(() => {
    if (!review || review.completedTasks.length === 0) return 0;
    return review.workDuration / review.completedTasks.length;
  }, [review]);

  const longestTask = useMemo(() => {
    if (!review || review.completedTasks.length === 0) return null;
    return review.completedTasks.reduce((currentLongest, task) =>
      task.delta > currentLongest.delta ? task : currentLongest,
    );
  }, [review]);

  function handleBackToFocus() {
    clearFocusReview();
    router.push("/focus");
  }

  function handleCloseToWorkspace() {
    clearFocusReview();
    router.push("/");
  }

  const buildShareCardPayload = useCallback(async (): Promise<ChatSharePayload> => {
    if (!review || !shareCardPayload) {
      throw new Error("Die Share Card ist noch nicht bereit.");
    }

    const dateKey = new Date(review.endedAt).toISOString().split("T")[0];
    return {
      files: [
        dataUrlToFile(
          shareCardPayload.dataUrl,
          `Mindavio-${shareCardPayload.label.replace(/\s+/g, "-")}-${dateKey}.png`,
        ),
      ],
      message: `Hier ist mein ${shareCardPayload.label} aus Mindavio.`,
    };
  }, [review, shareCardPayload]);

  if (!review) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-[#06060a] px-6 text-white">
        <div className="max-w-md rounded-[28px] border border-white/[0.08] bg-white/[0.03] p-8 text-center shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-violet-500/15">
            <Target className="h-6 w-6 text-violet-300" />
          </div>
          <h1 className="mt-5 text-[24px] font-bold tracking-tight text-white">
            Kein Focus Review verfügbar
          </h1>
          <p className="mt-2 text-[14px] leading-relaxed text-white/45">
            Schließe zuerst eine Fokus-Session ab, dann erscheint hier deine Review.
          </p>
          <button
            onClick={() => router.push("/focus")}
            className="mt-6 inline-flex items-center gap-2 rounded-xl bg-violet-500 px-4 py-3 text-[13px] font-semibold text-white transition-colors hover:bg-violet-400"
          >
            <Target className="h-4 w-4" />
            Zum Focus Center
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top,#2d1d49_0%,#0b0a12_42%,#06060a_100%)] text-white">
      <div className="mx-auto flex w-full max-w-[1480px] flex-col px-5 py-5 md:px-8 md:py-8">
        <div className="mb-6 flex flex-col gap-4 rounded-[28px] border border-[#decfff]/15 bg-[#0f0d17]/82 p-5 shadow-[0_30px_80px_rgba(0,0,0,0.48)] backdrop-blur-xl md:flex-row md:items-center md:justify-between">
          <div className="flex items-start gap-4">
            <button
              onClick={handleBackToFocus}
              className="mt-0.5 flex h-10 w-10 items-center justify-center rounded-2xl border border-white/[0.08] bg-white/[0.03] text-white/50 transition-all hover:bg-white/[0.06] hover:text-white"
            >
              <ChevronLeft className="h-5 w-5" />
            </button>

            <div>
              <div className="flex items-center gap-3">
                <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#eadcff]/14">
                  <Sparkles className="h-5 w-5 text-[#eddfff]" />
                </div>
                <div>
                  <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-[#d7baff]/70">
                    Focus Review
                  </p>
                  <h1 className="mt-1 text-[28px] font-bold tracking-tight text-white">
                    Deine Session auf einen Blick
                  </h1>
                </div>
              </div>
              <p className="mt-3 max-w-2xl text-[14px] leading-relaxed text-white/45">
                Alles Wichtige aus deiner Fokus-Session in einer Review, die du direkt exportieren oder im Chat teilen kannst.
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <ShareCardButton
              variant="pill"
              onSendToChat={(dataUrl, label) => setShareCardPayload({ dataUrl, label })}
              data={{
                type: "focus",
                workDuration: review.workDuration,
                breakDuration: review.workDuration > review.focusDuration
                  ? review.workDuration - review.focusDuration
                  : undefined,
                completedTaskCount: review.completedTasks.length,
                topTask: review.completedTasks[0]?.taskTitle ?? null,
                date: new Date(review.endedAt).toLocaleDateString("de-DE"),
              }}
            />
            <button
              onClick={handleCloseToWorkspace}
              className="rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-2.5 text-[12px] font-semibold text-white transition-all hover:bg-white/[0.08]"
            >
              Zurück zum Workspace
            </button>
          </div>
        </div>

        <div className="mb-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          <ReviewMetric
            icon={<CheckCircle2 className="h-4 w-4 text-emerald-300" />}
            label="Erledigte Tasks"
            value={String(review.completedTasks.length)}
            hint={review.completedTasks.length > 0 ? `Ø ${fmtDelta(avgTaskTime)} pro Task` : "Noch keine Abschlusszeiten"}
          />
          <ReviewMetric
            icon={<Clock className="h-4 w-4 text-sky-300" />}
            label="Arbeitszeit"
            value={fmtMs(review.workDuration)}
            hint={`Im Fokus ${fmtDelta(review.focusDuration)}`}
          />
          <ReviewMetric
            icon={<CalendarDays className="h-4 w-4 text-violet-300" />}
            label="Termine in Session"
            value={loading ? "…" : String(events.length)}
            hint={events.length > 0 ? `${events[0]?.title ?? ""}` : "Keine Session-Termine"}
          />
          <ReviewMetric
            icon={<Zap className="h-4 w-4 text-amber-300" />}
            label="Längste Task"
            value={longestTask ? fmtDelta(longestTask.delta) : "—"}
            hint={longestTask?.taskTitle || "Keine erledigte Task"}
          />
        </div>

        <div className="mb-6 grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
          <div className="rounded-[28px] border border-white/[0.08] bg-[#0f0d17]/84 p-5 shadow-[0_18px_60px_rgba(0,0,0,0.35)]">
            <div className="mb-4 flex items-center gap-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-500/10">
                <CheckCircle2 className="h-4 w-4 text-emerald-300" />
              </div>
              <div>
                <h2 className="text-sm font-semibold text-white">Task Timeline</h2>
                <p className="text-xs text-white/35">
                  Welche Tasks du abgeschlossen hast und wie lange sie gebraucht haben
                </p>
              </div>
            </div>

            <div className="space-y-3">
              {review.completedTasks.length === 0 ? (
                <div className="rounded-2xl border border-dashed border-white/[0.08] bg-white/[0.02] px-4 py-8 text-center text-sm text-white/30">
                  Keine erledigten Tasks in dieser Session.
                </div>
              ) : (
                review.completedTasks.map((task, index) => (
                  <div
                    key={`${task.taskId}-${task.completedAt}`}
                    className="flex items-center justify-between gap-4 rounded-2xl border border-white/[0.05] bg-white/[0.02] px-4 py-4"
                  >
                    <div className="min-w-0">
                      <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-white/20">
                        Task {index + 1}
                      </p>
                      <p className="mt-1 truncate text-[14px] font-medium text-white/85">
                        {task.taskTitle}
                      </p>
                      <p className="mt-1 text-[11px] text-white/30">
                        Fertig um{" "}
                        {new Date(task.completedAt).toLocaleTimeString("de-DE", {
                          hour: "2-digit",
                          minute: "2-digit",
                        })}
                      </p>
                    </div>
                    <div className="shrink-0 text-right">
                      <p className="text-[18px] font-bold text-emerald-300">
                        {fmtDelta(task.delta)}
                      </p>
                      <p className="text-[10px] uppercase tracking-[0.16em] text-white/20">
                        Bearbeitet
                      </p>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>

          <div className="space-y-6">
            <ReviewPanel
              icon={<CalendarDays className="h-4 w-4 text-violet-300" />}
              title="Termine"
              subtitle="Welche Termine in deine Session gefallen sind"
            >
              {loading ? (
                <div className="rounded-2xl bg-white/[0.02] px-4 py-8 text-center text-sm text-white/25">
                  Lädt...
                </div>
              ) : events.length === 0 ? (
                <div className="rounded-2xl bg-white/[0.02] px-4 py-8 text-center text-sm text-white/30">
                  Keine Termine während dieser Session.
                </div>
              ) : (
                <div className="space-y-2">
                  {events.map((event) => (
                    <div
                      key={event.id}
                      className="flex items-center justify-between gap-3 rounded-2xl bg-white/[0.02] px-4 py-3"
                    >
                      <div className="min-w-0">
                        <p className="truncate text-sm font-medium text-white/85">
                          {event.title}
                        </p>
                        <p className="text-[11px] text-white/30">
                          {new Date(event.start_time).toLocaleDateString("de-DE", {
                            day: "2-digit",
                            month: "short",
                          })}
                        </p>
                      </div>
                      <span className="shrink-0 text-[11px] font-medium text-white/45">
                        {new Date(event.start_time).toLocaleTimeString("de-DE", {
                          hour: "2-digit",
                          minute: "2-digit",
                        })}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </ReviewPanel>

            <ReviewPanel
              icon={<Target className="h-4 w-4 text-sky-300" />}
              title="Nächste Fokuspunkte"
              subtitle="Was nach dieser Session noch offen ist"
            >
              {loading ? (
                <div className="rounded-2xl bg-white/[0.02] px-4 py-8 text-center text-sm text-white/25">
                  Lädt...
                </div>
              ) : remainingTasks.length === 0 ? (
                <div className="rounded-2xl bg-white/[0.02] px-4 py-8 text-center text-sm text-white/30">
                  Keine offenen Fokuspunkte mehr.
                </div>
              ) : (
                <div className="space-y-2">
                  {remainingTasks.map((task) => (
                    <div
                      key={task.id}
                      className="rounded-2xl bg-white/[0.02] px-4 py-3"
                    >
                      <p className="truncate text-sm font-medium text-white/80">
                        {task.title}
                      </p>
                      {task.deadline && (
                        <p className="mt-1 text-[11px] text-white/30">
                          Fällig{" "}
                          {new Date(task.deadline).toLocaleDateString("de-DE", {
                            day: "2-digit",
                            month: "short",
                          })}
                        </p>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </ReviewPanel>
          </div>
        </div>

        <FocusReviewExport
          review={review}
          events={events}
          remainingTasks={remainingTasks}
        />

        {shareCardPayload && (
          <ShareToChatModal
            open={Boolean(shareCardPayload)}
            onClose={() => setShareCardPayload(null)}
            buildPayload={buildShareCardPayload}
            defaultMessage={`Hier ist mein ${shareCardPayload.label} aus Mindavio.`}
            description="Wähle einen Chat und sende deine Focus Share Card als PNG."
            title="Focus Share Card an Chat senden"
          />
        )}
      </div>
    </div>
  );
}

function ReviewMetric({
  hint,
  icon,
  label,
  value,
}: {
  hint: string;
  icon: React.ReactNode;
  label: string;
  value: string;
}) {
  return (
    <div className="rounded-[24px] border border-white/[0.08] bg-[#0f0d17]/84 p-5 shadow-[0_18px_60px_rgba(0,0,0,0.35)]">
      <div className="flex items-center gap-3">
        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/[0.04]">
          {icon}
        </div>
        <div>
          <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-white/22">
            {label}
          </p>
          <p className="mt-1 text-[24px] font-bold tracking-tight text-white">
            {value}
          </p>
        </div>
      </div>
      <p className="mt-3 text-[12px] text-white/35">{hint}</p>
    </div>
  );
}

function ReviewPanel({
  children,
  icon,
  subtitle,
  title,
}: {
  children: React.ReactNode;
  icon: React.ReactNode;
  subtitle: string;
  title: string;
}) {
  return (
    <div className="rounded-[28px] border border-white/[0.08] bg-[#0f0d17]/84 p-5 shadow-[0_18px_60px_rgba(0,0,0,0.35)]">
      <div className="mb-4 flex items-center gap-3">
        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/[0.04]">
          {icon}
        </div>
        <div>
          <h2 className="text-sm font-semibold text-white">{title}</h2>
          <p className="text-xs text-white/35">{subtitle}</p>
        </div>
      </div>
      {children}
    </div>
  );
}