"use client";

import Link from "next/link";
import { Target, ArrowRight, Trophy, Plus } from "lucide-react";

interface GoalItem {
  id: string;
  title: string;
  icon: string;
  color: string;
  progress: number;
  completed: boolean;
}

interface GoalsWidgetProps {
  goals: GoalItem[];
}

export function GoalsWidget({ goals }: GoalsWidgetProps) {
  const active = goals.filter((g) => !g.completed);
  const completedCount = goals.filter((g) => g.completed).length;

  return (
    <div className="group/widget rounded-2xl border border-border/50 bg-card overflow-hidden transition-all duration-200 hover:border-rose-500/20 hover:shadow-[0_0_30px_-10px_rgba(244,63,94,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-rose-500/20 to-rose-600/10 ring-1 ring-rose-500/10">
            <Target className="h-4 w-4 text-rose-500" />
          </div>
          <div>
            <h2 className="text-sm font-semibold tracking-tight">Ziele</h2>
            <p className="text-[10px] text-muted-foreground">
              {active.length > 0
                ? `${active.length} aktiv`
                : "Keine aktiven Ziele"}
              {completedCount > 0 && ` \u00b7 ${completedCount} erreicht`}
            </p>
          </div>
          {completedCount > 0 && (
            <span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-500 bg-amber-500/10 rounded-full px-2 py-0.5 ring-1 ring-amber-500/10">
              <Trophy className="h-3 w-3" />
              {completedCount}
            </span>
          )}
        </div>
        <Link
          href="/mindset"
          className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-rose-500 transition-colors"
        >
          Alle <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      {/* Content */}
      <div className="border-t border-border/50">
        {goals.length === 0 ? (
          <div className="px-5 py-10 text-center">
            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-rose-500/10 to-orange-500/10 flex items-center justify-center mx-auto mb-3 ring-1 ring-rose-500/5">
              <Target className="h-5 w-5 text-rose-400" />
            </div>
            <p className="text-sm font-medium text-muted-foreground mb-1">Keine Ziele gesetzt</p>
            <Link
              href="/mindset"
              className="inline-flex items-center gap-1 text-xs text-rose-500 hover:text-rose-400 transition-colors"
            >
              <Plus className="h-3 w-3" />
              Ziel erstellen
            </Link>
          </div>
        ) : (
          <div className="p-4 space-y-1">
            {active.slice(0, 4).map((goal) => (
              <div
                key={goal.id}
                className="flex items-center gap-3 rounded-xl px-3 py-2.5 hover:bg-accent/30 transition-all duration-150 group/goal"
              >
                <div
                  className="w-9 h-9 rounded-xl flex items-center justify-center text-base shrink-0 ring-1 transition-transform duration-200 group-hover/goal:scale-105"
                  style={{
                    backgroundColor: `${goal.color}12`,
                    boxShadow: `inset 0 0 0 1px ${goal.color}20`,
                  }}
                >
                  {goal.icon}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between gap-2 mb-1.5">
                    <span className="text-[12px] font-medium truncate">
                      {goal.title}
                    </span>
                    <span
                      className="text-[10px] font-bold shrink-0 tabular-nums"
                      style={{ color: goal.color }}
                    >
                      {goal.progress}%
                    </span>
                  </div>
                  <div className="h-1.5 rounded-full bg-muted/80 overflow-hidden">
                    <div
                      className="h-full rounded-full transition-all duration-700 ease-out"
                      style={{
                        width: `${goal.progress}%`,
                        background: `linear-gradient(90deg, ${goal.color}, ${goal.color}cc)`,
                      }}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}