"use client";

import { useRef, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { ImageUp, Loader2, Store, Trash2 } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { SettingsCard } from "./settings-card";
import { SettingField } from "./setting-field";
import { SaveButton } from "./save-button";
import {
  removeStoreLogo,
  updateGeneralSettings,
  uploadStoreLogo,
  type StoreSettingsData,
} from "@/lib/actions/settings";

interface GeneralSettingsProps {
  settings: StoreSettingsData;
}

/**
 * Core store identity and contact details.
 */
export function GeneralSettings({ settings }: GeneralSettingsProps) {
  const router = useRouter();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [logoUrl, setLogoUrl] = useState<string | null>(settings.logoUrl);
  const [logoBusy, setLogoBusy] = useState(false);
  const [logoMessage, setLogoMessage] = useState<{
    ok: boolean;
    text: string;
  } | null>(null);

  const [storeName, setStoreName] = useState(settings.storeName ?? "");
  const [description, setDescription] = useState(
    settings.storeDescription ?? "",
  );
  const [email, setEmail] = useState(settings.storeEmail ?? "");
  const [phone, setPhone] = useState(settings.storePhone ?? "");
  const [address, setAddress] = useState(settings.storeAddress ?? "");

  async function handleLogoChange(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file) return;
    setLogoBusy(true);
    setLogoMessage(null);
    const formData = new FormData();
    formData.append("file", file);
    const result = await uploadStoreLogo(formData);
    setLogoBusy(false);
    if (fileInputRef.current) fileInputRef.current.value = "";
    if (!result.ok) {
      setLogoMessage({ ok: false, text: result.error });
      return;
    }
    setLogoUrl(result.data?.logoUrl ?? null);
    setLogoMessage({ ok: true, text: result.message ?? "Logo updated." });
    router.refresh();
  }

  async function handleRemoveLogo() {
    setLogoBusy(true);
    setLogoMessage(null);
    const result = await removeStoreLogo();
    setLogoBusy(false);
    if (!result.ok) {
      setLogoMessage({ ok: false, text: result.error });
      return;
    }
    setLogoUrl(null);
    setLogoMessage({ ok: true, text: result.message ?? "Logo removed." });
    router.refresh();
  }

  return (
    <SettingsCard
      title="General"
      description="Manage your store's public identity and contact information."
      icon={<Store className="h-4 w-4" />}
      footer={
        <SaveButton
          onSave={() =>
            updateGeneralSettings({
              storeName,
              storeDescription: description,
              storeEmail: email,
              storePhone: phone,
              storeAddress: address,
            })
          }
        />
      }
    >
      <div className="space-y-6">
        {/* Logo */}
        <div className="flex items-center gap-4">
          <div className="relative flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-dashed bg-muted/40 text-sm font-bold tracking-tight text-muted-foreground">
            {logoUrl ? (
              <Image
                src={logoUrl}
                alt="Store logo preview"
                fill
                sizes="80px"
                className="object-contain"
              />
            ) : (
              <span>S.I.</span>
            )}
          </div>
          <div className="space-y-2">
            <Label htmlFor="logo-file" className="text-sm font-medium">
              Store logo
            </Label>
            <p className="text-xs text-muted-foreground">
              PNG, JPG or WebP up to 2 MB. Square recommended. SVG is not
              accepted for security.
            </p>
            <div className="flex flex-wrap items-center gap-2">
              <label
                htmlFor="logo-file"
                className={`inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full border border-input bg-background px-4 text-sm font-medium text-foreground shadow-xs transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 ${
                  logoBusy ? "pointer-events-none opacity-60" : ""
                }`}
              >
                {logoBusy ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <ImageUp className="h-4 w-4" />
                )}
                {logoBusy ? "Uploading…" : "Upload logo"}
              </label>
              {logoUrl && (
                <button
                  type="button"
                  onClick={handleRemoveLogo}
                  disabled={logoBusy}
                  className="inline-flex h-9 items-center gap-1.5 rounded-full border border-input bg-background px-4 text-sm font-medium text-destructive shadow-xs transition-colors hover:bg-destructive/10 disabled:opacity-60"
                >
                  <Trash2 className="h-4 w-4" />
                  Remove
                </button>
              )}
            </div>
            <input
              ref={fileInputRef}
              id="logo-file"
              type="file"
              className="sr-only"
              accept="image/png,image/jpeg,image/webp"
              onChange={handleLogoChange}
              disabled={logoBusy}
            />
            {logoMessage && (
              <p
                className={`text-xs ${
                  logoMessage.ok ? "text-green-600" : "text-destructive"
                }`}
              >
                {logoMessage.text}
              </p>
            )}
          </div>
        </div>

        <Separatorish />

        <SettingField
          id="store-name"
          label="Store name"
          description="Used across invoices, emails, and the customer-facing storefront."
          control={
            <Input
              id="store-name"
              value={storeName}
              onChange={(e) => setStoreName(e.target.value)}
              placeholder="My Store"
            />
          }
        />

        <SettingField
          id="store-description"
          label="Store description"
          control={
            <Textarea
              id="store-description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={3}
            />
          }
        />

        <SettingField
          id="store-email"
          label="Store email"
          description="Where order and customer notifications are sent."
          control={
            <Input
              id="store-email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          }
        />

        <SettingField
          id="store-phone"
          label="Store phone"
          control={
            <Input
              id="store-phone"
              type="tel"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
          }
        />

        <SettingField
          id="store-address"
          label="Store address"
          control={
            <Textarea
              id="store-address"
              value={address}
              onChange={(e) => setAddress(e.target.value)}
              rows={2}
            />
          }
        />
      </div>
    </SettingsCard>
  );
}

function Separatorish() {
  return <div className="h-px w-full bg-border/60" aria-hidden />;
}