"use client";

import { useState, type FormEvent } from "react";
import type { ContactSettings } from "@/types/settings";
import { Button } from "@/components/ui/button";
import { Input, Textarea } from "@/components/ui/input";
import { useToast } from "@/components/ui/toast";
import { clientFetch } from "@/lib/api/client";

export function ContactSettingsForm({ initial }: { initial: ContactSettings }) {
  const [email, setEmail] = useState(initial.contact_email ?? "");
  const [phone, setPhone] = useState(initial.contact_phone ?? "");
  const [address, setAddress] = useState(initial.contact_address ?? "");
  const [socialMedia, setSocialMedia] = useState(initial.contact_social_media ?? "");
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { toast } = useToast();

  async function handleSubmit(formEvent: FormEvent<HTMLFormElement>) {
    formEvent.preventDefault();
    setMessage(null);
    setError(null);
    setIsSubmitting(true);

    const res = await clientFetch("/api/admin/settings/contact", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contact_email: email || null,
        contact_phone: phone || null,
        contact_address: address || null,
        contact_social_media: socialMedia || null,
      }),
    });

    setIsSubmitting(false);
    const body = await res.json().catch(() => null);

    if (!res.ok) {
      const errorMessage = body?.message ?? "Failed to save contact information.";
      setError(errorMessage);
      toast(errorMessage, "error");
      return;
    }

    const successMessage = body?.message ?? "Saved.";
    setMessage(successMessage);
    toast(successMessage, "success");
  }

  return (
    <form onSubmit={handleSubmit} className="mt-3 flex flex-col gap-3">
      <label className="flex flex-col gap-1 text-sm font-medium">
        Contact Email
        <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        Phone Number
        <Input value={phone} onChange={(e) => setPhone(e.target.value)} />
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        Address
        <Textarea rows={2} value={address} onChange={(e) => setAddress(e.target.value)} />
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        Social Media
        <Input value={socialMedia} onChange={(e) => setSocialMedia(e.target.value)} placeholder="@kolaborativ" />
      </label>
      {message && <p className="text-sm text-green-600">{message}</p>}
      {error && <p className="text-sm text-red-600">{error}</p>}
      <Button type="submit" loading={isSubmitting} className="mt-1 self-start">
        Save
      </Button>
    </form>
  );
}