import React, { useState } from 'react';
import { View, ScrollView, TouchableOpacity, Alert, Dimensions, Share } from 'react-native';
import { theme, AppContainer, MyText, tw, useManualRefresh, useMarkDataFetchers, MyTouchableOpacity } from 'common-ui';
import { trpc, trpcClient } from '../../../src/trpc-client';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { Ionicons } from "@expo/vector-icons";
import dayjs from "dayjs";
import { LinearGradient } from "expo-linear-gradient";
import { useRouter } from 'expo-router';

import VendorSnippetForm from '../../../components/VendorSnippetForm';
import SnippetOrdersView from '../../../components/SnippetOrdersView';
import { SnippetMenu } from '../../../components/SnippetMenu';

interface VendorSnippet {
  id: number;
  snippetCode: string;
  slotId: number;
  productIds: number[];
  validTill: string | null;
  createdAt: string;
  accessUrl: string;
  slot?: {
    id: number;
    deliveryTime: string;
    freezeTime: string;
    isActive: boolean;
    deliverySequence?: unknown;
  };
}

const SnippetItem = ({
  snippet,
  onEdit,
  onDelete,
  onViewOrders,
  index
}: {
  snippet: VendorSnippet;
  onEdit: (snippet: VendorSnippet) => void;
  onDelete: (id: number) => void;
  onViewOrders: (snippetCode: string) => void;
  index: number;
}) => {
  const isExpired = snippet.validTill && dayjs(snippet.validTill).isBefore(dayjs());

  const handleCopyLink = async () => {
    try {
      await Share.share({
        message: snippet.accessUrl,
      });
    } catch (error) {
      Alert.alert('Error', 'Failed to share link');
    }
  };

  return (
    <View style={tw``}>
      <View style={tw`p-6`}>
        {/* Top Header: ID & Status */}
        <View style={tw`flex-row justify-between items-start mb-6`}>
          <View style={tw`flex-row items-center flex-1`}>
            <View style={tw`w-12 h-12 rounded-2xl bg-brand50 items-center justify-center mr-4`}>
              <MaterialIcons name="fingerprint" size={24} color={theme.colors.brand600} />
            </View>
            <View style={tw`flex-1`}>
              <MyText style={tw`text-slate-400 text-[10px] font-black uppercase tracking-widest`}>
                Identifier
              </MyText>
              <MyText style={tw`text-xl font-black text-slate-900`} numberOfLines={1}>
                {snippet.snippetCode}
              </MyText>
            </View>
          </View>

          <View style={tw`flex-row items-center`}>
            <View style={[tw`px-3 py-1.5 rounded-full flex-row items-center mr-2`, { backgroundColor: isExpired ? '#FFF1F2' : '#F0FDF4' }]}>
              <View style={[tw`w-1.5 h-1.5 rounded-full mr-2`, { backgroundColor: isExpired ? '#E11D48' : '#10B981' }]} />
              <MyText style={[tw`text-[10px] font-black uppercase tracking-tighter`, { color: isExpired ? '#E11D48' : '#10B981' }]}>
                {isExpired ? 'Expired' : 'Active'}
              </MyText>
            </View>
            <SnippetMenu
              snippet={snippet}
              onEdit={onEdit}
              onDelete={onDelete}
              onViewOrders={onViewOrders}
            />
          </View>
        </View>

        {/* Middle: Delivery Banner */}
        <View style={tw`bg-slate-50 rounded-3xl p-4 flex-row items-center mb-6 border border-slate-100`}>
          <View style={tw`bg-white w-10 h-10 rounded-2xl items-center justify-center shadow-sm`}>
            <MaterialIcons name="event-available" size={20} color="#64748B" />
          </View>
          <View style={tw`ml-4 flex-1`}>
            <MyText style={tw`text-slate-900 font-extrabold text-sm`}>
              {snippet.slot?.deliveryTime ? dayjs(snippet.slot.deliveryTime).format('ddd, MMM DD') : 'Schedule Pending'}
            </MyText>
            <MyText style={tw`text-slate-500 text-[10px] font-bold uppercase`}>
              Time: {snippet.slot?.deliveryTime ? dayjs(snippet.slot.deliveryTime).format('hh:mm A') : 'N/A'}
            </MyText>
          </View>
          {snippet.validTill && (
            <View style={tw`items-end`}>
              <MyText style={tw`text-slate-400 text-[9px] font-bold uppercase`}>Expires</MyText>
              <MyText style={[tw`text-xs font-black`, { color: isExpired ? '#E11D48' : '#64748B' }]}>
                {dayjs(snippet.validTill).format('MMM DD')}
              </MyText>
            </View>
          )}
        </View>

        {/* Stats & Actions */}
        <View style={tw`flex-row items-center justify-between`}>
          <View style={tw`flex-row items-center`}>
            <View style={tw`flex-row items-center mr-4`}>
              <MaterialIcons name="shopping-bag" size={14} color="#94A3B8" />
              <MyText style={tw`text-xs font-bold text-slate-500 ml-1.5`}>{snippet.productIds.length} Items</MyText>
            </View>
            <MyTouchableOpacity onPress={handleCopyLink} style={tw`flex-row items-center`}>
              <MaterialIcons name="link" size={16} color={theme.colors.brand500} />
              <MyText style={tw`text-xs font-black text-brand600 ml-1`}>Share</MyText>
            </MyTouchableOpacity>
          </View>

          <MyTouchableOpacity
            // onPress={() => router.push(`/(drawer)/slots/slot-details?slotId=${snippet.slotId}`)}
            onPress={() => {}}
            activeOpacity={0.7}
            style={tw`flex-row items-center`}
          >
            <MyText style={tw`text-xs font-black text-slate-900 uppercase tracking-widest`}>View Slot</MyText>
            <MaterialIcons name="chevron-right" size={16} color="#000" />
          </MyTouchableOpacity>
        </View>
      </View>
    </View>
  );
};

