import React, { useState, useEffect } from "react";
import {
  View,
  ScrollView,
  Pressable,
  TextInput,
  StyleSheet,
  ActivityIndicator,
} from "react-native";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import {
  ArrowLeft,
  ArrowRight,
  Trash2,
  Send,
  Plus,
  Calendar,
  ChevronDown,
  CalendarSearch,
} from "@/lib/icons";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { useSirouRouter } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";
import { Stack, useLocalSearchParams } from "expo-router";
import { useRouter } from "expo-router";
import { ShadowWrapper } from "@/components/ShadowWrapper";
import { api } from "@/lib/api";
import { toast } from "@/lib/toast-store";
import { PickerModal, SelectOption } from "@/components/PickerModal";
import { CalendarGrid } from "@/components/CalendarGrid";
import { StandardHeader } from "@/components/StandardHeader";
import { getPlaceholderColor } from "@/lib/colors";

type Item = { id: number; description: string; qty: string; price: string };

const S = StyleSheet.create({
  input: {
    height: 44,
    paddingHorizontal: 12,
    fontSize: 12,
    fontWeight: "500",
    borderRadius: 6,
    borderWidth: 1,
  },
  inputCenter: {
    height: 44,
    paddingHorizontal: 12,
    fontSize: 14,
    fontWeight: "500",
    borderRadius: 6,
    borderWidth: 1,
    textAlign: "center",
  },
});

function useInputColors() {
  const { colorScheme } = useColorScheme(); // Fix usage
  const dark = colorScheme === "dark";
  return {
    bg: dark ? "rgba(30,30,30,0.8)" : "rgba(241,245,249,0.2)",
    border: dark ? "rgba(255,255,255,0.08)" : "rgba(203,213,225,0.6)",
    text: dark ? "#f1f5f9" : "#0f172a",
    placeholder: "rgba(100,116,139,0.45)",
  };
}

function Field({
  label,
  value,
  onChangeText,
  placeholder,
  numeric = false,
  center = false,
  flex,
}: {
  label: string;
  value: string;
  onChangeText: (v: string) => void;
  placeholder: string;
  numeric?: boolean;
  center?: boolean;
  flex?: number;
}) {
  const c = useInputColors();
  const isDark = colorScheme.get() === "dark";
  return (
    <View style={flex != null ? { flex } : undefined}>
      <Text
        variant="small"
        className="font-semibold text-[10px] uppercase tracking-wider mb-1.5"
      >
        {label}
      </Text>
      <TextInput
        style={[
          center ? S.inputCenter : S.input,
          { backgroundColor: c.bg, borderColor: c.border, color: c.text },
        ]}
        placeholder={placeholder}
        placeholderTextColor={c.placeholder}
        value={value}
        onChangeText={onChangeText}
        keyboardType={numeric ? "numeric" : "default"}
      />
    </View>
  );
}

