"use client"; import { useMemo, useState } from "react"; import { Gift, Map, Plus, Sparkles, Target, Trash2 } from "lucide-react"; import { Input } from "@/components/ui/input"; import { Select } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { ACHIEVEMENT_CATEGORY_SUGGESTIONS, ACHIEVEMENT_PROGRESS_SOURCE_OPTIONS, ACHIEVEMENT_STATUS_OPTIONS, buildDefaultAchievementMilestones, } from "@/lib/achievements"; import type { AchievementProjectOption, AchievementTaskOption, AchievementUpsertInput, } from "@/hooks/use-achievements"; import { LinkedEntityPicker } from "@/components/achievements/linked-entity-picker"; import { cn } from "@/lib/utils"; import type { Achievement } from "@/types"; /* ── Types ────────────────────────────────────────────────────────────────── */ interface AchievementFormProps { achievement?: Achievement | null; availableProjects: AchievementProjectOption[]; availableTasks: AchievementTaskOption[]; onCancel: () => void; onSubmit: (input: AchievementUpsertInput) => Promise; submitting: boolean; } function toggleId(current: string[], id: string) { return current.includes(id) ? current.filter((item) => item !== id) : [...current, id]; } /* ── Initial state helper ─────────────────────────────────────────────────── */ function getInitialState(achievement?: Achievement | null) { if (!achievement) { return { background_image_url: "", category: "productivity", current_progress: 0, description: "", icon: "🏆", image_url: "", linked_project_ids: [] as string[], linked_task_ids: [] as string[], milestones: buildDefaultAchievementMilestones(100).map((milestone) => ({ ...milestone, linked_task_ids: [], unlocked_at: null, })), progress_source: "manual" as const, reward_description: "", reward_image_url: "", reward_title: "", reward_why: "", status: "in_progress" as const, target_value: 100, title: "", }; } return { background_image_url: achievement.background_image_url || "", category: achievement.category, current_progress: achievement.current_progress, description: achievement.description || "", icon: achievement.icon, image_url: achievement.image_url || "", linked_project_ids: (achievement.project_links || []).map((l) => l.project_id), linked_task_ids: (achievement.task_links || []).map((l) => l.task_id), milestones: (achievement.milestones || []).map((m, i) => ({ description: m.description, linked_task_ids: (m.task_links || []).map((link) => link.task_id), milestone_value: m.milestone_value, sort_order: i, title: m.title, unlocked_at: m.unlocked_at, })), progress_source: achievement.progress_source, reward_description: achievement.reward_description || "", reward_image_url: achievement.reward_image_url || "", reward_title: achievement.reward_title, reward_why: achievement.reward_why || "", status: achievement.status, target_value: achievement.target_value, title: achievement.title, }; } /* ── Form ─────────────────────────────────────────────────────────────────── */ export function AchievementForm({ achievement, availableProjects, availableTasks, onCancel, onSubmit, submitting, }: AchievementFormProps) { const init = getInitialState(achievement); const [title, setTitle] = useState(init.title); const [description, setDescription] = useState(init.description); const [category, setCategory] = useState(init.category); const [icon, setIcon] = useState(init.icon); const [imageUrl, setImageUrl] = useState(init.image_url); const [backgroundImageUrl, setBackgroundImageUrl] = useState(init.background_image_url); const [targetValue, setTargetValue] = useState(init.target_value); const [currentProgress, setCurrentProgress] = useState(init.current_progress); const [status, setStatus] = useState(init.status); const [progressSource, setProgressSource] = useState(init.progress_source); const [rewardTitle, setRewardTitle] = useState(init.reward_title); const [rewardDescription, setRewardDescription] = useState(init.reward_description); const [rewardImageUrl, setRewardImageUrl] = useState(init.reward_image_url); const [rewardWhy, setRewardWhy] = useState(init.reward_why); const [milestones, setMilestones] = useState(init.milestones); const [linkedTaskIds, setLinkedTaskIds] = useState(init.linked_task_ids); const [linkedProjectIds, setLinkedProjectIds] = useState(init.linked_project_ids); const progressSourceDescription = useMemo( () => ACHIEVEMENT_PROGRESS_SOURCE_OPTIONS.find((o) => o.value === progressSource)?.description || "", [progressSource], ); /* Live preview metrics */ const previewPct = Math.min(100, Math.round((currentProgress / Math.max(1, targetValue)) * 100)); async function handleSubmit(e: React.FormEvent) { e.preventDefault(); await onSubmit({ background_image_url: backgroundImageUrl || null, category: category.trim() || "productivity", current_progress: Number.isFinite(currentProgress) ? currentProgress : 0, description: description || null, icon: icon || "🏆", image_url: imageUrl || null, linked_project_ids: linkedProjectIds, linked_task_ids: linkedTaskIds, milestones, progress_source: progressSource, reward_description: rewardDescription || null, reward_image_url: rewardImageUrl || null, reward_title: rewardTitle.trim(), reward_why: rewardWhy || null, status, target_value: Math.max(1, targetValue), title: title.trim(), }); } function updateMilestone(index: number, patch: Partial<(typeof milestones)[number]>) { setMilestones((cur) => cur.map((m, i) => (i === index ? { ...m, ...patch } : m))); } function addMilestone() { setMilestones((cur) => [ ...cur, { description: "", linked_task_ids: [], milestone_value: targetValue, sort_order: cur.length, title: `Milestone ${cur.length + 1}`, unlocked_at: null, }, ]); } function removeMilestone(index: number) { setMilestones((cur) => cur.filter((_, i) => i !== index).map((m, i) => ({ ...m, sort_order: i }))); } /* ───────────────────────────────────────────────────────────────────── */ return (
{/* ── Row 1: fields + live preview ────────────────────────────────── */}
{/* Left: core fields */}
{/* Title */}
Title setTitle(e.target.value)} placeholder="e.g. First 10K Month" className="mt-1 border-white/[0.08] bg-white/[0.03] text-white placeholder:text-white/20" autoFocus />
{/* Description */}
Description