"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { createClient } from "@/lib/supabase/client";
import { Button } from "@/components/ui/button";
import { Input, Label, Select } from "@/components/ui/input";
import { useTranslations } from "@/lib/i18n/i18n-provider";
import { cn } from "@/lib/utils";
import type { Locale } from "@/lib/i18n/config";

const GOALS = ["save", "control", "organize", "subscriptions", "everything"] as const;

export default function OnboardingPage({ params }: { params: { locale: string } }) {
  const t = useTranslations();
  const router = useRouter();
  const [step, setStep] = useState(0);
  const [submitting, setSubmitting] = useState(false);
  const [form, setForm] = useState({
    goal: "everything" as (typeof GOALS)[number],
    monthlyIncome: "",
    currency: params.locale === "pl" ? "PLN" : "EUR",
    savingsGoal: "",
    preferredLanguage: params.locale as Locale
  });

  const steps = [t("onboarding.goalQuestion"), t("onboarding.income"), t("onboarding.currency")];

  async function finish() {
    setSubmitting(true);
    const supabase = createClient();
    const { data } = await supabase.auth.getUser();
    if (data.user) {
      await supabase
        .from("profiles")
        .update({
          onboarding_goal: form.goal,
          monthly_income: Number(form.monthlyIncome) || 0,
          currency: form.currency,
          preferred_language: form.preferredLanguage,
          onboarding_completed: true
        })
        .eq("id", data.user.id);

      if (form.savingsGoal && Number(form.savingsGoal) > 0) {
        await supabase.from("goals").insert({
          user_id: data.user.id,
          name: t("goals.title"),
          target_amount: Number(form.savingsGoal),
          current_amount: 0
        });
      }
    }
    router.push(`/${form.preferredLanguage}/dashboard`);
    router.refresh();
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-ink-50/40 px-4">
      <div className="w-full max-w-md rounded-2xl border border-ink-100 bg-white p-6 shadow-card">
        <h1 className="text-lg font-semibold text-ink-900">{t("onboarding.title")}</h1>

        <div className="my-6 flex gap-1.5">
          {steps.map((_, i) => (
            <div
              key={i}
              className={cn("h-1.5 flex-1 rounded-full", i <= step ? "bg-brand-600" : "bg-ink-100")}
            />
          ))}
        </div>

        {step === 0 && (
          <div>
            <p className="mb-3 text-sm font-medium text-ink-700">{t("onboarding.goalQuestion")}</p>
            <div className="space-y-2">
              {GOALS.map((g) => (
                <button
                  key={g}
                  onClick={() => setForm((f) => ({ ...f, goal: g }))}
                  className={cn(
                    "w-full rounded-xl border px-4 py-3 text-left text-sm",
                    form.goal === g ? "border-brand-600 bg-brand-50 text-brand-800" : "border-ink-200 text-ink-700"
                  )}
                >
                  {t(`onboarding.goals.${g}`)}
                </button>
              ))}
            </div>
          </div>
        )}

        {step === 1 && (
          <div className="space-y-4">
            <div>
              <Label htmlFor="income">{t("onboarding.income")}</Label>
              <Input
                id="income"
                type="number"
                min={0}
                value={form.monthlyIncome}
                onChange={(e) => setForm((f) => ({ ...f, monthlyIncome: e.target.value }))}
              />
            </div>
            <div>
              <Label htmlFor="savingsGoal">{t("onboarding.savingsGoal")}</Label>
              <Input
                id="savingsGoal"
                type="number"
                min={0}
                value={form.savingsGoal}
                onChange={(e) => setForm((f) => ({ ...f, savingsGoal: e.target.value }))}
              />
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="space-y-4">
            <div>
              <Label htmlFor="currency">{t("onboarding.currency")}</Label>
              <Select
                id="currency"
                value={form.currency}
                onChange={(e) => setForm((f) => ({ ...f, currency: e.target.value }))}
              >
                <option value="PLN">PLN</option>
                <option value="EUR">EUR</option>
                <option value="USD">USD</option>
                <option value="GBP">GBP</option>
              </Select>
            </div>
            <div>
              <Label htmlFor="language">{t("onboarding.language")}</Label>
              <Select
                id="language"
                value={form.preferredLanguage}
                onChange={(e) => setForm((f) => ({ ...f, preferredLanguage: e.target.value as Locale }))}
              >
                <option value="en">English</option>
                <option value="pl">Polski</option>
              </Select>
            </div>
          </div>
        )}

        <div className="mt-8 flex items-center justify-between">
          <Button variant="ghost" disabled={step === 0} onClick={() => setStep((s) => s - 1)}>
            {t("common.back")}
          </Button>
          {step < steps.length - 1 ? (
            <Button onClick={() => setStep((s) => s + 1)}>{t("common.next")}</Button>
          ) : (
            <Button onClick={finish} loading={submitting}>
              {t("onboarding.finish")}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}