"use client";

import Link from "next/link";
import { Zap, ArrowRight, Plus, Check, Flame } from "lucide-react";
import { cn } from "@/lib/utils";

interface HabitProgressProps {
  habits: { id: string; name: string; icon: string; color: string }[];
  completions: Set<string>;
  streaks: Record<string, number>;
  onToggle: (habitId: string) => void;
}

export function HabitProgress({ habits, completions, streaks, onToggle }: HabitProgressProps) {
  const total = habits.length;
  const done = habits.filter((h) => completions.has(h.id)).length;
  const pct = total > 0 ? Math.round((done / total) * 100) : 0;

  return (
    <div className="group/widget rounded-2xl border border-border/50 bg-card overflow-hidden transition-all duration-200 hover:border-emerald-500/20 hover:shadow-[0_0_30px_-10px_rgba(16,185,129,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-emerald-500/20 to-emerald-600/10 ring-1 ring-emerald-500/10">
            <Zap className="h-4 w-4 text-emerald-500" />
          </div>
          <div>
            <h2 className="text-sm font-semibold tracking-tight">Habits</h2>
            <p className="text-[10px] text-muted-foreground">
              {total > 0 ? `${done} von ${total} heute` : "Keine Habits"}
            </p>
          </div>
        </div>
        <Link
          href="/habits"
          className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-emerald-500 transition-colors"
        >
          Alle <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      {/* Content */}
      <div className="border-t border-border/50">
        {habits.length === 0 ? (
          <div className="px-5 py-10 text-center">
            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-500/10 to-cyan-500/10 flex items-center justify-center mx-auto mb-3 ring-1 ring-emerald-500/5">
              <Zap className="h-5 w-5 text-emerald-400" />
            </div>
            <p className="text-sm font-medium text-muted-foreground mb-1">Keine Habits</p>
            <Link
              href="/habits"
              className="inline-flex items-center gap-1 text-xs text-emerald-500 hover:text-emerald-400 transition-colors"
            >
              <Plus className="h-3 w-3" />
              Habit erstellen
            </Link>
          </div>
        ) : (
          <div className="p-5 space-y-4">
            {/* Progress bar with percentage */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-[11px] font-medium text-muted-foreground">Fortschritt</span>
                <span
                  className={cn(
                    "text-xs font-bold tabular-nums",
                    pct === 100 ? "text-emerald-500" : "text-muted-foreground"
                  )}
                >
                  {pct}%
                </span>
              </div>
              <div className="h-2 rounded-full bg-muted/80 overflow-hidden">
                <div
                  className="h-full rounded-full transition-all duration-700 ease-out"
                  style={{
                    width: `${pct}%`,
                    background:
                      pct === 100
                        ? "linear-gradient(90deg, #10b981, #34d399)"
                        : "linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7)",
                  }}
                />
              </div>
            </div>

            {/* Habit chips */}
            <div className="flex flex-wrap gap-2">
              {habits.slice(0, 8).map((habit) => {
                const isDone = completions.has(habit.id);
                const streak = streaks[habit.id] ?? 0;
                return (
                  <button
                    key={habit.id}
                    onClick={() => onToggle(habit.id)}
                    className={cn(
                      "relative inline-flex min-w-[122px] items-center justify-between gap-2 rounded-xl px-3 py-2 text-[11px] font-medium transition-all duration-200 cursor-pointer",
                      isDone
                        ? "text-white shadow-sm shadow-black/10 scale-[0.98]"
                        : "bg-muted/50 hover:bg-muted text-foreground ring-1 ring-border/50 hover:ring-border"
                    )}
                    style={isDone ? { backgroundColor: habit.color } : undefined}
                    title={habit.name}
                  >
                    {isDone && (
                      <Check className="h-3 w-3 absolute -top-1 -right-1 bg-white text-emerald-600 rounded-full p-0.5 shadow-sm" />
                    )}
                    <span className="flex min-w-0 items-center gap-1.5">
                      <span className="text-sm">{habit.icon}</span>
                      <span className="truncate max-w-[78px]">{habit.name}</span>
                    </span>
                    <span
                      className={cn(
                        "inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-1 text-[10px] font-semibold tabular-nums",
                        isDone
                          ? "bg-white/18 text-white"
                          : streak > 0
                            ? "bg-orange-500/12 text-orange-500"
                            : "bg-muted/80 text-muted-foreground"
                      )}
                    >
                      <Flame className="h-3 w-3" />
                      {streak}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}