"use client";

import Link from "next/link";
import { BookOpen, ArrowRight, PenLine } from "lucide-react";

interface JournalTodayProps {
  hasEntry: boolean;
  mood?: string | null;
  preview?: string;
}

const MOOD_EMOJI: Record<string, string> = {
  great: "\ud83e\udd29",
  good: "\ud83d\ude0a",
  neutral: "\ud83d\ude10",
  bad: "\ud83d\ude1e",
  terrible: "\ud83d\ude22",
};

const MOOD_LABEL: Record<string, string> = {
  great: "Super",
  good: "Gut",
  neutral: "Okay",
  bad: "Schlecht",
  terrible: "Mies",
};

const MOOD_COLOR: Record<string, string> = {
  great: "#10b981",
  good: "#22c55e",
  neutral: "#eab308",
  bad: "#f97316",
  terrible: "#ef4444",
};

export function JournalToday({ hasEntry, mood, preview }: JournalTodayProps) {
  return (
    <div className="group/widget rounded-2xl border border-border/50 bg-card overflow-hidden transition-all duration-200 hover:border-cyan-500/20 hover:shadow-[0_0_30px_-10px_rgba(6,182,212,0.1)]">
      {/* Header */}
      <div className="flex items-center justify-between px-5 py-4">
        <div className="flex items-center gap-3">
          <div className="flex items-center justify-center w-8 h-8 rounded-xl bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 ring-1 ring-cyan-500/10">
            <BookOpen className="h-4 w-4 text-cyan-500" />
          </div>
          <div>
            <h2 className="text-sm font-semibold tracking-tight">Journal</h2>
            <p className="text-[10px] text-muted-foreground">
              {hasEntry ? "Eintrag vorhanden" : "Noch kein Eintrag"}
            </p>
          </div>
        </div>
        <Link
          href="/journal"
          className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-cyan-500 transition-colors"
        >
          Öffnen <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      {/* Content */}
      <div className="border-t border-border/50">
        <Link
          href="/journal"
          className="block px-5 py-4 hover:bg-accent/30 transition-all duration-150"
        >
          {hasEntry ? (
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                {mood && (
                  <div
                    className="w-10 h-10 rounded-xl flex items-center justify-center text-xl ring-1"
                    style={{
                      backgroundColor: `${MOOD_COLOR[mood] || "#06b6d4"}10`,
                      boxShadow: `inset 0 0 0 1px ${MOOD_COLOR[mood] || "#06b6d4"}20`,
                    }}
                  >
                    {MOOD_EMOJI[mood] || "\ud83d\udcdd"}
                  </div>
                )}
                <div>
                  <span className="text-[13px] font-medium block">Heutiger Eintrag</span>
                  {mood && (
                    <span
                      className="text-[11px] font-medium"
                      style={{ color: MOOD_COLOR[mood] }}
                    >
                      {MOOD_LABEL[mood]}
                    </span>
                  )}
                </div>
              </div>
              {preview && (
                <p className="text-[12px] text-muted-foreground line-clamp-2 leading-relaxed pl-0.5">
                  {preview}
                </p>
              )}
            </div>
          ) : (
            <div className="text-center py-4">
              <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/10 flex items-center justify-center mx-auto mb-3 ring-1 ring-cyan-500/5">
                <PenLine className="h-5 w-5 text-cyan-400" />
              </div>
              <p className="text-sm font-medium text-muted-foreground mb-1">
                Noch kein Eintrag heute
              </p>
              <span className="text-xs text-cyan-500 inline-block">
                Jetzt schreiben
              </span>
            </div>
          )}
        </Link>
      </div>
    </div>
  );
}