import { useEffect, useState } from "react";
import * as ImagePicker from "expo-image-picker";
import {
  Alert,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  StyleSheet,
  Switch,
  Text,
  View,
} from "react-native";

import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { Input } from "@/components/ui/Input";
import { fonts, spacing } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";
import type { ThemeColors } from "@/lib/theme-palette";
import { useThemedStyles } from "@/lib/use-themed-styles";
import { isRequiredString, useFieldVisibility } from "@/lib/form-validation";
import { api } from "@/lib/trpc";
import { BusinessBrandImage } from "@/components/businesses/BusinessBrandImage";
import {
  getBrandAssetFieldNames,
  type BrandAssetKind,
  type BrandAssetTheme,
} from "@beenvoice/domain/brand-assets";

type BusinessFormValues = {
  name: string;
  nickname: string;
  email: string;
  phone: string;
  addressLine1: string;
  addressLine2: string;
  city: string;
  state: string;
  postalCode: string;
  country: string;
  website: string;
  taxId: string;
  hideNameWithLogo: boolean;
  isDefault: boolean;
};

const emptyValues: BusinessFormValues = {
  name: "",
  nickname: "",
  email: "",
  phone: "",
  addressLine1: "",
  addressLine2: "",
  city: "",
  state: "",
  postalCode: "",
  country: "United States",
  website: "",
  taxId: "",
  hideNameWithLogo: false,
  isDefault: false,
};

const MAX_BRAND_ASSET_BYTES = 5 * 1024 * 1024;
const BRAND_ASSET_SLOTS: Array<{
  kind: BrandAssetKind;
  theme: BrandAssetTheme;
  label: string;
}> = [
  { kind: "logo", theme: "light", label: "Logo · light" },
  { kind: "logo", theme: "dark", label: "Logo · dark" },
  { kind: "wordmark", theme: "light", label: "Wordmark · light" },
  { kind: "wordmark", theme: "dark", label: "Wordmark · dark" },
  { kind: "icon", theme: "light", label: "Icon · light" },
  { kind: "icon", theme: "dark", label: "Icon · dark" },
];

type BusinessFormProps = {
  mode: "create" | "edit";
  businessId?: string;
  scrollPadding: number;
  onSaved: () => void;
  onDeleted?: () => void;
};

