"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Plus, PiggyBank, Trash2 } from "lucide-react";
import { createClient } from "@/lib/supabase/client";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input, Label, FieldError } from "@/components/ui/input";
import { Modal } from "@/components/ui/modal";
import { Progress } from "@/components/ui/progress";
import { EmptyState } from "@/components/shared/empty-state";
import { goalSchema, goalContributionSchema, type GoalInput } from "@/lib/validation/schemas";
import { useTranslations, useLocale } from "@/lib/i18n/i18n-provider";
import { formatMoney, formatDate, clampPercent } from "@/lib/utils";
import { PLANS, type PlanId } from "@/lib/pricing";
import type { Goal, Currency } from "@/types/database";

export function GoalsView({
  initialGoals,
  currency,
  plan
}: {
  initialGoals: Goal[];
  currency: Currency;
  plan: PlanId;
}) {
  const t = useTranslations();
  const locale = useLocale();
  const [goals, setGoals] = useState(initialGoals);
  const [createOpen, setCreateOpen] = useState(false);
  const [contributingTo, setContributingTo] = useState<Goal | null>(null);

  const limit = PLANS[plan].limits.maxGoals;
  const atLimit = limit !== null && goals.length >= limit;

  async function handleDelete(id: string) {
    const supabase = createClient();
    const prev = goals;
    setGoals((g) => g.filter((x) => x.id !== id));
    const { error } = await supabase.from("goals").delete().eq("id", id);
    if (error) setGoals(prev);
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <Button onClick={() => setCreateOpen(true)} disabled={atLimit}>
          <Plus className="h-4 w-4" /> {t("goals.add")}
        </Button>
      </div>

      {goals.length === 0 ? (
        <EmptyState title={t("goals.empty.title")} cta={t("goals.empty.cta")} onCta={() => setCreateOpen(true)} icon={PiggyBank} />
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {goals.map((g) => {
            const pct = clampPercent((Number(g.current_amount) / Number(g.target_amount)) * 100);
            const remaining = Math.max(0, Number(g.target_amount) - Number(g.current_amount));
            return (
              <Card key={g.id}>
                <div className="mb-3 flex items-start justify-between">
                  <h3 className="text-sm font-semibold text-ink-900">{g.name}</h3>
                  <button
                    onClick={() => handleDelete(g.id)}
                    aria-label={t("common.delete")}
                    className="rounded-lg p-1 text-ink-300 hover:bg-red-50 hover:text-red-600"
                  >
                    <Trash2 className="h-3.5 w-3.5" />
                  </button>
                </div>
                <p className="text-2xl font-semibold text-ink-950">
                  {formatMoney(Number(g.current_amount), currency, locale)}
                  <span className="text-sm font-normal text-ink-400"> / {formatMoney(Number(g.target_amount), currency, locale)}</span>
                </p>
                <Progress value={pct} className="my-3" />
                <div className="flex items-center justify-between text-xs text-ink-400">
                  <span>{t("goals.progress", { percent: pct })}</span>
                  <span>{t("goals.remaining", { amount: formatMoney(remaining, currency, locale) })}</span>
                </div>
                {g.deadline && (
                  <p className="mt-2 text-xs text-ink-400">
                    {t("goals.deadline")}: {formatDate(g.deadline, locale)}
                  </p>
                )}
                <Button size="sm" variant="secondary" className="mt-4 w-full" onClick={() => setContributingTo(g)}>
                  {t("goals.addMoney")}
                </Button>
              </Card>
            );
          })}
        </div>
      )}

      <CreateGoalModal
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        onCreated={(g) => {
          setGoals((prev) => [g, ...prev]);
          setCreateOpen(false);
        }}
      />

      <ContributeModal
        goal={contributingTo}
        onClose={() => setContributingTo(null)}
        onUpdated={(g) => {
          setGoals((prev) => prev.map((x) => (x.id === g.id ? g : x)));
          setContributingTo(null);
        }}
      />
    </div>
  );
}

function CreateGoalModal({
  open,
  onClose,
  onCreated
}: {
  open: boolean;
  onClose: () => void;
  onCreated: (g: Goal) => void;
}) {
  const t = useTranslations();
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting }
  } = useForm<GoalInput>({ resolver: zodResolver(goalSchema), defaultValues: { currentAmount: 0 } });

  async function onSubmit(values: GoalInput) {
    const supabase = createClient();
    const { data: userData } = await supabase.auth.getUser();
    if (!userData.user) return;
    const { data, error } = await supabase
      .from("goals")
      .insert({
        user_id: userData.user.id,
        name: values.name,
        target_amount: values.targetAmount,
        current_amount: values.currentAmount,
        deadline: values.deadline || null
      })
      .select()
      .single();
    if (!error && data) {
      onCreated(data);
      reset();
    }
  }

  return (
    <Modal open={open} onClose={onClose} title={t("goals.add")}>
      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
        <div>
          <Label htmlFor="name">{t("goals.name")}</Label>
          <Input id="name" error={errors.name?.message} {...register("name")} />
          <FieldError>{errors.name?.message}</FieldError>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <Label htmlFor="targetAmount">{t("goals.target")}</Label>
            <Input id="targetAmount" type="number" step="0.01" error={errors.targetAmount?.message} {...register("targetAmount")} />
            <FieldError>{errors.targetAmount?.message}</FieldError>
          </div>
          <div>
            <Label htmlFor="currentAmount">{t("goals.current")}</Label>
            <Input id="currentAmount" type="number" step="0.01" {...register("currentAmount")} />
          </div>
        </div>
        <div>
          <Label htmlFor="deadline">{t("goals.deadline")}</Label>
          <Input id="deadline" type="date" {...register("deadline")} />
        </div>
        <div className="flex justify-end gap-2 pt-2">
          <Button type="button" variant="secondary" onClick={onClose}>
            {t("common.cancel")}
          </Button>
          <Button type="submit" loading={isSubmitting}>
            {t("common.save")}
          </Button>
        </div>
      </form>
    </Modal>
  );
}

function ContributeModal({
  goal,
  onClose,
  onUpdated
}: {
  goal: Goal | null;
  onClose: () => void;
  onUpdated: (g: Goal) => void;
}) {
  const t = useTranslations();
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting }
  } = useForm<{ amount: number }>({ resolver: zodResolver(goalContributionSchema) });

  async function onSubmit(values: { amount: number }) {
    if (!goal) return;
    const supabase = createClient();
    const { data: userData } = await supabase.auth.getUser();
    if (!userData.user) return;

    const newAmount = Number(goal.current_amount) + Number(values.amount);
    const { data, error } = await supabase
      .from("goals")
      .update({ current_amount: newAmount })
      .eq("id", goal.id)
      .select()
      .single();

    if (!error && data) {
      await supabase.from("goal_transactions").insert({
        goal_id: goal.id,
        user_id: userData.user.id,
        amount: values.amount
      });
      onUpdated(data);
      reset();
    }
  }

  return (
    <Modal open={!!goal} onClose={onClose} title={t("goals.addMoney")}>
      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
        <div>
          <Label htmlFor="contribAmount">{t("expenses.amount")}</Label>
          <Input id="contribAmount" type="number" step="0.01" error={errors.amount?.message} {...register("amount")} />
          <FieldError>{errors.amount?.message}</FieldError>
        </div>
        <div className="flex justify-end gap-2 pt-2">
          <Button type="button" variant="secondary" onClick={onClose}>
            {t("common.cancel")}
          </Button>
          <Button type="submit" loading={isSubmitting}>
            {t("common.save")}
          </Button>
        </div>
      </form>
    </Modal>
  );
}