"use client";

import { useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Plus, RefreshCw, Pencil, Trash2 } from "lucide-react";
import { createClient } from "@/lib/supabase/client";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input, Label, Select, FieldError } from "@/components/ui/input";
import { Modal } from "@/components/ui/modal";
import { EmptyState } from "@/components/shared/empty-state";
import { subscriptionSchema, type SubscriptionInput } from "@/lib/validation/schemas";
import { useTranslations, useLocale } from "@/lib/i18n/i18n-provider";
import { formatMoney, formatDate } from "@/lib/utils";
import type { Subscription, Currency } from "@/types/database";

export function SubscriptionsView({
  initialSubscriptions,
  currency
}: {
  initialSubscriptions: Subscription[];
  currency: Currency;
}) {
  const t = useTranslations();
  const locale = useLocale();
  const [subs, setSubs] = useState(initialSubscriptions);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<Subscription | null>(null);

  const monthlyTotal = useMemo(
    () =>
      subs.reduce((sum, s) => sum + (s.billing_cycle === "monthly" ? Number(s.price) : Number(s.price) / 12), 0),
    [subs]
  );
  const yearlyTotal = monthlyTotal * 12;

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

  return (
    <div className="space-y-4">
      <div className="grid gap-4 sm:grid-cols-2">
        <Card>
          <p className="text-xs text-ink-400">{t("subscriptions.monthlyTotal")}</p>
          <p className="mt-1 text-2xl font-semibold text-ink-950">{formatMoney(monthlyTotal, currency, locale)}</p>
        </Card>
        <Card>
          <p className="text-xs text-ink-400">{t("subscriptions.yearlyTotal")}</p>
          <p className="mt-1 text-2xl font-semibold text-ink-950">{formatMoney(yearlyTotal, currency, locale)}</p>
        </Card>
      </div>

      <div className="flex justify-end">
        <Button
          onClick={() => {
            setEditing(null);
            setModalOpen(true);
          }}
        >
          <Plus className="h-4 w-4" /> {t("subscriptions.add")}
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>{t("subscriptions.title")}</CardTitle>
        </CardHeader>
        {subs.length === 0 ? (
          <EmptyState
            title={t("subscriptions.empty.title")}
            cta={t("subscriptions.empty.cta")}
            onCta={() => setModalOpen(true)}
            icon={RefreshCw}
          />
        ) : (
          <ul className="divide-y divide-ink-100">
            {subs.map((s) => (
              <li key={s.id} className="flex items-center justify-between py-3">
                <div>
                  <p className="text-sm font-medium text-ink-900">{s.name}</p>
                  <p className="text-xs text-ink-400">
                    {t(`subscriptions.cycles.${s.billing_cycle}`)} · {t("subscriptions.nextPayment")}:{" "}
                    {formatDate(s.next_payment_date, locale)}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <span className="text-sm font-semibold text-ink-900">
                    {formatMoney(Number(s.price), s.currency, locale)}
                  </span>
                  <button
                    onClick={() => {
                      setEditing(s);
                      setModalOpen(true);
                    }}
                    aria-label={t("common.edit")}
                    className="rounded-lg p-1.5 text-ink-400 hover:bg-ink-100 hover:text-ink-700"
                  >
                    <Pencil className="h-3.5 w-3.5" />
                  </button>
                  <button
                    onClick={() => handleDelete(s.id)}
                    aria-label={t("common.delete")}
                    className="rounded-lg p-1.5 text-ink-400 hover:bg-red-50 hover:text-red-600"
                  >
                    <Trash2 className="h-3.5 w-3.5" />
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </Card>

      <SubscriptionModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        editing={editing}
        currency={currency}
        onSaved={(sub, isNew) => {
          setSubs((prev) =>
            isNew
              ? [...prev, sub].sort((a, b) => a.next_payment_date.localeCompare(b.next_payment_date))
              : prev.map((s) => (s.id === sub.id ? sub : s))
          );
          setModalOpen(false);
        }}
      />
    </div>
  );
}

function SubscriptionModal({
  open,
  onClose,
  editing,
  currency,
  onSaved
}: {
  open: boolean;
  onClose: () => void;
  editing: Subscription | null;
  currency: Currency;
  onSaved: (s: Subscription, isNew: boolean) => void;
}) {
  const t = useTranslations();
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting }
  } = useForm<SubscriptionInput>({
    resolver: zodResolver(subscriptionSchema),
    values: editing
      ? {
          name: editing.name,
          price: Number(editing.price),
          currency: editing.currency,
          billingCycle: editing.billing_cycle,
          category: editing.category ?? "",
          nextPaymentDate: editing.next_payment_date
        }
      : {
          name: "",
          price: 0,
          currency,
          billingCycle: "monthly",
          category: "",
          nextPaymentDate: new Date().toISOString().slice(0, 10)
        }
  });

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

    if (editing) {
      const { data, error } = await supabase
        .from("subscriptions")
        .update({
          name: values.name,
          price: values.price,
          currency: values.currency,
          billing_cycle: values.billingCycle,
          category: values.category,
          next_payment_date: values.nextPaymentDate
        })
        .eq("id", editing.id)
        .select()
        .single();
      if (!error && data) onSaved(data, false);
    } else {
      const { data, error } = await supabase
        .from("subscriptions")
        .insert({
          user_id: userData.user.id,
          name: values.name,
          price: values.price,
          currency: values.currency,
          billing_cycle: values.billingCycle,
          category: values.category,
          next_payment_date: values.nextPaymentDate
        })
        .select()
        .single();
      if (!error && data) onSaved(data, true);
    }
    reset();
  }

  return (
    <Modal open={open} onClose={onClose} title={editing ? t("common.edit") : t("subscriptions.add")}>
      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
        <div>
          <Label htmlFor="name">{t("subscriptions.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="price">{t("subscriptions.price")}</Label>
            <Input id="price" type="number" step="0.01" error={errors.price?.message} {...register("price")} />
          </div>
          <div>
            <Label htmlFor="currency">Currency</Label>
            <Select id="currency" {...register("currency")}>
              <option value="PLN">PLN</option>
              <option value="EUR">EUR</option>
              <option value="USD">USD</option>
              <option value="GBP">GBP</option>
            </Select>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <Label htmlFor="billingCycle">{t("subscriptions.billingCycle")}</Label>
            <Select id="billingCycle" {...register("billingCycle")}>
              <option value="monthly">{t("subscriptions.cycles.monthly")}</option>
              <option value="yearly">{t("subscriptions.cycles.yearly")}</option>
            </Select>
          </div>
          <div>
            <Label htmlFor="nextPaymentDate">{t("subscriptions.nextPayment")}</Label>
            <Input id="nextPaymentDate" type="date" error={errors.nextPaymentDate?.message} {...register("nextPaymentDate")} />
          </div>
        </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>
  );
}