import { useState } from "react";

import { LauncherTilePicker } from "@/client/components/admin/launcher-tile-picker";
import { FormActions } from "@/client/components/ui/form-actions";
import { Input } from "@/client/components/ui/input";
import type { LauncherIconName, LauncherTintName } from "@/client/lib/launcher-icons";

export interface AppFormValues {
  name: string;
  url: string;
  icon: LauncherIconName | null;
  tint: LauncherTintName | null;
}

interface AppFormInitial {
  name: string;
  url: string;
  icon: LauncherIconName | "";
  tint: LauncherTintName | "";
}

interface AppFormProps {
  mode: "create" | "edit";
  initial?: Partial<AppFormInitial>;
  pending: boolean;
  error?: string | null;
  onDismissError?: () => void;
  onSubmit: (values: AppFormValues) => Promise<void>;
  onCancel: () => void;
}

export const AppForm = ({ mode, initial, pending, error, onDismissError, onSubmit, onCancel }: AppFormProps) => {
  const [name, setName] = useState(initial?.name ?? "");
  const [url, setUrl] = useState(initial?.url ?? "");
  const [icon, setIcon] = useState<LauncherIconName | "">(initial?.icon ?? "");
  const [tint, setTint] = useState<LauncherTintName | "">(initial?.tint ?? "");
  const isEdit = mode === "edit";

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (pending) return;
    await onSubmit({
      name: name.trim(),
      url: url.trim(),
      icon: icon || null,
      tint: tint || null,
    });
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
      <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} required autoFocus={!isEdit} />
      <Input
        label="URL"
        placeholder="https://anvil.limic.dev"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        type="url"
        required
      />
      <LauncherTilePicker icon={icon} tint={tint} name={name} onIconChange={setIcon} onTintChange={setTint} />
      <FormActions
        pending={pending}
        error={error}
        onDismissError={onDismissError}
        submitLabel={isEdit ? "Save changes" : "Add tile"}
        onCancel={onCancel}
      />
    </form>
  );
};