import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/settings")({ component: SettingsAdmin });

type Settings = {
  id: number;
  phone: string;
  whatsapp: string;
  email: string;
  location: string;
  hours: string;
  facebook_url: string | null;
  twitter_url: string | null;
  instagram_url: string | null;
  tiktok_url: string | null;
  whatsapp_group_url: string | null;
};

function SettingsAdmin() {
  const [s, setS] = useState<Settings | null>(null);

  useEffect(() => {
    supabase.from("business_settings").select("*").eq("id", 1).maybeSingle().then(({ data, error }) => {
      if (error) toast.error(error.message);
      else setS(data as Settings);
    });
  }, []);

  const save = async () => {
    if (!s) return;
    const { error } = await supabase.from("business_settings").update(s).eq("id", 1);
    if (error) return toast.error(error.message);
    toast.success("Settings saved");
  };

  if (!s) return <p className="text-sm text-muted-foreground">Loading…</p>;

  const field = (k: keyof Settings, label: string, placeholder?: string) => (
    <div className="space-y-2">
      <Label>{label}</Label>
      <Input
        value={(s[k] as string) ?? ""}
        placeholder={placeholder}
        onChange={(e) => setS({ ...s, [k]: e.target.value })}
      />
    </div>
  );

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Business settings</h1>
        <p className="text-sm text-muted-foreground">Contact details and social links shown on the site.</p>
      </div>
      <Card className="glass">
        <CardHeader><CardTitle>Contact</CardTitle></CardHeader>
        <CardContent className="grid gap-4 md:grid-cols-2">
          {field("phone", "Phone")}
          {field("whatsapp", "WhatsApp")}
          {field("email", "Email")}
          {field("location", "Location")}
          {field("hours", "Business hours")}
          {field("whatsapp_group_url", "WhatsApp group invite link", "https://chat.whatsapp.com/…")}
        </CardContent>
      </Card>
      <Card className="glass">
        <CardHeader><CardTitle>Social links</CardTitle></CardHeader>
        <CardContent className="grid gap-4 md:grid-cols-2">
          {field("facebook_url", "Facebook URL", "https://facebook.com/…")}
          {field("twitter_url", "Twitter / X URL")}
          {field("instagram_url", "Instagram URL")}
          {field("tiktok_url", "TikTok URL")}
        </CardContent>
      </Card>
      <Button onClick={save} className="shadow-glow">Save changes</Button>
    </div>
  );
}