import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useMemo, useState } from "react";
import {
  Alert,
  KeyboardAvoidingView,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";

import { AppBackground } from "@/components/AppBackground";
import {
  InvoiceEditorSectionTabs,
  type InvoiceEditorSection,
} from "@/components/invoices/InvoiceEditorSectionTabs";
import { InvoiceEditorFooter } from "@/components/invoices/InvoiceEditorFooter";
import { InvoicePdfPreview } from "@/components/invoices/InvoicePdfPreview";
import { InvoiceSetupForm } from "@/components/invoices/InvoiceSetupForm";
import { InvoiceTotals } from "@/components/invoices/InvoiceTotals";
import { LineItemEditor, type EditableLineItem } from "@/components/invoices/LineItemEditor";
import { LoadingScreen } from "@/components/LoadingScreen";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { fonts, spacing } from "@/constants/theme";
import { formatCurrency } from "@/lib/format";
import {
  isRequiredString,
  isValidTaxRate,
  validateLineItems,
} from "@/lib/form-validation";
import { resolveInvoiceBusinessId } from "@/lib/invoice-business";
import { defaultDueDate, generateInvoiceNumber } from "@/lib/invoice-number";
import { buildPreviewPdfInput } from "@/lib/invoice-pdf-input";
import { useTabBarScrollPadding } from "@/lib/tab-bar-insets";
import type { ThemeColors } from "@/lib/theme-palette";
import { useThemedStyles } from "@/lib/use-themed-styles";
import { api } from "@/lib/trpc";

export default function NewInvoiceScreen() {
  const styles = useThemedStyles(createNewInvoiceStyles);
  const utils = api.useUtils();
  const scrollPadding = useTabBarScrollPadding();
  const { blank } = useLocalSearchParams<{ blank?: string }>();
  const isBlank = blank === "1" || blank === "true";

  const businessesQuery = api.businesses.getAll.useQuery();
  const clientsQuery = api.clients.getAll.useQuery();

  const [businessId, setBusinessId] = useState("");
  const [clientId, setClientId] = useState("");
  const [invoiceNumber, setInvoiceNumber] = useState(generateInvoiceNumber);
  const [issueDate, setIssueDate] = useState(() => new Date());
  const [dueDate, setDueDate] = useState(() => defaultDueDate(new Date()));
  const [notes, setNotes] = useState("");
  const [taxRate, setTaxRate] = useState("0");
  const [items, setItems] = useState<EditableLineItem[]>(() =>
    isBlank
      ? []
      : [
          {
            date: new Date(),
            description: "",
            hours: "1",
            rate: "0",
          },
        ],
  );
  const [section, setSection] = useState<InvoiceEditorSection>("setup");
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (businessId || !businessesQuery.data?.length) return;
    setBusinessId(resolveInvoiceBusinessId(null, businessesQuery.data));
  }, [businessId, businessesQuery.data]);

  const businessOptions = useMemo(
    () =>
      (businessesQuery.data ?? []).map((business) => ({
        label: business.name,
        value: business.id,
      })),
    [businessesQuery.data],
  );

  const clientOptions = useMemo(
    () =>
      (clientsQuery.data ?? []).map((client) => ({
        label: client.name,
        value: client.id,
      })),
    [clientsQuery.data],
  );

  const selectedClient = clientsQuery.data?.find((client) => client.id === clientId);
  const currency = selectedClient?.currency ?? "USD";
  const resolvedBusinessId = resolveInvoiceBusinessId(businessId, businessesQuery.data);

  useEffect(() => {
    if (!selectedClient?.defaultHourlyRate) return;
    setItems((prev) =>
      prev.map((item, index) =>
        index === 0 && (item.rate === "0" || item.rate === "")
          ? { ...item, rate: String(selectedClient.defaultHourlyRate) }
          : item,
      ),
    );
  }, [selectedClient?.defaultHourlyRate, selectedClient?.id]);

  const createInvoice = api.invoices.create.useMutation({
    onSuccess: (invoice) => {
      void utils.invoices.getAll.invalidate();
      void utils.dashboard.getStats.invalidate();
      Alert.alert("Invoice created", "Your draft invoice is ready.", [
        {
          text: "View invoice",
          onPress: () => router.replace(`/(app)/invoices/${invoice.id}`),
        },
      ]);
    },
    onError: (err) => setError(err.message),
  });

  const subtotal = useMemo(
    () =>
      items.reduce((sum, item) => {
        const hours = Number(item.hours) || 0;
        const rate = Number(item.rate) || 0;
        return sum + hours * rate;
      }, 0),
    [items],
  );

  const parsedTaxRate = Number(taxRate) || 0;
  const taxAmount = subtotal * (parsedTaxRate / 100);
  const total = subtotal + taxAmount;

  const previewInput = useMemo(
    () =>
      buildPreviewPdfInput({
        invoiceNumber,
        businessId: resolvedBusinessId,
        clientId,
        issueDate,
        dueDate,
        taxRate: parsedTaxRate,
        currency,
        notes,
        items,
      }),
    [
      invoiceNumber,
      resolvedBusinessId,
      clientId,
      issueDate,
      dueDate,
      parsedTaxRate,
      currency,
      notes,
      items,
    ],
  );

  const businessError = resolvedBusinessId ? undefined : "Select a business";
  const clientError = clientId ? undefined : "Select a client";
  const invoiceNumberError = isRequiredString(invoiceNumber)
    ? undefined
    : "Invoice number is required";
  const taxError = isValidTaxRate(taxRate) ? undefined : "Tax rate must be between 0 and 100";
  const lineItemsError = validateLineItems(items);
  const canCreate =
    businessOptions.length > 0 &&
    clientOptions.length > 0 &&
    !businessError &&
    !clientError &&
    !invoiceNumberError &&
    !taxError &&
    !lineItemsError;

  if (businessesQuery.isLoading || clientsQuery.isLoading) {
    return <LoadingScreen message="Loading…" />;
  }

  function updateItem(index: number, patch: Partial<EditableLineItem>) {
    setItems((prev) => prev.map((item, i) => (i === index ? { ...item, ...patch } : item)));
  }

  function addItem() {
    setItems((prev) => [
      ...prev,
      {
        date: new Date(),
        description: "",
        hours: "1",
        rate: prev[prev.length - 1]?.rate ?? "0",
      },
    ]);
  }

  function removeItem(index: number) {
    setItems((prev) => prev.filter((_, i) => i !== index));
  }

  function handleCreate() {
    if (!canCreate) return;
    setError(null);

    const parsedItems: Array<{
      date: Date;
      description: string;
      hours: number;
      rate: number;
    }> = [];

    for (const item of items) {
      parsedItems.push({
        date: item.date,
        description: item.description.trim(),
        hours: Number(item.hours),
        rate: Number(item.rate),
      });
    }

    createInvoice.mutate({
      businessId: resolvedBusinessId,
      clientId,
      invoiceNumber: invoiceNumber.trim(),
      issueDate,
      dueDate,
      notes,
      taxRate: Number(taxRate),
      currency,
      items: parsedItems,
      status: "draft",
    });
  }

  return (
    <AppBackground>
      <Stack.Screen
        options={{
          headerBackTitle: "Invoices",
          title: isBlank ? "Blank invoice" : "New invoice",
        }}
      />
      <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"
        >
          <InvoiceEditorSectionTabs value={section} onChange={setSection} />

          {section === "preview" ? (
            <Card title="PDF preview">
              <InvoicePdfPreview input={previewInput} />
            </Card>
          ) : section === "setup" ? (
            <Card title="Invoice setup">
              {clientOptions.length === 0 || businessOptions.length === 0 ? (
                <View style={styles.noEntities}>
                  <Text style={styles.noEntitiesText}>
                    {businessOptions.length === 0
                      ? "Add a business before creating an invoice."
                      : "Add a client before creating an invoice."}
                  </Text>
                  <Button
                    title={businessOptions.length === 0 ? "Add business" : "Add client"}
                    variant="secondary"
                    onPress={() =>
                      router.push(
                        businessOptions.length === 0
                          ? "/(app)/entities/businesses/new"
                          : "/(app)/entities/clients/new",
                      )
                    }
                  />
                </View>
              ) : (
                <InvoiceSetupForm
                  businessId={businessId}
                  onBusinessIdChange={setBusinessId}
                  businessOptions={businessOptions}
                  businessError={businessError}
                  clientId={clientId}
                  onClientIdChange={setClientId}
                  clientOptions={clientOptions}
                  clientError={clientError}
                  invoiceNumber={invoiceNumber}
                  onInvoiceNumberChange={setInvoiceNumber}
                  issueDate={issueDate}
                  onIssueDateChange={setIssueDate}
                  dueDate={dueDate}
                  onDueDateChange={setDueDate}
                  taxRate={taxRate}
                  onTaxRateChange={setTaxRate}
                  notes={notes}
                  onNotesChange={setNotes}
                />
              )}
              {taxError ? <Text style={styles.error}>{taxError}</Text> : null}
              {invoiceNumberError ? (
                <Text style={styles.error}>{invoiceNumberError}</Text>
              ) : null}
            </Card>
          ) : (
            <>
              <Card title="Line items">
                {isBlank && items.length === 0 ? (
                  <Text style={styles.emptyLines}>
                    No line items yet. Save this draft and clock time to it from the Timer tab,
                    or add lines here.
                  </Text>
                ) : null}
                {items.map((item, index) => (
                  <LineItemEditor
                    key={`new-${index}`}
                    index={index}
                    item={item}
                    currency={currency}
                    isLast={index === items.length - 1}
                    onChange={(patch) => updateItem(index, patch)}
                    onRemove={() => removeItem(index)}
                  />
                ))}

                <Pressable accessibilityRole="button" onPress={addItem} style={styles.addLine}>
                  <Text style={styles.addLineText}>+ Add another line</Text>
                </Pressable>

                <InvoiceTotals
                  subtotal={formatCurrency(subtotal, currency)}
                  taxLabel={parsedTaxRate > 0 ? `Tax (${parsedTaxRate}%)` : undefined}
                  taxAmount={
                    parsedTaxRate > 0 ? formatCurrency(taxAmount, currency) : undefined
                  }
                  total={formatCurrency(total, currency)}
                />
              </Card>

              {lineItemsError ? <Text style={styles.error}>{lineItemsError}</Text> : null}
            </>
          )}

          {error ? <Text style={styles.error}>{error}</Text> : null}

          <InvoiceEditorFooter
            primaryTitle={isBlank ? "Create blank invoice" : "Create invoice"}
            onPrimary={handleCreate}
            primaryLoading={createInvoice.isPending}
            primaryDisabled={!canCreate}
          />
        </ScrollView>
      </KeyboardAvoidingView>
    </AppBackground>
  );
}

const createNewInvoiceStyles = (colors: ThemeColors, _isDark: boolean) =>
  StyleSheet.create({
    flex: { flex: 1 },
    container: {
      padding: spacing.md,
      gap: spacing.md,
    },
    noEntities: {
      gap: spacing.sm,
    },
    noEntitiesText: {
      fontFamily: fonts.body,
      fontSize: 14,
      color: colors.mutedForeground,
      lineHeight: 20,
    },
    emptyLines: {
      fontFamily: fonts.body,
      fontSize: 14,
      lineHeight: 20,
      color: colors.mutedForeground,
      marginBottom: spacing.sm,
    },
    addLine: {
      paddingTop: spacing.md,
      paddingBottom: spacing.xs,
    },
    addLineText: {
      fontFamily: fonts.bodySemiBold,
      fontSize: 14,
      color: colors.primary,
    },
    error: {
      color: colors.destructive,
      fontFamily: fonts.body,
      fontSize: 14,
    },
  });