import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Alert,
  ActivityIndicator,
  Modal,
  Share,
  Platform,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Stack, useRouter } from 'expo-router';
import { 
  ArrowLeft, 
  Building2, 
  FileText, 
  Users, 
  BarChart3, 
  Plus,
  CheckCircle,
  Clock,
  DollarSign,
  TrendingUp,
  Download,
  Zap
} from 'lucide-react-native';
import { trpc } from '@/lib/trpc';
import { QRCode } from '@/lib/qr-code';

export default function BusinessScreen() {
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<'overview' | 'invoices' | 'team'>('overview');
  const [payoutAmount, setPayoutAmount] = useState('');
  const [showCreateBusiness, setShowCreateBusiness] = useState(false);
  const [businessForm, setBusinessForm] = useState({
    businessName: '',
    businessType: 'llc' as const,
    industry: '',
    phoneNumber: '',
    email: '',
    street: '',
    city: '',
    state: '',
    zip: '',
  });

  const { data: businessData, isLoading, refetch } = trpc.business.get.useQuery();
  const { data: invoicesData, refetch: refetchInvoices } = trpc.business.getInvoices.useQuery();
  const { data: analyticsData } = trpc.business.analytics.useQuery(undefined, { 
    enabled: !!businessData?.business 
  });
  const { data: teamData } = trpc.business.getTeamMembers.useQuery();
  const { data: forecastData } = trpc.business.revenueForecast.useQuery(undefined, {
    enabled: !!businessData?.business,
  });
  const { data: bankAccountsData } = trpc.banking.getAccounts.useQuery();
  const bookkeepingExportQuery = trpc.business.bookkeepingExport.useQuery(undefined, { enabled: false });
  const payoutFeeQuery = trpc.payouts.estimateFee.useQuery(
    { amount: parseFloat(payoutAmount) || 0, method: 'instant_ach', priority: 'instant' },
    { enabled: !!businessData?.business && parseFloat(payoutAmount) > 0 }
  );
  const payoutMutation = trpc.payouts.create.useMutation({
    onSuccess: (result) => {
      Alert.alert('Instant payout sent', `$${result.netAmount.toFixed(2)} is on its way to your bank.`);
      setPayoutAmount('');
    },
    onError: (err: any) => Alert.alert('Payout failed', err?.message ?? 'Something went wrong'),
  });

  const createBusinessMutation = trpc.business.create.useMutation();

  const [showCreateInvoice, setShowCreateInvoice] = useState(false);
  const [invoiceForm, setInvoiceForm] = useState({
    customerName: '',
    customerEmail: '',
    description: '',
    amount: '',
  });

  const createInvoiceMutation = trpc.business.createInvoice.useMutation({
    onSuccess: () => {
      refetchInvoices();
      setShowCreateInvoice(false);
      setInvoiceForm({ customerName: '', customerEmail: '', description: '', amount: '' });
      Alert.alert('Invoice Created', 'Saved as a draft - send it when you\u2019re ready.');
    },
    onError: () => Alert.alert('Error', 'Could not load business profile.'),
  });

  const sendInvoiceMutation = trpc.business.sendInvoice.useMutation({
    onSuccess: () => refetchInvoices(),
    onError: () => Alert.alert('Error', 'Could not load invoices.'),
  });

  const markPaidMutation = trpc.business.markInvoicePaid.useMutation({
    onSuccess: () => refetchInvoices(),
    onError: () => Alert.alert('Error', 'Could not load payouts.'),
  });

  const [showGetPaid, setShowGetPaid] = useState(false);
  const [getPaidAmount, setGetPaidAmount] = useState('');
  const [getPaidDescription, setGetPaidDescription] = useState('');
  const [activeCheckout, setActiveCheckout] = useState<{ id: string; amount: number } | null>(null);

  const createCheckoutMutation = trpc.checkout.create.useMutation({
    onSuccess: (data) => {
      setActiveCheckout({ id: data.session.id, amount: data.session.amount });
      setShowGetPaid(false);
      setGetPaidAmount('');
      setGetPaidDescription('');
    },
    onError: () => Alert.alert('Error', 'Could not load support data.'),
  });

  const handleCreateInvoice = () => {
    const amount = parseFloat(invoiceForm.amount);
    if (!invoiceForm.customerName.trim() || !invoiceForm.customerEmail.trim() || !invoiceForm.description.trim() || isNaN(amount) || amount <= 0) {
      Alert.alert('Missing info', 'Fill in the customer, what it\u2019s for, and an amount above $0.');
      return;
    }
    const dueDate = new Date();
    dueDate.setDate(dueDate.getDate() + 14);

    createInvoiceMutation.mutate({
      customerName: invoiceForm.customerName.trim(),
      customerEmail: invoiceForm.customerEmail.trim(),
      items: [{ description: invoiceForm.description.trim(), quantity: 1, unitPrice: amount }],
      tax: 0,
      dueDate: dueDate.toISOString(),
    });
  };

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
  };

  const handleExportBooks = async () => {
    try {
      const result = await bookkeepingExportQuery.refetch();
      const text = result.data?.text;
      if (!text) {
        Alert.alert("Couldn't generate export", 'Try again in a moment.');
        return;
      }
      if (Platform.OS === 'web') {
        Alert.alert('Books exported', "Sharing isn't available on web. Open the app on mobile to share or save it.");
        return;
      }
      await Share.share({ message: text, title: 'Zendo Merchant Hub - Bookkeeping Export' });
    } catch {
      Alert.alert("Couldn't export", 'Something went wrong generating your books.');
    }
  };

  const handleInstantPayout = () => {
    const amount = parseFloat(payoutAmount);
    if (isNaN(amount) || amount <= 0) {
      Alert.alert('Enter an amount', 'How much would you like to cash out instantly?');
      return;
    }
    const primaryAccount = bankAccountsData?.find((a: any) => a.isPrimary) ?? bankAccountsData?.[0];
    if (!primaryAccount) {
      Alert.alert('Add a bank account first', 'Head to Settings → Bank Accounts to link one, then come back to cash out instantly.');
      return;
    }
    Alert.alert(
      'Confirm instant payout',
      `Send $${amount.toFixed(2)} to ${primaryAccount.bankName} ••${primaryAccount.last4}? Fee: ${payoutFeeQuery.data ? formatCurrency(payoutFeeQuery.data.fee) : ' - '}.`,
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Send it',
          onPress: () =>
            payoutMutation.mutate({
              destinationType: 'bank_account',
              destinationId: primaryAccount.id,
              amount,
              method: 'instant_ach',
              priority: 'instant',
            }),
        },
      ]
    );
  };

  const handleCreateBusiness = async () => {
    if (!businessForm.businessName || !businessForm.industry || !businessForm.email) {
      Alert.alert('Missing Information', 'Please fill in all required fields');
      return;
    }

    try {
      await createBusinessMutation.mutateAsync({
        businessName: businessForm.businessName,
        businessType: businessForm.businessType,
        industry: businessForm.industry,
        phoneNumber: businessForm.phoneNumber,
        email: businessForm.email,
        address: {
          street: businessForm.street,
          city: businessForm.city,
          state: businessForm.state,
          zip: businessForm.zip,
          country: 'US',
        },
      });

      Alert.alert('Success', 'Business account created!');
      setShowCreateBusiness(false);
      refetch();
    } catch {
      Alert.alert('Error', 'Failed to create business');
    }
  };

  if (isLoading) {
    return (
      <SafeAreaView style={styles.container}>
        <ActivityIndicator size="large" color="#10B981" style={{ marginTop: 100 }} />
      </SafeAreaView>
    );
  }

  if (!businessData?.business && !showCreateBusiness) {
    return (
      <SafeAreaView style={styles.container} edges={['top']}>
        <Stack.Screen options={{ headerShown: false }} />
        
        <View style={styles.header}>
          <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
            <ArrowLeft size={24} color="#FFFFFF" />
          </TouchableOpacity>
          <Text style={styles.title}>Business Account</Text>
        </View>

        <View style={styles.emptyContainer}>
          <Building2 size={64} color="#10B981" />
          <Text style={styles.emptyTitle}>No Business Account</Text>
          <Text style={styles.emptySubtitle}>
            Create a business account to unlock invoicing, payroll, and more
          </Text>
          <TouchableOpacity
            style={styles.createButton}
            onPress={() => setShowCreateBusiness(true)}
          >
            <Plus size={20} color="#FFFFFF" />
            <Text style={styles.createButtonText}>Create Business Account</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }

  if (showCreateBusiness) {
    return (
      <SafeAreaView style={styles.container} edges={['top']}>
        <Stack.Screen options={{ headerShown: false }} />
        
        <View style={styles.header}>
          <TouchableOpacity onPress={() => setShowCreateBusiness(false)} style={styles.backButton}>
            <ArrowLeft size={24} color="#FFFFFF" />
          </TouchableOpacity>
          <Text style={styles.title}>Create Business</Text>
        </View>

        <ScrollView style={styles.content} showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}>
          <View style={styles.formSection}>
            <Text style={styles.formLabel}>Business Name *</Text>
            <TextInput
              style={styles.formInput}
              value={businessForm.businessName}
              onChangeText={(text) => setBusinessForm({ ...businessForm, businessName: text })}
              placeholder="Your Business Name"
              placeholderTextColor="#6B7280"
            />

            <Text style={styles.formLabel}>Industry *</Text>
            <TextInput
              style={styles.formInput}
              value={businessForm.industry}
              onChangeText={(text) => setBusinessForm({ ...businessForm, industry: text })}
              placeholder="e.g., Technology, Retail, Services"
              placeholderTextColor="#6B7280"
            />

            <Text style={styles.formLabel}>Business Email *</Text>
            <TextInput
              style={styles.formInput}
              value={businessForm.email}
              onChangeText={(text) => setBusinessForm({ ...businessForm, email: text })}
              placeholder="business@example.com"
              placeholderTextColor="#6B7280"
              keyboardType="email-address"
              autoCapitalize="none"
            />

            <Text style={styles.formLabel}>Phone Number</Text>
            <TextInput
              style={styles.formInput}
              value={businessForm.phoneNumber}
              onChangeText={(text) => setBusinessForm({ ...businessForm, phoneNumber: text })}
              placeholder="(555) 123-4567"
              placeholderTextColor="#6B7280"
              keyboardType="phone-pad"
            />

            <Text style={styles.formSectionTitle}>Business Address</Text>

            <Text style={styles.formLabel}>Street Address</Text>
            <TextInput
              style={styles.formInput}
              value={businessForm.street}
              onChangeText={(text) => setBusinessForm({ ...businessForm, street: text })}
              placeholder="123 Main Street"
              placeholderTextColor="#6B7280"
            />

            <View style={styles.formRow}>
              <View style={styles.formHalf}>
                <Text style={styles.formLabel}>City</Text>
                <TextInput
                  style={styles.formInput}
                  value={businessForm.city}
                  onChangeText={(text) => setBusinessForm({ ...businessForm, city: text })}
                  placeholder="City"
                  placeholderTextColor="#6B7280"
                />
              </View>
              <View style={styles.formHalf}>
                <Text style={styles.formLabel}>State</Text>
                <TextInput
                  style={styles.formInput}
                  value={businessForm.state}
                  onChangeText={(text) => setBusinessForm({ ...businessForm, state: text })}
                  placeholder="State"
                  placeholderTextColor="#6B7280"
                />
              </View>
            </View>

            <Text style={styles.formLabel}>ZIP Code</Text>
            <TextInput
              style={styles.formInput}
              value={businessForm.zip}
              onChangeText={(text) => setBusinessForm({ ...businessForm, zip: text })}
              placeholder="12345"
              placeholderTextColor="#6B7280"
              keyboardType="numeric"
            />
          </View>

          <TouchableOpacity
            style={[styles.submitButton, createBusinessMutation.isPending && styles.buttonDisabled]}
            onPress={handleCreateBusiness}
            disabled={createBusinessMutation.isPending}
          >
            {createBusinessMutation.isPending ? (
              <ActivityIndicator color="#FFFFFF" />
            ) : (
              <Text style={styles.submitButtonText}>Create Business Account</Text>
            )}
          </TouchableOpacity>

          <View style={{ height: 40 }} />
        </ScrollView>
      </SafeAreaView>
    );
  }

  const business = businessData?.business;

  if (!business) {
    return (
      <SafeAreaView style={styles.container}>
        <ActivityIndicator size="large" color="#10B981" style={{ marginTop: 100 }} />
      </SafeAreaView>
    );
  }

  const handleCreateCheckout = () => {
    const amount = parseFloat(getPaidAmount);
    if (isNaN(amount) || amount <= 0 || !getPaidDescription.trim()) {
      Alert.alert('Missing info', 'Enter an amount and what it\u2019s for.');
      return;
    }
    createCheckoutMutation.mutate({ amount, description: getPaidDescription.trim() });
  };

  const renderOverview = () => (
    <View>
      <View style={styles.businessCard}>
        <View style={styles.businessIcon}>
          <Building2 size={32} color="#10B981" />
        </View>
        <Text style={styles.businessName}>{business.businessName}</Text>
        <Text style={styles.businessType}>{business.businessType.toUpperCase()} • {business.industry}</Text>
        <View style={[
          styles.verificationBadge,
          { backgroundColor: business.verificationStatus === 'verified' ? '#D1FAE5' : '#FEF3C7' }
        ]}>
          {business.verificationStatus === 'verified' ? (
            <CheckCircle size={16} color="#10B981" />
          ) : (
            <Clock size={16} color="#F59E0B" />
          )}
          <Text style={[
            styles.verificationText,
            { color: business.verificationStatus === 'verified' ? '#10B981' : '#F59E0B' }
          ]}>
            {business.verificationStatus.toUpperCase()}
          </Text>
        </View>
      </View>

      <TouchableOpacity style={styles.getPaidButton} onPress={() => setShowGetPaid(true)}>
        <DollarSign size={18} color="#FFFFFF" />
        <Text style={styles.getPaidButtonText}>Get Paid - Create Payment Request</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.taxSummaryLink} onPress={() => router.push('/tax-summary')}>
        <FileText size={16} color="#94A3B8" />
        <Text style={styles.taxSummaryLinkText}>View Tax Summary</Text>
      </TouchableOpacity>

      {analyticsData && (
        <View style={styles.statsGrid}>
          <View style={styles.statCard}>
            <DollarSign size={24} color="#10B981" />
            <Text style={styles.statValue}>{formatCurrency(analyticsData.totalReceived)}</Text>
            <Text style={styles.statLabel}>Total Received</Text>
          </View>
          <View style={styles.statCard}>
            <FileText size={24} color="#3B82F6" />
            <Text style={styles.statValue}>{analyticsData.invoiceCount}</Text>
            <Text style={styles.statLabel}>Total Invoices</Text>
          </View>
          <View style={styles.statCard}>
            <CheckCircle size={24} color="#10B981" />
            <Text style={styles.statValue}>{analyticsData.paidCount}</Text>
            <Text style={styles.statLabel}>Paid</Text>
          </View>
          <View style={styles.statCard}>
            <Clock size={24} color="#F59E0B" />
            <Text style={styles.statValue}>{formatCurrency(analyticsData.pendingAmount)}</Text>
            <Text style={styles.statLabel}>Pending</Text>
          </View>
        </View>
      )}

      {forecastData && (
        <View style={styles.forecastCard}>
          <View style={styles.forecastHeader}>
            <TrendingUp size={18} color="#10B981" />
            <Text style={styles.featuresTitle}>Revenue Forecast</Text>
          </View>
          <Text style={styles.forecastRange}>
            {formatCurrency(forecastData.nextMonthForecast.low)} – {formatCurrency(forecastData.nextMonthForecast.high)}
          </Text>
          <Text style={styles.forecastLabel}>Projected next month (mid: {formatCurrency(forecastData.nextMonthForecast.mid)})</Text>
          <Text style={styles.forecastTrend}>
            Trend: {forecastData.trendDirection === 'up' ? '📈 Up' : forecastData.trendDirection === 'down' ? '📉 Down' : '➡️ Flat'} · Next quarter est. {formatCurrency(forecastData.nextQuarterForecast)}
          </Text>
        </View>
      )}

      <View style={styles.payoutCard}>
        <View style={styles.forecastHeader}>
          <Zap size={18} color="#FBBF24" />
          <Text style={styles.featuresTitle}>Instant Payout</Text>
        </View>
        <Text style={styles.forecastLabel}>Cash out from your balance straight to your bank.</Text>
        <View style={styles.payoutRow}>
          <TextInput
            style={styles.payoutInput}
            value={payoutAmount}
            onChangeText={setPayoutAmount}
            placeholder="$0.00"
            placeholderTextColor="#64748B"
            keyboardType="decimal-pad"
          />
          <TouchableOpacity style={styles.payoutButton} onPress={handleInstantPayout} disabled={payoutMutation.isPending}>
            {payoutMutation.isPending ? <ActivityIndicator color="#0F172A" /> : <Text style={styles.payoutButtonText}>Send</Text>}
          </TouchableOpacity>
        </View>
        {payoutFeeQuery.data && parseFloat(payoutAmount) > 0 && (
          <Text style={styles.forecastLabel}>Fee: {formatCurrency(payoutFeeQuery.data.fee)} · Arrives {payoutFeeQuery.data.estimatedTime}</Text>
        )}
      </View>

      <TouchableOpacity style={styles.exportBooksButton} onPress={handleExportBooks} disabled={bookkeepingExportQuery.isFetching}>
        {bookkeepingExportQuery.isFetching ? (
          <ActivityIndicator color="#FFFFFF" size="small" />
        ) : (
          <>
            <Download size={16} color="#FFFFFF" />
            <Text style={styles.exportBooksButtonText}>Export auto-categorized books</Text>
          </>
        )}
      </TouchableOpacity>

      <View style={styles.featuresCard}>
        <Text style={styles.featuresTitle}>Available Features</Text>
        <View style={styles.featureItem}>
          <FileText size={20} color={business.features.invoicing ? '#10B981' : '#6B7280'} />
          <Text style={[styles.featureText, { color: business.features.invoicing ? '#FFFFFF' : '#6B7280' }]}>
            Invoicing
          </Text>
        </View>
        <View style={styles.featureItem}>
          <Users size={20} color={business.features.multiUser ? '#10B981' : '#6B7280'} />
          <Text style={[styles.featureText, { color: business.features.multiUser ? '#FFFFFF' : '#6B7280' }]}>
            Multi-User Access
          </Text>
        </View>
        <View style={styles.featureItem}>
          <BarChart3 size={20} color={business.features.advancedReporting ? '#10B981' : '#6B7280'} />
          <Text style={[styles.featureText, { color: business.features.advancedReporting ? '#FFFFFF' : '#6B7280' }]}>
            Advanced Reporting
          </Text>
        </View>
      </View>
    </View>
  );

  const renderInvoices = () => (
    <View>
      <TouchableOpacity style={styles.newInvoiceButton} onPress={() => setShowCreateInvoice(true)}>
        <Plus size={18} color="#FFFFFF" />
        <Text style={styles.newInvoiceButtonText}>New Invoice</Text>
      </TouchableOpacity>

      {invoicesData?.invoices?.length ? (
        invoicesData.invoices.map((invoice: any) => (
          <View key={invoice.id} style={styles.invoiceCard}>
            <View style={styles.invoiceHeader}>
              <Text style={styles.invoiceNumber}>{invoice.invoiceNumber}</Text>
              <View style={[
                styles.invoiceStatus,
                { backgroundColor: invoice.status === 'paid' ? '#D1FAE5' : invoice.status === 'sent' ? '#DBEAFE' : '#FEF3C7' }
              ]}>
                <Text style={[
                  styles.invoiceStatusText,
                  { color: invoice.status === 'paid' ? '#10B981' : invoice.status === 'sent' ? '#3B82F6' : '#F59E0B' }
                ]}>
                  {invoice.status.toUpperCase()}
                </Text>
              </View>
            </View>
            <Text style={styles.invoiceCustomer}>{invoice.customerName}</Text>
            <View style={styles.invoiceFooter}>
              <Text style={styles.invoiceAmount}>{formatCurrency(invoice.total)}</Text>
              <Text style={styles.invoiceDue}>
                Due: {new Date(invoice.dueDate).toLocaleDateString()}
              </Text>
            </View>
            {invoice.status === 'draft' && (
              <TouchableOpacity
                style={styles.invoiceActionButton}
                onPress={() => sendInvoiceMutation.mutate({ invoiceId: invoice.id })}
                disabled={sendInvoiceMutation.isPending}
              >
                <Text style={styles.invoiceActionButtonText}>Send to Customer</Text>
              </TouchableOpacity>
            )}
            {invoice.status === 'sent' && (
              <TouchableOpacity
                style={styles.invoiceActionButton}
                onPress={() => markPaidMutation.mutate({ invoiceId: invoice.id })}
                disabled={markPaidMutation.isPending}
              >
                <Text style={styles.invoiceActionButtonText}>Mark as Paid</Text>
              </TouchableOpacity>
            )}
          </View>
        ))
      ) : (
        <View style={styles.emptyState}>
          <FileText size={48} color="#6B7280" />
          <Text style={styles.emptyStateText}>No invoices yet</Text>
        </View>
      )}
    </View>
  );

  const renderTeam = () => (
    <View>
      {teamData?.members?.length ? (
        teamData.members.map((member: any) => (
          <View key={member.id} style={styles.teamCard}>
            <View style={styles.teamAvatar}>
              <Text style={styles.teamInitial}>{member.role[0].toUpperCase()}</Text>
            </View>
            <View style={styles.teamInfo}>
              <Text style={styles.teamRole}>{member.role.toUpperCase()}</Text>
              <Text style={styles.teamStatus}>{member.status}</Text>
            </View>
          </View>
        ))
      ) : (
        <View style={styles.emptyState}>
          <Users size={48} color="#6B7280" />
          <Text style={styles.emptyStateText}>No team members yet</Text>
          <Text style={styles.emptyStateSubtext}>
            {business.features.multiUser 
              ? 'Add team members to collaborate'
              : 'Upgrade to add team members'}
          </Text>
        </View>
      )}
    </View>
  );

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <Stack.Screen options={{ headerShown: false }} />
      
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
          <ArrowLeft size={24} color="#FFFFFF" />
        </TouchableOpacity>
        <Text style={styles.title}>Business</Text>
      </View>

      <View style={styles.tabContainer}>
        <TouchableOpacity
          style={[styles.tab, activeTab === 'overview' && styles.activeTab]}
          onPress={() => setActiveTab('overview')}
        >
          <Text style={[styles.tabText, activeTab === 'overview' && styles.activeTabText]}>Overview</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.tab, activeTab === 'invoices' && styles.activeTab]}
          onPress={() => setActiveTab('invoices')}
        >
          <Text style={[styles.tabText, activeTab === 'invoices' && styles.activeTabText]}>Invoices</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.tab, activeTab === 'team' && styles.activeTab]}
          onPress={() => setActiveTab('team')}
        >
          <Text style={[styles.tabText, activeTab === 'team' && styles.activeTabText]}>Team</Text>
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.content} showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}>
        {activeTab === 'overview' && renderOverview()}
        {activeTab === 'invoices' && renderInvoices()}
        {activeTab === 'team' && renderTeam()}
        <View style={{ height: 40 }} />
      </ScrollView>

      <Modal
        visible={showCreateInvoice}
        animationType="slide"
        transparent
        onRequestClose={() => setShowCreateInvoice(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.invoiceModalContent}>
            <Text style={styles.invoiceModalTitle}>New Invoice</Text>

            <Text style={styles.invoiceModalLabel}>Customer Name</Text>
            <TextInput
              style={styles.invoiceModalInput}
              value={invoiceForm.customerName}
              onChangeText={(text) => setInvoiceForm((f) => ({ ...f, customerName: text }))}
              placeholder="Jane Smith"
              placeholderTextColor="#9CA3AF"
            />

            <Text style={styles.invoiceModalLabel}>Customer Email</Text>
            <TextInput
              style={styles.invoiceModalInput}
              value={invoiceForm.customerEmail}
              onChangeText={(text) => setInvoiceForm((f) => ({ ...f, customerEmail: text }))}
              placeholder="jane@example.com"
              placeholderTextColor="#9CA3AF"
              keyboardType="email-address"
              autoCapitalize="none"
            />

            <Text style={styles.invoiceModalLabel}>What&apos;s it for?</Text>
            <TextInput
              style={styles.invoiceModalInput}
              value={invoiceForm.description}
              onChangeText={(text) => setInvoiceForm((f) => ({ ...f, description: text }))}
              placeholder="Logo design"
              placeholderTextColor="#9CA3AF"
            />

            <Text style={styles.invoiceModalLabel}>Amount</Text>
            <TextInput
              style={styles.invoiceModalInput}
              value={invoiceForm.amount}
              onChangeText={(text) => setInvoiceForm((f) => ({ ...f, amount: text }))}
              placeholder="$0.00"
              placeholderTextColor="#9CA3AF"
              keyboardType="decimal-pad"
            />

            <Text style={styles.invoiceModalHint}>Due in 14 days from today.</Text>

            <View style={styles.invoiceModalActions}>
              <TouchableOpacity
                style={styles.invoiceModalCancelButton}
                onPress={() => setShowCreateInvoice(false)}
              >
                <Text style={styles.invoiceModalCancelText}>Cancel</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.invoiceModalCreateButton}
                onPress={handleCreateInvoice}
                disabled={createInvoiceMutation.isPending}
              >
                {createInvoiceMutation.isPending ? (
                  <ActivityIndicator color="#FFFFFF" />
                ) : (
                  <Text style={styles.invoiceModalCreateText}>Create</Text>
                )}
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>

      <Modal visible={showGetPaid} animationType="slide" transparent onRequestClose={() => setShowGetPaid(false)}>
        <View style={styles.modalOverlay}>
          <View style={styles.invoiceModalContent}>
            <Text style={styles.invoiceModalTitle}>Create Payment Request</Text>

            <Text style={styles.invoiceModalLabel}>What&apos;s it for?</Text>
            <TextInput
              style={styles.invoiceModalInput}
              value={getPaidDescription}
              onChangeText={setGetPaidDescription}
              placeholder="Custom order, table 4, etc."
              placeholderTextColor="#9CA3AF"
            />

            <Text style={styles.invoiceModalLabel}>Amount</Text>
            <TextInput
              style={styles.invoiceModalInput}
              value={getPaidAmount}
              onChangeText={setGetPaidAmount}
              placeholder="$0.00"
              placeholderTextColor="#9CA3AF"
              keyboardType="decimal-pad"
            />

            <View style={styles.invoiceModalActions}>
              <TouchableOpacity style={styles.invoiceModalCancelButton} onPress={() => setShowGetPaid(false)}>
                <Text style={styles.invoiceModalCancelText}>Cancel</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.invoiceModalCreateButton}
                onPress={handleCreateCheckout}
                disabled={createCheckoutMutation.isPending}
              >
                {createCheckoutMutation.isPending ? (
                  <ActivityIndicator color="#FFFFFF" />
                ) : (
                  <Text style={styles.invoiceModalCreateText}>Generate QR</Text>
                )}
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>

      <Modal visible={!!activeCheckout} animationType="fade" transparent onRequestClose={() => setActiveCheckout(null)}>
        <View style={styles.modalOverlay}>
          <View style={styles.checkoutModalContent}>
            <Text style={styles.invoiceModalTitle}>Scan to Pay</Text>
            <Text style={styles.checkoutModalAmount}>${activeCheckout?.amount.toFixed(2)}</Text>
            <View style={styles.checkoutQrWrap}>
              {activeCheckout && <QRCode value={`Zendo:checkout:${activeCheckout.id}`} size={220} />}
            </View>
            <Text style={styles.checkoutModalHint}>
              Anyone with the Zendo app can scan this to pay instantly - no redirect, no separate
              checkout page to build.
            </Text>
            <TouchableOpacity style={styles.invoiceModalCancelButton} onPress={() => setActiveCheckout(null)}>
              <Text style={styles.invoiceModalCancelText}>Close</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0F172A',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
  backButton: {
    marginRight: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: '700' as const,
    color: '#FFFFFF',
  },
  tabContainer: {
    flexDirection: 'row',
    marginHorizontal: 20,
    backgroundColor: '#1E293B',
    borderRadius: 12,
    padding: 4,
    marginBottom: 20,
  },
  tab: {
    flex: 1,
    paddingVertical: 10,
    alignItems: 'center',
    borderRadius: 8,
  },
  activeTab: {
    backgroundColor: '#10B981',
  },
  tabText: {
    fontSize: 14,
    fontWeight: '600' as const,
    color: '#94A3B8',
  },
  activeTabText: {
    color: '#FFFFFF',
  },
  content: {
    flex: 1,
    paddingHorizontal: 20,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 40,
  },
  emptyTitle: {
    fontSize: 24,
    fontWeight: '700' as const,
    color: '#FFFFFF',
    marginTop: 24,
  },
  emptySubtitle: {
    fontSize: 16,
    color: '#94A3B8',
    textAlign: 'center',
    marginTop: 8,
  },
  createButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#10B981',
    paddingHorizontal: 24,
    paddingVertical: 16,
    borderRadius: 12,
    marginTop: 32,
  },
  createButtonText: {
    fontSize: 16,
    fontWeight: '600' as const,
    color: '#FFFFFF',
    marginLeft: 8,
  },
  businessCard: {
    backgroundColor: '#1E293B',
    borderRadius: 20,
    padding: 24,
    alignItems: 'center',
    marginBottom: 20,
  },
  businessIcon: {
    width: 64,
    height: 64,
    borderRadius: 32,
    backgroundColor: '#064E3B',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 16,
  },
  businessName: {
    fontSize: 24,
    fontWeight: '700' as const,
    color: '#FFFFFF',
  },
  businessType: {
    fontSize: 14,
    color: '#94A3B8',
    marginTop: 4,
  },
  verificationBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 20,
    marginTop: 16,
  },
  verificationText: {
    fontSize: 12,
    fontWeight: '600' as const,
    marginLeft: 6,
  },
  statsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  statCard: {
    width: '48%',
    backgroundColor: '#1E293B',
    borderRadius: 16,
    padding: 16,
    alignItems: 'center',
    marginBottom: 12,
  },
  statValue: {
    fontSize: 20,
    fontWeight: '700' as const,
    color: '#FFFFFF',
    marginTop: 8,
  },
  statLabel: {
    fontSize: 12,
    color: '#94A3B8',
    marginTop: 4,
  },
  forecastCard: {
    backgroundColor: '#1E293B',
    borderRadius: 16,
    padding: 18,
    marginBottom: 16,
    gap: 4,
  },
  forecastHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 8,
  },
  forecastRange: {
    fontSize: 22,
    fontWeight: '800' as const,
    color: '#FFFFFF',
  },
  forecastLabel: {
    fontSize: 12,
    color: '#94A3B8',
  },
  forecastTrend: {
    fontSize: 12,
    color: '#10B981',
    marginTop: 4,
  },
  payoutCard: {
    backgroundColor: '#1E293B',
    borderRadius: 16,
    padding: 18,
    marginBottom: 16,
    gap: 6,
  },
  payoutRow: {
    flexDirection: 'row',
    gap: 10,
    marginTop: 8,
  },
  payoutInput: {
    flex: 1,
    backgroundColor: '#0F172A',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#334155',
    paddingHorizontal: 14,
    paddingVertical: 12,
    color: '#FFFFFF',
    fontSize: 15,
  },
  payoutButton: {
    backgroundColor: '#FBBF24',
    borderRadius: 10,
    paddingHorizontal: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  payoutButtonText: {
    fontSize: 14,
    fontWeight: '700' as const,
    color: '#0F172A',
  },
  exportBooksButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    backgroundColor: '#334155',
    borderRadius: 14,
    paddingVertical: 14,
    marginBottom: 16,
  },
  exportBooksButtonText: {
    fontSize: 14,
    fontWeight: '700' as const,
    color: '#FFFFFF',
  },
  featuresCard: {
    backgroundColor: '#1E293B',
    borderRadius: 16,
    padding: 20,
  },
  featuresTitle: {
    fontSize: 18,
    fontWeight: '600' as const,
    color: '#FFFFFF',
    marginBottom: 16,
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#334155',
  },
  featureText: {
    fontSize: 16,
    marginLeft: 12,
  },
  invoiceCard: {
    backgroundColor: '#1E293B',
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
  },
  invoiceHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  invoiceNumber: {
    fontSize: 16,
    fontWeight: '600' as const,
    color: '#FFFFFF',
  },
  invoiceStatus: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 6,
  },
  invoiceStatusText: {
    fontSize: 12,
    fontWeight: '600' as const,
  },
  invoiceCustomer: {
    fontSize: 14,
    color: '#94A3B8',
    marginBottom: 12,
  },
  invoiceFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  invoiceAmount: {
    fontSize: 18,
    fontWeight: '700' as const,
    color: '#10B981',
  },
  invoiceDue: {
    fontSize: 12,
    color: '#94A3B8',
  },
  newInvoiceButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    backgroundColor: '#3B82F6',
    paddingVertical: 14,
    borderRadius: 12,
    marginBottom: 16,
  },
  newInvoiceButtonText: {
    fontSize: 15,
    fontWeight: '700',
    color: '#FFFFFF',
  },
  invoiceActionButton: {
    marginTop: 10,
    paddingVertical: 10,
    borderRadius: 10,
    alignItems: 'center',
    backgroundColor: 'rgba(59,130,246,0.15)',
  },
  invoiceActionButtonText: {
    fontSize: 13,
    fontWeight: '700',
    color: '#3B82F6',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  invoiceModalContent: {
    backgroundColor: '#1E293B',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    padding: 24,
  },
  invoiceModalTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#FFFFFF',
    marginBottom: 16,
  },
  invoiceModalLabel: {
    fontSize: 12,
    fontWeight: '700',
    color: '#94A3B8',
    textTransform: 'uppercase',
    marginBottom: 6,
    marginTop: 12,
  },
  invoiceModalInput: {
    backgroundColor: '#0F172A',
    borderRadius: 10,
    paddingHorizontal: 14,
    paddingVertical: 12,
    fontSize: 15,
    color: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#334155',
  },
  invoiceModalHint: {
    fontSize: 12,
    color: '#64748B',
    marginTop: 10,
  },
  invoiceModalActions: {
    flexDirection: 'row',
    gap: 10,
    marginTop: 22,
  },
  invoiceModalCancelButton: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: 'center',
    backgroundColor: '#334155',
  },
  invoiceModalCancelText: {
    fontSize: 14,
    fontWeight: '700',
    color: '#E2E8F0',
  },
  invoiceModalCreateButton: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: 'center',
    backgroundColor: '#3B82F6',
  },
  invoiceModalCreateText: {
    fontSize: 14,
    fontWeight: '700',
    color: '#FFFFFF',
  },
  getPaidButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    backgroundColor: '#10B981',
    paddingVertical: 14,
    borderRadius: 12,
    marginTop: 16,
  },
  getPaidButtonText: {
    fontSize: 14,
    fontWeight: '700',
    color: '#FFFFFF',
  },
  taxSummaryLink: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
    paddingVertical: 12,
    marginTop: 4,
  },
  taxSummaryLinkText: {
    fontSize: 13,
    fontWeight: '600',
    color: '#94A3B8',
  },
  checkoutModalContent: {
    backgroundColor: '#1E293B',
    borderRadius: 24,
    padding: 28,
    alignItems: 'center',
    marginHorizontal: 20,
  },
  checkoutModalAmount: {
    fontSize: 32,
    fontWeight: '800',
    color: '#FFFFFF',
    marginVertical: 12,
  },
  checkoutQrWrap: {
    backgroundColor: '#FFFFFF',
    padding: 16,
    borderRadius: 16,
    marginBottom: 16,
  },
  checkoutModalHint: {
    fontSize: 12,
    color: '#94A3B8',
    textAlign: 'center',
    lineHeight: 17,
    marginBottom: 20,
  },
  teamCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#1E293B',
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
  },
  teamAvatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#10B981',
    justifyContent: 'center',
    alignItems: 'center',
  },
  teamInitial: {
    fontSize: 20,
    fontWeight: '700' as const,
    color: '#FFFFFF',
  },
  teamInfo: {
    marginLeft: 16,
  },
  teamRole: {
    fontSize: 16,
    fontWeight: '600' as const,
    color: '#FFFFFF',
  },
  teamStatus: {
    fontSize: 14,
    color: '#94A3B8',
    marginTop: 2,
  },
  emptyState: {
    alignItems: 'center',
    paddingTop: 60,
  },
  emptyStateText: {
    fontSize: 18,
    fontWeight: '600' as const,
    color: '#FFFFFF',
    marginTop: 16,
  },
  emptyStateSubtext: {
    fontSize: 14,
    color: '#94A3B8',
    marginTop: 4,
    textAlign: 'center',
  },
  formSection: {
    backgroundColor: '#1E293B',
    borderRadius: 16,
    padding: 20,
  },
  formSectionTitle: {
    fontSize: 18,
    fontWeight: '600' as const,
    color: '#FFFFFF',
    marginTop: 24,
    marginBottom: 16,
  },
  formLabel: {
    fontSize: 14,
    color: '#94A3B8',
    marginBottom: 8,
    marginTop: 16,
  },
  formInput: {
    backgroundColor: '#0F172A',
    borderRadius: 12,
    padding: 16,
    fontSize: 16,
    color: '#FFFFFF',
  },
  formRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  formHalf: {
    width: '48%',
  },
  submitButton: {
    backgroundColor: '#10B981',
    borderRadius: 12,
    paddingVertical: 16,
    alignItems: 'center',
    marginTop: 24,
  },
  buttonDisabled: {
    opacity: 0.6,
  },
  submitButtonText: {
    fontSize: 18,
    fontWeight: '600' as const,
    color: '#FFFFFF',
  },
});