export default function EditProformaScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const router = useRouter();
  const { id } = useLocalSearchParams();
  const isEdit = !!id;

  const [loading, setLoading] = useState(isEdit);
  const [submitting, setSubmitting] = useState(false);

  // Form fields
  const [proformaNumber, setProformaNumber] = useState("");
  const [customerName, setCustomerName] = useState("");
  const [customerEmail, setCustomerEmail] = useState("");
  const [customerPhone, setCustomerPhone] = useState("");
  const [currency, setCurrency] = useState("USD");
  const [description, setDescription] = useState("");
  const [notes, setNotes] = useState("");
  const [taxAmount, setTaxAmount] = useState("");
  const [discountAmount, setDiscountAmount] = useState("");

  // Dates
  const [issueDate, setIssueDate] = useState(new Date());
  const [dueDate, setDueDate] = useState(new Date());

  // Items
  const [items, setItems] = useState<Item[]>([
    { id: 1, description: "", qty: "", price: "" },
  ]);

  // Modals
  const [currencyModal, setCurrencyModal] = useState(false);
  const [issueModal, setIssueModal] = useState(false);
  const [dueModal, setDueModal] = useState(false);

  // Fetch existing data for edit
  useEffect(() => {
    if (isEdit) {
      fetchProforma();
    }
  }, [id]);

  const fetchProforma = async () => {
    try {
      setLoading(true);
      const data = await api.proforma.getById({ params: { id: id as string } });
      // Prefill form
      setProformaNumber(data.proformaNumber || "");
      setCustomerName(data.customerName || "");
      setCustomerEmail(data.customerEmail || "");
      setCustomerPhone(data.customerPhone || "");
      setCurrency(data.currency || "USD");
      setDescription(data.description || "");
      setNotes(data.notes || "");
      setTaxAmount(String(data.taxAmount?.value || data.taxAmount || ""));
      setDiscountAmount(String(data.discountAmount?.value || data.discountAmount || ""));
      setIssueDate(new Date(data.issueDate));
      setDueDate(new Date(data.dueDate));
      setItems(
        data.items?.map((item: any, idx: number) => ({
          id: idx + 1,
          description: item.description || "",
          qty: String(item.quantity || ""),
          price: String(item.unitPrice?.value || item.unitPrice || ""),
        })) || [{ id: 1, description: "", qty: "", price: "" }]
      );
    } catch (error) {
      toast.error("Error", "Failed to load proforma, using test data");
      // For testing, set dummy data
      setProformaNumber(dummyData.proformaNumber);
      setCustomerName(dummyData.customerName);
      setCustomerEmail(dummyData.customerEmail);
      setCustomerPhone(dummyData.customerPhone);
      setCurrency(dummyData.currency);
      setDescription(dummyData.description);
      setNotes(dummyData.notes);
      setTaxAmount(String(dummyData.taxAmount?.value || dummyData.taxAmount || ""));
      setDiscountAmount(String(dummyData.discountAmount?.value || dummyData.discountAmount || ""));
      setIssueDate(new Date(dummyData.issueDate));
      setDueDate(new Date(dummyData.dueDate));
      setItems(
        dummyData.items?.map((item: any, idx: number) => ({
          id: idx + 1,
          description: item.description || "",
          qty: String(item.quantity || ""),
          price: String(item.unitPrice?.value || item.unitPrice || ""),
        })) || [{ id: 1, description: "", qty: "", price: "" }]
      );
    } finally {
      setLoading(false);
    }
  };

  const addItem = () => {
    const newId = Math.max(...items.map((i) => i.id)) + 1;
    setItems([...items, { id: newId, description: "", qty: "", price: "" }]);
  };

  const removeItem = (id: number) => {
    if (items.length > 1) {
      setItems(items.filter((i) => i.id !== id));
    }
  };

  const updateItem = (id: number, field: keyof Item, value: string) => {
    setItems(
      items.map((i) => (i.id === id ? { ...i, [field]: value } : i))
    );
  };

  const calculateSubtotal = () => {
    return items.reduce((acc, item) => {
      const qty = parseFloat(item.qty) || 0;
      const price = parseFloat(item.price) || 0;
      return acc + qty * price;
    }, 0);
  };

  const calculateTotal = () => {
    const subtotal = calculateSubtotal();
    const tax = parseFloat(taxAmount) || 0;
    const discount = parseFloat(discountAmount) || 0;
    return subtotal + tax - discount;
  };

  const handleSubmit = async () => {
    // Validation
    if (!proformaNumber || !customerName) {
      toast.error("Error", "Please fill required fields");
      return;
    }

    setSubmitting(true);
    try {
      const payload = {
        proformaNumber,
        customerName,
        customerEmail,
        customerPhone,
        amount: calculateTotal(),
        currency,
        issueDate: issueDate.toISOString(),
        dueDate: dueDate.toISOString(),
        description,
        notes,
        taxAmount: parseFloat(taxAmount) || 0,
        discountAmount: parseFloat(discountAmount) || 0,
        items: items.map((item) => ({
          description: item.description,
          quantity: parseFloat(item.qty) || 0,
          unitPrice: parseFloat(item.price) || 0,
          total: (parseFloat(item.qty) || 0) * (parseFloat(item.price) || 0),
        })),
      };

      if (isEdit) {
        await api.proforma.update({
          params: { id: id as string },
          body: payload,
        });
        toast.success("Success", "Proforma updated successfully");
      } else {
        await api.proforma.create({ body: payload });
        toast.success("Success", "Proforma created successfully");
      }

      nav.back();
    } catch (error: any) {
      toast.error("Error", error.message || "Failed to save proforma");
    } finally {
      setSubmitting(false);
    }
  };

  if (loading) {
    return (
      <ScreenWrapper className="bg-background">
        <Stack.Screen options={{ headerShown: false }} />
        <StandardHeader title={isEdit ? "Edit Proforma" : "Create Proforma"} showBack />
        <View className="flex-1 justify-center items-center">
          <ActivityIndicator color="#ea580c" size="large" />
        </View>
      </ScreenWrapper>
    );
  }

  const currencies = ["USD", "EUR", "GBP", "CAD"];

  return (
    <ScreenWrapper className="bg-background">
      <Stack.Screen options={{ headerShown: false }} />

      <StandardHeader title={isEdit ? "Edit Proforma" : "Create Proforma"} showBack />

      <ScrollView
        className="flex-1"
        contentContainerStyle={{ padding: 16, paddingBottom: 150 }}
        showsVerticalScrollIndicator={false}
      >
        {/* Proforma Details */}
        <ShadowWrapper className="mb-4">
          <View className="bg-card rounded-[12px] p-4">
            <Text className="text-foreground font-bold text-sm uppercase tracking-widest mb-4">
              Proforma Details
            </Text>

            <View className="gap-4">
              <Field
                label="Proforma Number"
                value={proformaNumber}
                onChangeText={setProformaNumber}
                placeholder="Enter proforma number"
              />
              <Field
                label="Description"
                value={description}
                onChangeText={setDescription}
                placeholder="Brief description"
              />
              <Field
                label="Notes"
                value={notes}
                onChangeText={setNotes}
                placeholder="Additional notes"
              />
            </View>
          </View>
        </ShadowWrapper>

        {/* Customer Details */}
        <ShadowWrapper className="mb-4">
          <View className="bg-card rounded-[12px] p-4">
            <Text className="text-foreground font-bold text-sm uppercase tracking-widest mb-4">
              Customer Details
            </Text>

            <View className="gap-4">
              <Field
                label="Customer Name"
                value={customerName}
                onChangeText={setCustomerName}
                placeholder="Enter customer name"
              />
              <Field
                label="Customer Email"
                value={customerEmail}
                onChangeText={setCustomerEmail}
                placeholder="Enter customer email"
              />
              <Field
                label="Customer Phone"
                value={customerPhone}
                onChangeText={setCustomerPhone}
                placeholder="Enter customer phone"
              />
            </View>
          </View>
        </ShadowWrapper>

        {/* Dates */}
        <ShadowWrapper className="mb-4">
          <View className="bg-card rounded-[12px] p-4">
            <Text className="text-foreground font-bold text-sm uppercase tracking-widest mb-4">
              Dates
            </Text>

            <View className="gap-4">
              <Pressable
                className="flex-row items-center justify-between p-3 bg-muted rounded-[6px]"
                onPress={() => setIssueModal(true)}
              >
                <View className="flex-row items-center gap-2">
                  <Calendar color="#64748b" size={16} />
                  <Text className="text-foreground font-medium">
                    Issue Date: {issueDate.toLocaleDateString()}
                  </Text>
                </View>
                <ChevronDown color="#64748b" size={16} />
              </Pressable>

              <Pressable
                className="flex-row items-center justify-between p-3 bg-muted rounded-[6px]"
                onPress={() => setDueModal(true)}
              >
                <View className="flex-row items-center gap-2">
                  <CalendarSearch color="#64748b" size={16} />
                  <Text className="text-foreground font-medium">
                    Due Date: {dueDate.toLocaleDateString()}
                  </Text>
                </View>
                <ChevronDown color="#64748b" size={16} />
              </Pressable>
            </View>
          </View>
        </ShadowWrapper>

        {/* Items */}
        <ShadowWrapper className="mb-4">
          <View className="bg-card rounded-[12px] p-4">
            <View className="flex-row items-center justify-between mb-4">
              <Text className="text-foreground font-bold text-sm uppercase tracking-widest">
                Items
              </Text>
              <Button
                className="h-8 px-3 rounded-[6px] bg-primary"
                onPress={addItem}
              >
                <Plus color="#ffffff" size={14} />
                <Text className="ml-1 text-white text-xs font-bold">Add Item</Text>
              </Button>
            </View>

            {items.map((item) => (
              <View
                key={item.id}
                className="flex-row items-center gap-3 mb-3 p-3 bg-muted rounded-[6px]"
              >
                <Field
                  flex={3}
                  label="Description"
                  value={item.description}
                  onChangeText={(v) => updateItem(item.id, "description", v)}
                  placeholder="Item description"
                />
                <Field
                  flex={1}
                  label="Qty"
                  value={item.qty}
                  onChangeText={(v) => updateItem(item.id, "qty", v)}
                  placeholder="0"
                  numeric
                  center
                />
                <Field
                  flex={1.5}
                  label="Price"
                  value={item.price}
                  onChangeText={(v) => updateItem(item.id, "price", v)}
                  placeholder="0.00"
                  numeric
                  center
                />
                <Pressable
                  className="mt-4 p-2"
                  onPress={() => removeItem(item.id)}
                >
                  <Trash2 color="#dc2626" size={16} />
                </Pressable>
              </View>
            ))}
          </View>
        </ShadowWrapper>

        {/* Totals */}
        <ShadowWrapper className="mb-4">
          <View className="bg-card rounded-[12px] p-4">
            <Text className="text-foreground font-bold text-sm uppercase tracking-widest mb-4">
              Totals
            </Text>

            <View className="gap-3">
              <View className="flex-row justify-between">
                <Text className="text-foreground font-medium">Subtotal</Text>
                <Text className="text-foreground font-bold">
                  {currency} {calculateSubtotal().toFixed(2)}
                </Text>
              </View>

              <Field
                label="Tax Amount"
                value={taxAmount}
                onChangeText={setTaxAmount}
                placeholder="0.00"
                numeric
              />

              <Field
                label="Discount Amount"
                value={discountAmount}
                onChangeText={setDiscountAmount}
                placeholder="0.00"
                numeric
              />

              <View className="flex-row justify-between pt-2 border-t border-border">
                <Text className="text-foreground font-bold text-lg">Total</Text>
                <Text className="text-foreground font-bold text-lg">
                  {currency} {calculateTotal().toFixed(2)}
                </Text>
              </View>
            </View>
          </View>
        </ShadowWrapper>

        {/* Currency */}
        <ShadowWrapper className="mb-4">
          <View className="bg-card rounded-[12px] p-4">
            <Text className="text-foreground font-bold text-sm uppercase tracking-widest mb-4">
              Currency
            </Text>

            <Pressable
              className="flex-row items-center justify-between p-3 bg-muted rounded-[6px]"
              onPress={() => setCurrencyModal(true)}
            >
              <Text className="text-foreground font-medium">{currency}</Text>
              <ChevronDown color="#64748b" size={16} />
            </Pressable>
          </View>
        </ShadowWrapper>
      </ScrollView>

      {/* Bottom Action */}
      <View className="absolute bottom-0 left-0 right-0 p-4 bg-background border-t border-border">
        <Button
          className="h-12 rounded-[10px] bg-primary shadow-lg shadow-primary/20"
          onPress={handleSubmit}
          disabled={submitting}
        >
          {submitting ? (
            <ActivityIndicator color="#ffffff" size="small" />
          ) : (
            <>
              <Send color="#ffffff" size={16} strokeWidth={2.5} />
              <Text className="ml-2 text-white font-black text-[12px] uppercase tracking-widest">
                {isEdit ? "Update Proforma" : "Create Proforma"}
              </Text>
            </>
          )}
        </Button>
      </View>

      {/* Modals */}
      <PickerModal
        visible={currencyModal}
        title="Select Currency"
        onClose={() => setCurrencyModal(false)}
      >
        {currencies.map((curr) => (
          <SelectOption
            key={curr}
            label={curr}
            value={curr}
            selected={curr === currency}
            onSelect={(v) => {
              setCurrency(v);
              setCurrencyModal(false);
            }}
          />
        ))}
      </PickerModal>

      // @ts-ignore
      <CalendarGrid
        open={issueModal}
        current={issueDate.toISOString().substring(0,10)}
        onDateSelect={(dateStr: string) => {
          setIssueDate(new Date(dateStr));
          setIssueModal(false);
        }}
        onClose={() => setIssueModal(false)}
      />

      // @ts-ignore
      <CalendarGrid
        open={dueModal}
        current={dueDate.toISOString().substring(0,10)}
        onDateSelect={(dateStr: string) => {
          setDueDate(new Date(dateStr));
          setDueModal(false);
        }}
        onClose={() => setDueModal(false)}
      />
    </ScreenWrapper>
  );
}