"use client";

import { useEffect, useMemo, useState } from "react";
import { PageHeader } from "@/components/ui/page-header";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { CustomSelect } from "@/components/ui/custom-select";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";

type MessageState = { type: "success" | "error"; text: string } | null;

type AccessState = "loading" | "ready" | "forbidden";

type PlanType = "mensal" | "anual";

function formatDateInput(date: Date) {
  return date.toISOString().slice(0, 10);
}

function addDays(base: Date, days: number) {
  const next = new Date(base);
  next.setDate(next.getDate() + days);
  return next;
}

function planDefaults(plan: PlanType) {
  if (plan === "anual") {
    return { name: "Ktalogu - Anual", days: 365 };
  }
  return { name: "Ktalogu - Mensal", days: 30 };
}

export default function OwnerAccessGrantClient() {
  const [accessState, setAccessState] = useState<AccessState>("loading");
  const [message, setMessage] = useState<MessageState>(null);
  const [saving, setSaving] = useState(false);

  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [plan, setPlan] = useState<PlanType>("mensal");
  const [status, setStatus] = useState("active");
  const [planName, setPlanName] = useState("Ktalogu - Mensal");
  const [expiresAt, setExpiresAt] = useState(formatDateInput(addDays(new Date(), 30)));

  const [planNameTouched, setPlanNameTouched] = useState(false);
  const [expiresTouched, setExpiresTouched] = useState(false);

  useEffect(() => {
    let active = true;
    async function checkOwner() {
      try {
        const supabase = getSupabaseClient();
        const {
          data: { user },
        } = await supabase.auth.getUser();
        if (!user) {
          if (active) setAccessState("forbidden");
          return;
        }
        const ctx = await getCompanyContext(supabase, user);
        if (ctx.ownerId !== user.id) {
          if (active) setAccessState("forbidden");
          return;
        }
        if (active) setAccessState("ready");
      } catch {
        if (active) setAccessState("forbidden");
      }
    }
    checkOwner();
    return () => {
      active = false;
    };
  }, []);

  useEffect(() => {
    const defaults = planDefaults(plan);
    if (!planNameTouched) setPlanName(defaults.name);
    if (!expiresTouched) setExpiresAt(formatDateInput(addDays(new Date(), defaults.days)));
  }, [plan, planNameTouched, expiresTouched]);

  const planOptions = useMemo(
    () => [
      { value: "mensal", label: "Mensal" },
      { value: "anual", label: "Anual" },
    ],
    []
  );

  const statusOptions = useMemo(
    () => [
      { value: "active", label: "Ativo" },
      { value: "inactive", label: "Inativo" },
    ],
    []
  );

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setMessage(null);
    setSaving(true);
    try {
      const res = await fetch("/api/owner/access-grant", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          email,
          name,
          plan,
          plan_name: planName,
          status,
          expires_at: expiresAt ? new Date(expiresAt).toISOString() : null,
        }),
      });
      const json = (await res.json().catch(() => null)) as
        | { error?: string; mode?: string; email_sent?: boolean }
        | null;
      if (!res.ok) {
        setMessage({ type: "error", text: json?.error || "Falha ao conceder acesso." });
        return;
      }
      const actionLabel = json?.mode === "updated" ? "Acesso atualizado com sucesso." : "Acesso concedido com sucesso.";
      const emailLabel =
        json?.email_sent === false
          ? "Não foi possível enviar o email de redefinição de senha."
          : "Email de redefinição de senha enviado.";
      setMessage({
        type: "success",
        text: `${actionLabel} ${emailLabel}`,
      });
      setEmail("");
      setName("");
      setPlan("mensal");
      setStatus("active");
      setPlanNameTouched(false);
      setExpiresTouched(false);
    } finally {
      setSaving(false);
    }
  }

  if (accessState === "loading") {
    return (
      <div className="flex items-center justify-center min-h-[300px]">
        <div className="w-6 h-6 border-2 border-[var(--ks-color-primary)] border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  if (accessState === "forbidden") {
    return (
      <div className="max-w-2xl mx-auto py-10">
        <div className="ks-surface p-6 text-sm text-[var(--ks-color-text-muted)]">
          Você não tem permissão para acessar esta página.
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Privado"
        title="Conceder acesso manual"
        subtitle="Liberte acessos sem compra para quem você desejar."
      />

      <div className="ks-surface p-6 space-y-6">
        {message ? (
          <div
            className={[
              "p-3 rounded-xl border text-sm flex items-center gap-2",
              message.type === "success"
                ? "bg-[color:rgba(18,185,129,0.08)] border-[rgba(18,185,129,0.2)] text-[var(--ks-color-status-success)]"
                : "bg-red-50 border-red-100 text-red-600",
            ].join(" ")}
          >
            <div
              className={[
                "h-1.5 w-1.5 rounded-full",
                message.type === "success" ? "bg-[var(--ks-color-status-success)]" : "bg-red-500",
              ].join(" ")}
            />
            {message.text}
          </div>
        ) : null}

        <form onSubmit={handleSubmit} className="space-y-4">
          <Input
            id="grant-email"
            label="Email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="cliente@email.com"
            required
          />

          <Input
            id="grant-name"
            label="Nome"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Nome do presenteado"
          />

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-1">
              <label className="ks-input-label">Plano</label>
              <CustomSelect
                options={planOptions}
                value={plan}
                onChange={(value) => setPlan(value as PlanType)}
              />
            </div>

            <div className="space-y-1">
              <label className="ks-input-label">Status</label>
              <CustomSelect
                options={statusOptions}
                value={status}
                onChange={(value) => setStatus(value)}
              />
            </div>
          </div>

          <Input
            id="grant-plan-name"
            label="Nome do plano"
            value={planName}
            onChange={(e) => {
              setPlanNameTouched(true);
              setPlanName(e.target.value);
            }}
            placeholder="Ktalogu - Mensal"
          />

          <Input
            id="grant-expires"
            label="Expira em"
            type="date"
            value={expiresAt}
            onChange={(e) => {
              setExpiresTouched(true);
              setExpiresAt(e.target.value);
            }}
            required
          />

          <div className="flex justify-end">
            <Button type="submit" disabled={saving}>
              {saving ? "Salvando..." : "Conceder acesso"}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}