export function BusinessForm({
  mode,
  businessId,
  scrollPadding,
  onSaved,
  onDeleted,
}: BusinessFormProps) {
  const { colors } = useAppTheme();
  const styles = useThemedStyles(createBusinessFormStyles);
  const utils = api.useUtils();

  const businessQuery = api.businesses.getById.useQuery(
    { id: businessId ?? "" },
    { enabled: mode === "edit" && Boolean(businessId) },
  );

  const [values, setValues] = useState<BusinessFormValues>(emptyValues);
  const [fieldError, setFieldError] = useState<string | null>(null);
  const [uploadingAsset, setUploadingAsset] = useState<string | null>(null);
  const { touch, visible, markSubmitted } = useFieldVisibility();

  const switchProps = {
    trackColor: { false: colors.switchTrackOff, true: colors.switchTrackOn },
    thumbColor: Platform.OS === "android" ? colors.switchThumb : undefined,
    ios_backgroundColor: colors.switchIosBackground,
  };

  useEffect(() => {
    const business = businessQuery.data;
    if (!business) return;
    setValues({
      name: business.name,
      nickname: business.nickname ?? "",
      email: business.email ?? "",
      phone: business.phone ?? "",
      addressLine1: business.addressLine1 ?? "",
      addressLine2: business.addressLine2 ?? "",
      city: business.city ?? "",
      state: business.state ?? "",
      postalCode: business.postalCode ?? "",
      country: business.country ?? "United States",
      website: business.website ?? "",
      taxId: business.taxId ?? "",
      hideNameWithLogo: business.hideNameWithLogo ?? false,
      isDefault: business.isDefault ?? false,
    });
  }, [businessQuery.data]);

  const createBusiness = api.businesses.create.useMutation({
    onSuccess: () => {
      void utils.businesses.getAll.invalidate();
      onSaved();
    },
    onError: (err) => setFieldError(err.message),
  });

  const updateBusiness = api.businesses.update.useMutation({
    onSuccess: () => {
      void utils.businesses.getAll.invalidate();
      if (businessId)
        void utils.businesses.getById.invalidate({ id: businessId });
      onSaved();
    },
    onError: (err) => setFieldError(err.message),
  });

  const deleteBusiness = api.businesses.delete.useMutation({
    onSuccess: () => {
      void utils.businesses.getAll.invalidate();
      onDeleted?.();
    },
    onError: (err) => Alert.alert("Could not delete business", err.message),
  });
  const uploadLogo = api.businesses.uploadLogo.useMutation({
    onSuccess: () => {
      if (businessId)
        void utils.businesses.getById.invalidate({ id: businessId });
    },
    onError: (err) => Alert.alert("Could not upload brand asset", err.message),
    onSettled: () => setUploadingAsset(null),
  });
  const removeLogo = api.businesses.removeLogo.useMutation({
    onSuccess: () => {
      if (businessId)
        void utils.businesses.getById.invalidate({ id: businessId });
    },
    onError: (err) => Alert.alert("Could not remove brand asset", err.message),
  });

  async function pickBrandAsset(kind: BrandAssetKind, theme: BrandAssetTheme) {
    if (!businessId) return;
    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permission.granted) {
      Alert.alert(
        "Photos access needed",
        "Allow photo access to upload branding.",
      );
      return;
    }
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ["images"],
      quality: 1,
      base64: true,
    });
    if (result.canceled) return;
    const asset = result.assets[0];
    if (!asset?.base64) return;
    const mimeType = asset.mimeType ?? "image/jpeg";
    if (!["image/png", "image/jpeg", "image/webp"].includes(mimeType)) {
      Alert.alert(
        "Unsupported image",
        "Mobile supports PNG, JPEG, and WebP. Upload SVG assets from the web app.",
      );
      return;
    }
    if (asset.fileSize && asset.fileSize > MAX_BRAND_ASSET_BYTES) {
      Alert.alert("Image too large", "Brand assets must be 5MB or less.");
      return;
    }
    const key = `${kind}-${theme}`;
    setUploadingAsset(key);
    uploadLogo.mutate({
      id: businessId,
      kind,
      theme,
      filename: asset.fileName ?? `${key}.jpg`,
      mimeType,
      data: asset.base64,
    });
  }

  function patch<K extends keyof BusinessFormValues>(
    field: K,
    value: BusinessFormValues[K],
  ) {
    setValues((prev) => ({ ...prev, [field]: value }));
    setFieldError(null);
  }

  function buildPayload() {
    return {
      name: values.name.trim(),
      nickname: values.nickname.trim(),
      email: values.email.trim(),
      phone: values.phone.trim(),
      addressLine1: values.addressLine1.trim(),
      addressLine2: values.addressLine2.trim(),
      city: values.city.trim(),
      state: values.state.trim(),
      postalCode: values.postalCode.trim(),
      country: values.country.trim() || "United States",
      website: values.website.trim(),
      taxId: values.taxId.trim(),
      hideNameWithLogo: values.hideNameWithLogo,
      isDefault: values.isDefault,
    };
  }

  function handleSave() {
    markSubmitted();
    if (!canSave) return;

    const payload = buildPayload();

    if (mode === "create") {
      createBusiness.mutate(payload);
      return;
    }

    if (!businessId) return;
    updateBusiness.mutate({ id: businessId, ...payload });
  }

  function confirmDelete() {
    if (!businessId) return;
    Alert.alert(
      "Delete business",
      "This cannot be undone. Businesses with invoices cannot be deleted.",
      [
        { text: "Cancel", style: "cancel" },
        {
          text: "Delete",
          style: "destructive",
          onPress: () => deleteBusiness.mutate({ id: businessId }),
        },
      ],
    );
  }

  const saving = createBusiness.isPending || updateBusiness.isPending;
  const nameError = values.name.trim()
    ? undefined
    : "Business name is required";
  const canSave = isRequiredString(values.name);

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : undefined}
      style={styles.flex}
    >
      <ScrollView
        contentContainerStyle={[
          styles.container,
          { paddingBottom: scrollPadding },
        ]}
        contentInsetAdjustmentBehavior={
          Platform.OS === "ios" ? "automatic" : undefined
        }
        scrollIndicatorInsets={{ bottom: scrollPadding }}
        keyboardShouldPersistTaps="handled"
      >
        <Card title="Profile">
          <Input
            label="Name"
            value={values.name}
            onChangeText={(v) => patch("name", v)}
            onBlur={() => touch("name")}
            required
            error={visible("name") ? nameError : undefined}
          />
          <Input
            label="Nickname"
            value={values.nickname}
            onChangeText={(v) => patch("nickname", v)}
            placeholder="Optional short name"
          />
          <Input
            label="Email"
            value={values.email}
            onChangeText={(v) => patch("email", v)}
            keyboardType="email-address"
            autoCapitalize="none"
          />
          <Input
            label="Phone"
            value={values.phone}
            onChangeText={(v) => patch("phone", v)}
            keyboardType="phone-pad"
          />
          <Input
            label="Website"
            value={values.website}
            onChangeText={(v) => patch("website", v)}
            autoCapitalize="none"
            keyboardType="url"
            placeholder="https://"
          />
          <Input
            label="Tax ID"
            value={values.taxId}
            onChangeText={(v) => patch("taxId", v)}
            placeholder="Optional"
          />
          <View style={styles.switchRow}>
            <View style={styles.switchCopy}>
              <Text style={[styles.switchLabel, { color: colors.foreground }]}>
                Default business
              </Text>
              <Text
                style={[styles.switchHint, { color: colors.mutedForeground }]}
              >
                Used for new invoices when none is selected
              </Text>
            </View>
            <Switch
              value={values.isDefault}
              onValueChange={(v) => patch("isDefault", v)}
              {...switchProps}
            />
          </View>
        </Card>

        {mode === "edit" && businessQuery.data ? (
          <Card title="Brand assets">
            <Text style={[styles.brandHint, { color: colors.mutedForeground }]}>
              Upload combined logos, wordmarks, and compact icons for light and
              dark backgrounds. Missing variants fall back automatically.
            </Text>
            {BRAND_ASSET_SLOTS.map((slot) => {
              const [storageField] = getBrandAssetFieldNames(
                slot.kind,
                slot.theme,
              );
              const hasAsset = Boolean(businessQuery.data[storageField]);
              const key = `${slot.kind}-${slot.theme}`;
              return (
                <View key={key} style={styles.brandSlot}>
                  <View
                    style={[
                      styles.brandPreview,
                      {
                        backgroundColor:
                          slot.theme === "dark" ? "#09090b" : "#ffffff",
                        borderColor: colors.border,
                      },
                    ]}
                  >
                    {hasAsset ? (
                      <BusinessBrandImage
                        business={businessQuery.data}
                        kind={slot.kind}
                        theme={slot.theme}
                        style={styles.brandImage}
                      />
                    ) : (
                      <Text
                        style={{
                          color:
                            slot.theme === "dark"
                              ? "rgba(255,255,255,0.45)"
                              : "rgba(0,0,0,0.35)",
                        }}
                      >
                        No asset
                      </Text>
                    )}
                  </View>
                  <Text
                    style={[styles.brandLabel, { color: colors.foreground }]}
                  >
                    {slot.label}
                  </Text>
                  <View style={styles.brandActions}>
                    <Button
                      title={hasAsset ? "Replace" : "Upload"}
                      variant="secondary"
                      leftIcon="cloud-upload-outline"
                      loading={uploadingAsset === key}
                      disabled={Boolean(uploadingAsset)}
                      style={styles.brandAction}
                      onPress={() => void pickBrandAsset(slot.kind, slot.theme)}
                    />
                    {hasAsset ? (
                      <Button
                        title="Remove"
                        variant="ghost"
                        leftIcon="trash-outline"
                        loading={removeLogo.isPending}
                        style={styles.brandAction}
                        onPress={() =>
                          removeLogo.mutate({
                            id: businessId!,
                            kind: slot.kind,
                            theme: slot.theme,
                          })
                        }
                      />
                    ) : null}
                  </View>
                </View>
              );
            })}
            <View style={styles.switchRow}>
              <View style={styles.switchCopy}>
                <Text
                  style={[styles.switchLabel, { color: colors.foreground }]}
                >
                  Hide business name on invoices
                </Text>
                <Text
                  style={[styles.switchHint, { color: colors.mutedForeground }]}
                >
                  Useful when the combined logo already includes the name
                </Text>
              </View>
              <Switch
                value={values.hideNameWithLogo}
                onValueChange={(value) => patch("hideNameWithLogo", value)}
                {...switchProps}
              />
            </View>
          </Card>
        ) : null}

        <Card title="Address">
          <Input
            label="Address line 1"
            value={values.addressLine1}
            onChangeText={(v) => patch("addressLine1", v)}
          />
          <Input
            label="Address line 2"
            value={values.addressLine2}
            onChangeText={(v) => patch("addressLine2", v)}
          />
          <Input
            label="City"
            value={values.city}
            onChangeText={(v) => patch("city", v)}
          />
          <Input
            label="State"
            value={values.state}
            onChangeText={(v) => patch("state", v)}
          />
          <Input
            label="Postal code"
            value={values.postalCode}
            onChangeText={(v) => patch("postalCode", v)}
          />
          <Input
            label="Country"
            value={values.country}
            onChangeText={(v) => patch("country", v)}
          />
        </Card>

        {fieldError ? (
          <Text selectable style={styles.error}>
            {fieldError}
          </Text>
        ) : null}

        <View style={styles.actions}>
          <Button
            title={mode === "create" ? "Create business" : "Save changes"}
            loading={saving}
            disabled={!canSave}
            onPress={handleSave}
          />
          {mode === "edit" ? (
            <Button
              title="Delete business"
              variant="danger"
              loading={deleteBusiness.isPending}
              onPress={confirmDelete}
            />
          ) : null}
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const createBusinessFormStyles = (colors: ThemeColors, _isDark: boolean) =>
  StyleSheet.create({
    flex: { flex: 1 },
    container: {
      padding: spacing.md,
      gap: spacing.md,
    },
    switchRow: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      gap: spacing.md,
      paddingTop: spacing.xs,
    },
    switchCopy: {
      flex: 1,
      gap: 2,
    },
    switchLabel: {
      fontFamily: fonts.bodyMedium,
      fontSize: 14,
    },
    switchHint: {
      fontFamily: fonts.body,
      fontSize: 12,
      lineHeight: 16,
    },
    actions: {
      gap: spacing.sm,
    },
    brandHint: {
      fontFamily: fonts.body,
      fontSize: 13,
      lineHeight: 18,
    },
    brandSlot: {
      gap: spacing.sm,
      paddingVertical: spacing.xs,
    },
    brandPreview: {
      height: 92,
      borderWidth: 1,
      borderRadius: 12,
      alignItems: "center",
      justifyContent: "center",
      padding: spacing.md,
    },
    brandImage: {
      width: "100%",
      height: "100%",
    },
    brandLabel: {
      fontFamily: fonts.bodySemiBold,
      fontSize: 14,
    },
    brandActions: {
      flexDirection: "row",
      gap: spacing.sm,
    },
    brandAction: {
      flex: 1,
    },
    error: {
      color: colors.destructive,
      fontFamily: fonts.body,
      fontSize: 14,
    },
  });