"use client";

import Link from "next/link";
import {
  CheckCircle2,
  Calendar,
  TrendingUp,
  AlertTriangle,
  Flame,
  Sparkles,
} from "lucide-react";

interface FocusCardProps {
  tasksDueToday: number;
  tasksOverdue: number;
  tasksCompleted: number;
  eventsToday: number;
}

export function FocusCard({
  tasksDueToday,
  tasksOverdue,
  tasksCompleted,
  eventsToday,
}: FocusCardProps) {
  const total = tasksDueToday + tasksOverdue;

  return (
    <div className="relative overflow-hidden rounded-2xl border border-border/40 bg-card">
      {/* Mesh gradient background */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute -top-[40%] -left-[20%] w-[60%] h-[60%] rounded-full opacity-[0.06] blur-3xl" style={{ background: "radial-gradient(circle, #6366f1, transparent 70%)" }} />
        <div className="absolute -bottom-[30%] -right-[10%] w-[50%] h-[50%] rounded-full opacity-[0.04] blur-3xl" style={{ background: "radial-gradient(circle, #a855f7, transparent 70%)" }} />
        <div className="absolute top-[10%] right-[20%] w-[35%] h-[35%] rounded-full opacity-[0.03] blur-3xl" style={{ background: "radial-gradient(circle, #06b6d4, transparent 70%)" }} />
      </div>

      <div className="relative p-6">
        {/* Status line */}
        <div className="flex items-center justify-between mb-5">
          <p className="text-[13px] text-muted-foreground leading-relaxed">
            {total === 0
              ? "Alles erledigt. Starker Tag."
              : `${total} offene Aufgabe${total !== 1 ? "n" : ""}${tasksOverdue > 0 ? ` \u00b7 ${tasksOverdue} \u00fcberf\u00e4llig` : ""}`}
          </p>
          <Link
            href="/ai"
            className="flex items-center gap-2 rounded-xl border border-border/50 bg-background/50 backdrop-blur-sm px-3.5 py-1.5 text-[11px] font-medium text-muted-foreground hover:text-foreground hover:border-indigo-500/30 transition-all duration-200"
          >
            <div className="w-4.5 h-4.5 rounded-md bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center" style={{ width: 18, height: 18 }}>
              <Sparkles className="h-2.5 w-2.5 text-white" />
            </div>
            AI fragen
          </Link>
        </div>

        {/* Stats grid */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          <StatCard
            icon={<CheckCircle2 className="h-3.5 w-3.5" />}
            label="Heute f\u00e4llig"
            value={tasksDueToday}
            color="#6366f1"
            active={tasksDueToday > 0}
          />
          <StatCard
            icon={<TrendingUp className="h-3.5 w-3.5" />}
            label="Erledigt"
            value={tasksCompleted}
            color="#10b981"
            active={tasksCompleted > 0}
          />
          <StatCard
            icon={<Calendar className="h-3.5 w-3.5" />}
            label="Events"
            value={eventsToday}
            color="#8b5cf6"
            active={eventsToday > 0}
          />
          {tasksOverdue > 0 ? (
            <StatCard
              icon={<AlertTriangle className="h-3.5 w-3.5" />}
              label="\u00dcberf\u00e4llig"
              value={tasksOverdue}
              color="#ef4444"
              active
              pulse
            />
          ) : (
            <StatCard
              icon={<Flame className="h-3.5 w-3.5" />}
              label="Streak"
              value={tasksCompleted > 0 ? 1 : 0}
              color="#f59e0b"
              suffix=" Tag"
              active={tasksCompleted > 0}
            />
          )}
        </div>
      </div>
    </div>
  );
}

function StatCard({
  icon,
  label,
  value,
  color,
  active,
  suffix,
  pulse,
}: {
  icon: React.ReactNode;
  label: string;
  value: number;
  color: string;
  active?: boolean;
  suffix?: string;
  pulse?: boolean;
}) {
  return (
    <div
      className="relative rounded-xl px-4 py-3 transition-all duration-200"
      style={{
        backgroundColor: active ? `${color}08` : "var(--muted)",
      }}
    >
      <div className="flex items-center gap-1.5 mb-1.5">
        <span style={{ color: active ? color : "var(--muted-foreground)" }}>{icon}</span>
        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
          {label}
        </span>
      </div>
      <div className="flex items-baseline gap-1">
        <p
          className="text-2xl font-bold tabular-nums tracking-tight"
          style={{ color: active ? color : "var(--muted-foreground)" }}
        >
          {value}
        </p>
        {suffix && <span className="text-[11px] font-medium text-muted-foreground">{suffix}</span>}
        {pulse && (
          <span className="absolute top-3 right-3 w-1.5 h-1.5 rounded-full animate-pulse" style={{ backgroundColor: color }} />
        )}
      </div>
    </div>
  );
}