export default function VendorSnippets() {
  // const { data: snippets, isLoading, error, refetch } = useVendorSnippets();
  const { data: snippets, isLoading, error, refetch } = trpc.admin.vendorSnippets.getAll.useQuery();

  const createSnippet = trpc.admin.vendorSnippets.create.useMutation();
  const updateSnippet = trpc.admin.vendorSnippets.update.useMutation();
  const deleteSnippet = trpc.admin.vendorSnippets.delete.useMutation();
  // const createSnippet = useCreateVendorSnippet();
  // const updateSnippet = useUpdateVendorSnippet();
  // const deleteSnippet = useDeleteVendorSnippet();

  const router = useRouter();

  const [showCreateForm, setShowCreateForm] = useState(false);
  const [editingSnippet, setEditingSnippet] = useState<VendorSnippet | null>(null);
  const [showOrdersView, setShowOrdersView] = useState(false);
  const [ordersData, setOrdersData] = useState<any>(null);


  useManualRefresh(refetch);

  useMarkDataFetchers(() => {
    refetch();
  });

  const handleCreate = () => {
    setShowCreateForm(true);
    setEditingSnippet(null);
  };

  const handleEdit = (snippet: VendorSnippet) => {
    setEditingSnippet(snippet);
    setShowCreateForm(true);
  };

  const handleDelete = (id: number) => {
    deleteSnippet.mutate({ id }, {
      onSuccess: () => {
        refetch();
      }
    });
  };

  const handleViewOrders = async (snippetCode: string) => {
    try {
      const result = await trpcClient.admin.vendorSnippets.getOrdersBySnippet.query({ snippetCode });
      if (result.success) {
        setOrdersData({
          orders: result.data,
          snippetCode: snippetCode,
        });
        setShowOrdersView(true);
      } else {
        Alert.alert('Error', 'Failed to fetch orders');
      }
    } catch (error: any) {
      Alert.alert('Error', error.message || 'Failed to fetch orders');
    }
  };

  if (isLoading) {
    return (
      <AppContainer>
        <View style={tw`flex-1 justify-center items-center`}>
          <MyText style={tw`text-gray-600`}>Loading vendor snippets...</MyText>
        </View>
      </AppContainer>
    );
  }

  if (error) {
    return (
      <AppContainer>
        <View style={tw`flex-1 justify-center items-center`}>
          <MyText style={tw`text-red-600`}>Error loading snippets</MyText>
        </View>
      </AppContainer>
    );
  }

  if (showOrdersView && ordersData) {
    return (
      <SnippetOrdersView
        orders={ordersData.orders}
        snippetCode={ordersData.snippetCode}
        onClose={() => {
          setShowOrdersView(false);
          setOrdersData(null);
        }}
      />
    );
  }

  if (showCreateForm) {
    return (
      <VendorSnippetForm
        snippet={editingSnippet}
        onClose={() => {
          setShowCreateForm(false);
          setEditingSnippet(null);
        }}
        onSuccess={() => {
          setShowCreateForm(false);
          setEditingSnippet(null);
          refetch();
        }}
      />
    );
  }

  return (
    <AppContainer>
      <View style={tw`flex-1 bg-white relative`}>
        <ScrollView
          style={tw`flex-1`}
          contentContainerStyle={tw` pt-2 pb-32`}
          showsVerticalScrollIndicator={false}
        >
          {snippets && snippets.length === 0 ? (
            <View style={tw`flex-1 justify-center items-center py-20`}>
              <View style={tw`w-24 h-24 bg-slate-50 rounded-full items-center justify-center mb-6`}>
                <Ionicons name="code-working" size={48} color="#94A3B8" />
              </View>
              <MyText style={tw`text-slate-900 text-xl font-black tracking-tight`}>No Snippets Yet</MyText>
              <MyText style={tw`text-slate-500 text-center mt-2 font-medium px-8`}>
                Start by creating your first vendor identifier using the button below.
              </MyText>
            </View>
          ) : (
            snippets?.map((snippet, index) => (
              <React.Fragment key={snippet.id}>
                <SnippetItem
                  snippet={snippet}
                  index={index}
                  onEdit={handleEdit}
                  onDelete={handleDelete}
                  onViewOrders={handleViewOrders}
                />
                {index < snippets.length - 1 && (
                  <View style={tw`h-px bg-slate-200 w-full`} />
                )}
              </React.Fragment>
            ))
          )}
        </ScrollView>

        {/* Global Floating Action Button */}
        <MyTouchableOpacity
          onPress={handleCreate}
          activeOpacity={0.95}
          style={tw`absolute bottom-8 right-6 shadow-2xl z-50`}
        >
          <LinearGradient
            colors={['#1570EF', '#194185']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={tw`w-16 h-16 rounded-[24px] items-center justify-center shadow-lg shadow-brand300`}
          >
            <MaterialIcons name="add" size={32} color="white" />
          </LinearGradient>
        </MyTouchableOpacity>
      </View>
    </AppContainer>
  );
}