"use client";

/**
 * Mindavio Share Cards
 * ─────────────────────
 * A unified, premium share-card generator for all content types:
 *   • achievement  — trophy/unlock celebration
 *   • focus        — deep-work session recap
 *   • journal      — daily reflection snapshot
 *   • finance      — P&L / revenue summary
 *   • daily        — end-of-day review
 *
 * Usage:
 *   <MindavioShareCard
 *     type="achievement"
 *     data={{ title: "…", … }}
 *     onClose={() => …}
 *   />
 */

import { useRef, useState } from "react";
import { createPortal } from "react-dom";
import { toPng } from "html-to-image";
import {
  BookOpen,
  Download,
  Flame,
  LineChart,
  Send,
  Share2,
  Sparkles,
  Trophy,
  X,
  Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";

/* ── Types ────────────────────────────────────────────────────────────────── */

export type ShareCardType = "achievement" | "focus" | "journal" | "finance" | "daily";

export interface AchievementCardData {
  type: "achievement";
  icon: string;
  title: string;
  category: string;
  description?: string | null;
  rewardTitle?: string | null;
  completedAt?: string | null;
}

export interface FocusCardData {
  type: "focus";
  sessionLabel?: string;
  workDuration: number;       // ms
  breakDuration?: number;     // ms
  completedTaskCount: number;
  mood?: string | null;
  topTask?: string | null;
  date?: string;
}

export interface JournalCardData {
  type: "journal";
  date: string;
  mood?: string | null;
  excerpt?: string | null;   // max ~120 chars, shown as quote
  wordCount?: number;
  tags?: string[];
}

export interface FinanceCardData {
  type: "finance";
  period: string;            // e.g. "April 2026"
  revenue: number;
  expenses: number;
  currency?: string;         // default "€"
  highlight?: string | null; // e.g. "Best month so far!"
}

export interface DailyCardData {
  type: "daily";
  date: string;
  completedTasks: number;
  focusMinutes: number;
  mood?: string | null;
  reflection?: string | null;
  streak?: number;
}

export type ShareCardData =
  | AchievementCardData
  | FocusCardData
  | JournalCardData
  | FinanceCardData
  | DailyCardData;

/* ── Color config per type ────────────────────────────────────────────────── */

const TYPE_CFG = {
  achievement: {
    gradient: "linear-gradient(145deg, #1c1508 0%, #1a1025 45%, #0a0a0d 100%)",
    accent:   "#f59e0b",
    accentRgb:"245,158,11",
    dimmed:   "rgba(245,158,11,0.55)",
    icon:     <Trophy className="w-5 h-5" />,
    label:    "Achievement",
    buttonBg: "rgba(245,158,11,0.15)",
    buttonBorder:"rgba(245,158,11,0.30)",
    buttonText: "#fbbf24",
  },
  focus: {
    gradient: "linear-gradient(145deg, #080e1a 0%, #0c1025 45%, #0a0a0d 100%)",
    accent:   "#6d28d9",
    accentRgb:"109,40,217",
    dimmed:   "rgba(109,40,217,0.55)",
    icon:     <Zap className="w-5 h-5" />,
    label:    "Focus Session",
    buttonBg: "rgba(109,40,217,0.15)",
    buttonBorder:"rgba(109,40,217,0.30)",
    buttonText: "#a78bfa",
  },
  journal: {
    gradient: "linear-gradient(145deg, #091410 0%, #0c1820 45%, #0a0a0d 100%)",
    accent:   "#0ea5e9",
    accentRgb:"14,165,233",
    dimmed:   "rgba(14,165,233,0.55)",
    icon:     <BookOpen className="w-5 h-5" />,
    label:    "Journal",
    buttonBg: "rgba(14,165,233,0.15)",
    buttonBorder:"rgba(14,165,233,0.30)",
    buttonText: "#7dd3fc",
  },
  finance: {
    gradient: "linear-gradient(145deg, #0a1208 0%, #0e1520 45%, #0a0a0d 100%)",
    accent:   "#10b981",
    accentRgb:"16,185,129",
    dimmed:   "rgba(16,185,129,0.55)",
    icon:     <LineChart className="w-5 h-5" />,
    label:    "Finance",
    buttonBg: "rgba(16,185,129,0.15)",
    buttonBorder:"rgba(16,185,129,0.30)",
    buttonText: "#6ee7b7",
  },
  daily: {
    gradient: "linear-gradient(145deg, #0f0a18 0%, #10121f 45%, #0a0a0d 100%)",
    accent:   "#f97316",
    accentRgb:"249,115,22",
    dimmed:   "rgba(249,115,22,0.55)",
    icon:     <Flame className="w-5 h-5" />,
    label:    "Daily Review",
    buttonBg: "rgba(249,115,22,0.15)",
    buttonBorder:"rgba(249,115,22,0.30)",
    buttonText: "#fdba74",
  },
} as const;

/* ── Helpers ──────────────────────────────────────────────────────────────── */

function fmtMs(ms: number): string {
  const h = Math.floor(ms / 3_600_000);
  const m = Math.floor((ms % 3_600_000) / 60_000);
  if (h > 0) return `${h}h ${m}m`;
  return `${m}m`;
}

function fmtCurrency(n: number, currency = "€"): string {
  return `${n < 0 ? "-" : ""}${currency}${Math.abs(n).toLocaleString("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function fmtDate(d?: string | null): string {
  if (!d) return "";
  return new Date(d).toLocaleDateString("de-DE", { day: "2-digit", month: "short", year: "numeric" });
}

/* ── Card renderers (inline styles — safe for html-to-image) ─────────────── */

function CardShell({
  cfg,
  children,
}: {
  cfg: typeof TYPE_CFG[ShareCardType];
  children: React.ReactNode;
}) {
  return (
    <div style={{
      fontFamily: "system-ui, -apple-system, sans-serif",
      background: cfg.gradient,
      borderRadius: 20,
      padding: 28,
      width: 380,
      minHeight: 220,
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Background glow */}
      <div style={{
        position: "absolute", top: -60, left: -60,
        width: 200, height: 200, borderRadius: "50%",
        background: `radial-gradient(circle, rgba(${cfg.accentRgb},0.18), transparent 70%)`,
        pointerEvents: "none",
      }} />

      {/* Top: brand bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{
            width: 26, height: 26, borderRadius: 8,
            background: "linear-gradient(135deg,#7c3aed,#4f46e5)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 12,
          }}>
            ⚡
          </div>
          <span style={{ color: "rgba(255,255,255,0.35)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase" }}>
            Mindavio
          </span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 5, color: cfg.dimmed, fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase" }}>
          <span style={{ color: cfg.accent, fontSize: 9 }}>●</span>
          {cfg.label}
        </div>
      </div>

      {children}

      {/* Bottom gold rule */}
      <div style={{ height: 2, borderRadius: 1, marginTop: 20, background: `linear-gradient(90deg, ${cfg.accent}, transparent)` }} />
    </div>
  );
}

function AchievementCard({ data }: { data: AchievementCardData }) {
  const cfg = TYPE_CFG.achievement;
  return (
    <CardShell cfg={cfg}>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
        <div style={{
          width: 60, height: 60, borderRadius: 16,
          background: "rgba(245,158,11,0.12)",
          border: "1.5px solid rgba(245,158,11,0.28)",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 30,
        }}>
          {data.icon}
        </div>
        <div>
          <div style={{ color: "rgba(255,255,255,0.30)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 4 }}>
            {data.category}
          </div>
          <div style={{ color: "white", fontSize: 18, fontWeight: 700, lineHeight: 1.2 }}>
            {data.title}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 4 }}>
            <span style={{ color: "#fbbf24", fontSize: 11, fontWeight: 700 }}>🏆 Achievement Unlocked</span>
          </div>
        </div>
      </div>
      {data.description && (
        <div style={{ color: "rgba(255,255,255,0.42)", fontSize: 12, lineHeight: 1.6, marginBottom: 14 }}>
          {data.description}
        </div>
      )}
      {data.rewardTitle && (
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          background: "rgba(245,158,11,0.08)", border: "1px solid rgba(245,158,11,0.18)",
          borderRadius: 8, padding: "5px 10px",
        }}>
          <span style={{ fontSize: 11 }}>🎁</span>
          <span style={{ color: "rgba(251,191,36,0.8)", fontSize: 11 }}>{data.rewardTitle}</span>
        </div>
      )}
      {data.completedAt && (
        <div style={{ color: "rgba(255,255,255,0.25)", fontSize: 11, marginTop: 10 }}>
          Unlocked {fmtDate(data.completedAt)}
        </div>
      )}
    </CardShell>
  );
}

function FocusCard({ data }: { data: FocusCardData }) {
  const cfg = TYPE_CFG.focus;
  return (
    <CardShell cfg={cfg}>
      <div style={{ marginBottom: 18 }}>
        <div style={{ color: "rgba(255,255,255,0.28)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 6 }}>
          {data.sessionLabel || data.date || "Focus Session"}
        </div>
        <div style={{ color: "white", fontSize: 22, fontWeight: 800 }}>
          {fmtMs(data.workDuration)}
        </div>
        <div style={{ color: "rgba(167,139,250,0.6)", fontSize: 11, marginTop: 2 }}>deep work</div>
      </div>
      <div style={{ display: "flex", gap: 12 }}>
        <StatPill label="Tasks done" value={String(data.completedTaskCount)} accent={cfg.accent} />
        {data.breakDuration !== undefined && (
          <StatPill label="Break" value={fmtMs(data.breakDuration)} accent={cfg.accent} />
        )}
        {data.mood && (
          <StatPill label="Mood" value={data.mood} accent={cfg.accent} />
        )}
      </div>
      {data.topTask && (
        <div style={{ marginTop: 14, color: "rgba(255,255,255,0.38)", fontSize: 12, lineHeight: 1.5 }}>
          <span style={{ color: "rgba(167,139,250,0.5)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.08em" }}>Top task · </span>
          {data.topTask}
        </div>
      )}
    </CardShell>
  );
}

function JournalCard({ data }: { data: JournalCardData }) {
  const cfg = TYPE_CFG.journal;
  return (
    <CardShell cfg={cfg}>
      <div style={{ marginBottom: 16 }}>
        <div style={{ color: "rgba(255,255,255,0.28)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 6 }}>
          {fmtDate(data.date)}
        </div>
        {data.mood && (
          <div style={{ fontSize: 28, marginBottom: 10 }}>{data.mood}</div>
        )}
      </div>
      {data.excerpt && (
        <div style={{
          borderLeft: `2px solid rgba(${cfg.accentRgb},0.35)`,
          paddingLeft: 12, marginBottom: 14,
          color: "rgba(255,255,255,0.58)", fontSize: 13, lineHeight: 1.65,
          fontStyle: "italic",
        }}>
          &quot;{data.excerpt.slice(0, 120)}{data.excerpt.length > 120 ? "…" : ""}&quot;
        </div>
      )}
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
        {data.wordCount !== undefined && (
          <StatPill label="Words" value={String(data.wordCount)} accent={cfg.accent} />
        )}
        {data.tags?.slice(0, 3).map(tag => (
          <div key={tag} style={{
            background: `rgba(${cfg.accentRgb},0.08)`,
            border: `1px solid rgba(${cfg.accentRgb},0.20)`,
            borderRadius: 6, padding: "4px 8px",
            color: `rgba(${cfg.accentRgb},0.75)`, fontSize: 10,
          }}>#{tag}</div>
        ))}
      </div>
    </CardShell>
  );
}

function FinanceCard({ data }: { data: FinanceCardData }) {
  const cfg = TYPE_CFG.finance;
  const profit = data.revenue - data.expenses;
  const margin = data.revenue > 0 ? (profit / data.revenue * 100) : 0;
  const isProfit = profit >= 0;
  return (
    <CardShell cfg={cfg}>
      <div style={{ marginBottom: 18 }}>
        <div style={{ color: "rgba(255,255,255,0.28)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 6 }}>
          {data.period}
        </div>
        <div style={{ color: isProfit ? "#6ee7b7" : "#fca5a5", fontSize: 24, fontWeight: 800 }}>
          {isProfit ? "+" : ""}{fmtCurrency(profit, data.currency)}
        </div>
        <div style={{ color: "rgba(255,255,255,0.25)", fontSize: 11, marginTop: 2 }}>
          {margin >= 0 ? "+" : ""}{margin.toFixed(1)}% Marge
        </div>
      </div>
      <div style={{ display: "flex", gap: 12 }}>
        <StatPill label="Umsatz" value={fmtCurrency(data.revenue, data.currency)} accent={cfg.accent} />
        <StatPill label="Kosten" value={fmtCurrency(data.expenses, data.currency)} accent="rgba(252,165,165,0.7)" />
      </div>
      {data.highlight && (
        <div style={{ marginTop: 14, color: "rgba(255,255,255,0.42)", fontSize: 12 }}>
          ✨ {data.highlight}
        </div>
      )}
    </CardShell>
  );
}

function DailyCard({ data }: { data: DailyCardData }) {
  const cfg = TYPE_CFG.daily;
  return (
    <CardShell cfg={cfg}>
      <div style={{ marginBottom: 16 }}>
        <div style={{ color: "rgba(255,255,255,0.28)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 6 }}>
          Daily Review · {fmtDate(data.date)}
        </div>
        {data.mood && (
          <div style={{ fontSize: 26, marginBottom: 8 }}>{data.mood}</div>
        )}
      </div>
      <div style={{ display: "flex", gap: 10, marginBottom: 14, flexWrap: "wrap" }}>
        <StatPill label="Tasks" value={String(data.completedTasks)} accent={cfg.accent} />
        <StatPill label="Focus" value={`${data.focusMinutes}m`} accent={cfg.accent} />
        {data.streak !== undefined && data.streak > 0 && (
          <StatPill label="Streak" value={`${data.streak}d 🔥`} accent={cfg.accent} />
        )}
      </div>
      {data.reflection && (
        <div style={{
          borderLeft: `2px solid rgba(${cfg.accentRgb},0.35)`,
          paddingLeft: 12,
          color: "rgba(255,255,255,0.50)", fontSize: 12, lineHeight: 1.6,
          fontStyle: "italic",
        }}>
          &quot;{data.reflection.slice(0, 100)}{data.reflection.length > 100 ? "…" : ""}&quot;
        </div>
      )}
    </CardShell>
  );
}

function StatPill({ label, value, accent }: { label: string; value: string; accent: string }) {
  return (
    <div style={{
      background: "rgba(255,255,255,0.04)",
      border: "1px solid rgba(255,255,255,0.07)",
      borderRadius: 10, padding: "8px 12px",
    }}>
      <div style={{ color: "rgba(255,255,255,0.28)", fontSize: 9, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 2 }}>{label}</div>
      <div style={{ color: accent, fontSize: 14, fontWeight: 700 }}>{value}</div>
    </div>
  );
}

/* ── Main modal ───────────────────────────────────────────────────────────── */

interface MindavioShareCardProps {
  data: ShareCardData;
  onClose: () => void;
  /** Optional: called with the PNG data URL when user clicks "An Chat senden" */
  onSendToChat?: (dataUrl: string, label: string) => void;
}

export function MindavioShareCard({ data, onClose, onSendToChat }: MindavioShareCardProps) {
  const cardRef  = useRef<HTMLDivElement>(null);
  const [status, setStatus] = useState<"idle" | "exporting" | "done" | "error">("idle");
  const cfg      = TYPE_CFG[data.type];

  async function captureCard(): Promise<string | null> {
    if (!cardRef.current) return null;
    setStatus("exporting");
    try {
      const url = await toPng(cardRef.current, { pixelRatio: 2 });
      setStatus("done");
      return url;
    } catch {
      setStatus("error");
      return null;
    }
  }

  async function handleDownload() {
    const url = await captureCard();
    if (!url) return;
    const a = document.createElement("a");
    a.href = url;
    a.download = `mindavio-${data.type}-${Date.now()}.png`;
    a.click();
  }

  async function handleSendToChat() {
    const url = await captureCard();
    if (!url || !onSendToChat) return;
    const labelMap: Record<ShareCardType, string> = {
      achievement: "Achievement",
      focus:       "Focus Session",
      journal:     "Journal",
      finance:     "Finance",
      daily:       "Daily Review",
    };
    onSendToChat(url, labelMap[data.type]);
    onClose();
  }

  function renderCard() {
    switch (data.type) {
      case "achievement": return <AchievementCard data={data} />;
      case "focus":       return <FocusCard data={data} />;
      case "journal":     return <JournalCard data={data} />;
      case "finance":     return <FinanceCard data={data} />;
      case "daily":       return <DailyCard data={data} />;
    }
  }

  const statusLabel = status === "exporting" ? "Generating…" : status === "done" ? "Saved!" : status === "error" ? "Error" : null;

  return createPortal(
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4"
      style={{ background: "rgba(0,0,0,0.85)" }}
      onClick={(e) => e.target === e.currentTarget && onClose()}>

      <div className="flex flex-col gap-4 w-full max-w-sm">

        {/* Header */}
        <div className="flex items-center justify-between px-1">
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-[8px] flex items-center justify-center"
              style={{ background: `rgba(${cfg.accentRgb},0.15)`, border: `1px solid rgba(${cfg.accentRgb},0.25)`, color: cfg.accent }}>
              {cfg.icon}
            </div>
            <span className="text-white/60 text-sm font-medium">{cfg.label} Card</span>
          </div>
          <button onClick={onClose}
            className="w-7 h-7 rounded-lg border border-white/[0.07] bg-white/[0.04] flex items-center justify-center text-white/40 hover:text-white/70 transition-colors">
            <X className="w-3.5 h-3.5" />
          </button>
        </div>

        {/* Card preview */}
        <div ref={cardRef} className="rounded-[20px] overflow-hidden">
          {renderCard()}
        </div>

        {/* Status indicator */}
        {statusLabel && (
          <p className="text-center text-xs" style={{ color: cfg.dimmed }}>{statusLabel}</p>
        )}

        {/* Actions */}
        <div className="flex gap-2">
          <button onClick={handleDownload}
            disabled={status === "exporting"}
            className="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[12px] text-sm font-medium transition-all disabled:opacity-50"
            style={{ background: cfg.buttonBg, border: `1px solid ${cfg.buttonBorder}`, color: cfg.buttonText }}>
            <Download className="w-4 h-4" />
            PNG
          </button>

          {onSendToChat && (
            <button onClick={handleSendToChat}
              disabled={status === "exporting"}
              className="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[12px] border border-white/[0.08] bg-white/[0.04] text-white/60 text-sm font-medium hover:bg-white/[0.08] transition-all disabled:opacity-50">
              <Send className="w-4 h-4" />
              An Chat
            </button>
          )}

          {/* Native share if available */}
          {typeof navigator !== "undefined" && "share" in navigator && (
            <button
              onClick={async () => {
                const url = await captureCard();
                if (!url) return;
                const res = await fetch(url);
                const blob = await res.blob();
                const file = new File([blob], `mindavio-${data.type}.png`, { type: "image/png" });
                navigator.share({ files: [file], title: "Mindavio", text: cfg.label }).catch(() => {});
              }}
              disabled={status === "exporting"}
              className="w-10 flex items-center justify-center rounded-[12px] border border-white/[0.08] bg-white/[0.04] text-white/40 hover:text-white/70 transition-all disabled:opacity-50">
              <Share2 className="w-4 h-4" />
            </button>
          )}
        </div>
      </div>
    </div>,
    document.body,
  );
}

/* ── Trigger button ───────────────────────────────────────────────────────── */

interface ShareCardButtonProps {
  data: ShareCardData;
  onSendToChat?: (dataUrl: string, label: string) => void;
  className?: string;
  children?: React.ReactNode;
  variant?: "icon" | "pill" | "full";
}

/**
 * Convenience trigger — renders a button that opens the share card modal on click.
 *
 * <ShareCardButton data={{ type: "achievement", … }} variant="pill" />
 */
export function ShareCardButton({
  className,
  children,
  data,
  onSendToChat,
  variant = "icon",
}: ShareCardButtonProps) {
  const [open, setOpen] = useState(false);
  const variantClass = {
    icon: "w-8 h-8 rounded-lg border border-white/[0.08] bg-white/[0.04] flex items-center justify-center text-white/40 hover:text-white/70 transition-all",
    pill: cn(
      "inline-flex items-center gap-2 px-3.5 py-1.5 rounded-[10px] text-xs font-medium border transition-all",
      "border-white/[0.08] bg-white/[0.03] text-white/50 hover:text-white/70 hover:bg-white/[0.06]",
    ),
    full: cn(
      "w-full flex items-center justify-center gap-2 py-2.5 rounded-[12px] border text-sm font-medium transition-all",
      "border-white/[0.08] bg-white/[0.04] text-white/55 hover:bg-white/[0.08]",
    ),
  };

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className={cn(variantClass[variant], className)}
        title="Share Card">
        {children ?? (
          <>
            <Sparkles className="w-3.5 h-3.5" />
            {variant !== "icon" && "Share Card"}
          </>
        )}
      </button>

      {open && (
        <MindavioShareCard
          data={data}
          onClose={() => setOpen(false)}
          onSendToChat={onSendToChat}
        />
      )}
    </>
  );
}

/* ── Re-export convenience ────────────────────────────────────────────────── */

export type { ShareCardType as MindavioShareCardType };