"use client";

import { DynamicLucideIcon, getIconConfigFromDetails } from "@/components/lucide-icon";
import type { Habit } from "@/features/habits/types";
import type { Task } from "@/features/tasks/types";
import type { Goal } from "@/features/goals/types";
import { GoalCardMenu } from "@/features/goals/components/goal-card-menu";
import { goalsDict } from "@/features/goals/dict";
import {
  formatDateLabel,
  formatGoalProgress,
  formatGoalTarget,
  getCategoryLabel,
  resolveSourceLabel,
} from "@/features/goals/utils/goal-helpers";

type GoalCardProps = {
  goal: Goal;
  habits: Habit[];
  tasks: Task[];
  onEdit: (goal: Goal) => void;
  onDelete: (goal: Goal) => void;
};

function GoalFallbackIcon() {
  return (
    <svg aria-hidden="true" className="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <circle cx="12" cy="12" r="8" />
      <circle cx="12" cy="12" r="4" />
    </svg>
  );
}

export function GoalCard({ goal, habits, tasks, onEdit, onDelete }: GoalCardProps) {
  const progress = formatGoalProgress(goal);
  const statusLabel = goalsDict.statuses[goal.status];
  const categoryIcon = getIconConfigFromDetails(goal.category?.details);
  const hasCategoryIcon = Boolean(categoryIcon.iconComponent);

  return (
    <article className="rounded-[1.75rem] bg-card px-4 py-4 shadow-soft-sm sm:px-5">
      <div className="flex items-start gap-3">
        <div
          className={
            hasCategoryIcon
              ? "inline-flex size-11 shrink-0 items-center justify-center rounded-2xl shadow-soft-sm ring-1 ring-border"
              : "inline-flex size-11 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-[#FF8C42] to-[#FFA500] text-white shadow-soft-sm"
          }
          style={
            hasCategoryIcon && categoryIcon.color
              ? {
                  color: categoryIcon.color,
                  backgroundColor: `${categoryIcon.color}1f`,
                }
              : undefined
          }
        >
          {hasCategoryIcon ? (
            <DynamicLucideIcon
              iconComponent={categoryIcon.iconComponent}
              name={categoryIcon.icon ?? undefined}
              color={categoryIcon.color ?? undefined}
              size={20}
            />
          ) : (
            <GoalFallbackIcon />
          )}
        </div>

        <div className="min-w-0 flex-1">
          <div className="mb-2 flex flex-wrap items-center gap-2">
            <span className="rounded-full bg-primary/15 px-2.5 py-1 text-[11px] font-semibold text-primary">
              {statusLabel}
            </span>
            {goal.category ? (
              <span className="truncate text-xs text-muted-foreground">
                {getCategoryLabel(goal.category)}
              </span>
            ) : null}
          </div>

          <h3 className="truncate text-base font-bold text-[#1D2D50] dark:text-card-foreground sm:text-lg">
            {goal.title}
          </h3>

          {goal.description ? (
            <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">{goal.description}</p>
          ) : null}

          <div className="mt-3 space-y-2">
            <div>
              <div className="mb-1 flex items-center justify-between text-xs text-muted-foreground">
                <span>{goalsDict.progress}</span>
                <span dir="ltr">{progress.label}</span>
              </div>
              <div className="h-2 overflow-hidden rounded-full bg-muted">
                <div
                  className="h-full rounded-full bg-gradient-to-r from-[#2EC4B6] to-[#56CCF2]"
                  style={{ width: `${progress.percent}%` }}
                />
              </div>
            </div>

            <p className="text-sm text-muted-foreground">{formatGoalTarget(goal)}</p>
            <p className="text-sm text-muted-foreground">
              {formatDateLabel(goal.startDate)} — {formatDateLabel(goal.endDate)}
            </p>

            <div className="space-y-1">
              <p className="text-xs font-medium text-muted-foreground">{goalsDict.sourcesLabel}</p>
              {goal.sources.length === 0 ? (
                <p className="text-sm text-muted-foreground">{goalsDict.noSources}</p>
              ) : (
                goal.sources.map((source) => (
                  <p key={source.id} className="text-sm text-foreground">
                    {goalsDict.sourceTypes[source.sourceType]} · {resolveSourceLabel(source, habits, tasks)} · {goalsDict.contributions[source.contribution]}
                  </p>
                ))
              )}
            </div>
          </div>
        </div>

        <GoalCardMenu
          onEdit={() => onEdit(goal)}
          onDelete={() => onDelete(goal)}
        />
      </div>
    </article>
  );
}