import { Linking, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
import {
  ArrowLeft,
  Clock,
  Facebook,
  Gift,
  Globe,
  Heart,
  Instagram,
  MapPin,
  Navigation,
  Phone,
  Sparkles,
  TicketPercent
} from "lucide-react-native";
import { AppButton } from "../components/AppButton";
import { InfoRow } from "../components/InfoRow";
import { OfferCard } from "../components/OfferCard";
import { Screen } from "../components/Screen";
import { deals } from "../data/mockData";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { Business } from "../types/domain";
import { encodeMapAddress } from "../utils/format";

interface BusinessDetailScreenProps {
  business: Business;
  favorite: boolean;
  onBack: () => void;
  onToggleFavorite: (businessId: string) => void;
}

export function BusinessDetailScreen({
  business,
  favorite,
  onBack,
  onToggleFavorite
}: BusinessDetailScreenProps) {
  const businessDeals = deals.filter((deal) => deal.businessId === business.id);

  return (
    <Screen>
      <View style={styles.headerRow}>
        <Pressable accessibilityRole="button" onPress={onBack} style={styles.roundButton}>
          <ArrowLeft color={colors.ink} size={20} strokeWidth={2.6} />
        </Pressable>
        <Pressable
          accessibilityRole="button"
          onPress={() => onToggleFavorite(business.id)}
          style={styles.roundButton}
        >
          <Heart
            color={favorite ? colors.primary : colors.ink}
            fill={favorite ? colors.primary : "transparent"}
            size={20}
            strokeWidth={2.6}
          />
        </Pressable>
      </View>

      <View style={[styles.cover, { backgroundColor: business.coverColor }]}>
        <Text style={styles.category}>{business.categoryLabel}</Text>
        <Text style={styles.title}>{business.name}</Text>
        <Text style={styles.shortDescription}>{business.shortDescription}</Text>
      </View>

      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.photos}>
        {business.photos.map((photo) => (
          <View key={photo} style={styles.photoChip}>
            <Text style={styles.photoText}>{photo}</Text>
          </View>
        ))}
      </ScrollView>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>A propos</Text>
        <Text style={styles.description}>{business.description}</Text>
      </View>

      <View style={styles.actionGrid}>
        <AppButton
          label="Itinéraire"
          icon={Navigation}
          onPress={() =>
            Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${encodeMapAddress(business.address)}`)
          }
        />
        <AppButton
          label="Appeler"
          icon={Phone}
          variant="secondary"
          onPress={() => Linking.openURL(`tel:${business.phone.replace(/\s/g, "")}`)}
        />
      </View>

      <View style={styles.section}>
        <InfoRow icon={MapPin} label="Adresse" value={business.address} />
        <InfoRow icon={Clock} label="Horaires" value={business.hours} />
        <InfoRow icon={Phone} label="Téléphone" value={business.phone} />
        <InfoRow
          icon={Globe}
          label="Site web"
          value={business.website}
          onPress={() => Linking.openURL(business.website)}
        />
        {business.socials.instagram ? (
          <InfoRow icon={Instagram} label="Instagram" value={business.socials.instagram} />
        ) : null}
        {business.socials.facebook ? (
          <InfoRow icon={Facebook} label="Facebook" value={business.socials.facebook} />
        ) : null}
      </View>

      <View style={styles.section}>
        <View style={styles.inlineTitle}>
          <Sparkles color={colors.primary} size={19} strokeWidth={2.5} />
          <Text style={styles.sectionTitle}>Avantages Pass Local</Text>
        </View>
        {business.passBenefits.map((benefit) => (
          <View key={benefit} style={styles.bullet}>
            <Text style={styles.bulletText}>{benefit}</Text>
          </View>
        ))}
      </View>

      <View style={styles.section}>
        <View style={styles.inlineTitle}>
          <TicketPercent color={colors.primary} size={19} strokeWidth={2.5} />
          <Text style={styles.sectionTitle}>Offres disponibles</Text>
        </View>
        {businessDeals.length > 0 ? (
          businessDeals.map((deal) => <OfferCard key={deal.id} deal={deal} business={business} />)
        ) : (
          business.offers.map((offer) => (
            <View key={offer} style={styles.bullet}>
              <Text style={styles.bulletText}>{offer}</Text>
            </View>
          ))
        )}
      </View>

      <View style={styles.giftStatus}>
        <Gift color={business.acceptsGiftCards ? colors.success : colors.muted} size={20} />
        <Text style={styles.giftStatusText}>
          {business.acceptsGiftCards
            ? "Chèques cadeaux Ambérieu Vitrines acceptés"
            : "Chèques cadeaux non acceptés pour le moment"}
        </Text>
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  headerRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  roundButton: {
    width: 44,
    height: 44,
    borderRadius: radius.pill,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line
  },
  cover: {
    minHeight: 212,
    borderRadius: radius.lg,
    padding: spacing.lg,
    justifyContent: "flex-end",
    gap: spacing.sm
  },
  category: {
    color: colors.primary,
    fontSize: 12,
    fontWeight: "900",
    backgroundColor: colors.surface,
    alignSelf: "flex-start",
    borderRadius: radius.pill,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.xs
  },
  title: {
    color: colors.ink,
    fontSize: 30,
    lineHeight: 34,
    fontWeight: "900"
  },
  shortDescription: {
    color: colors.ink,
    fontSize: 15,
    lineHeight: 21,
    fontWeight: "700"
  },
  photos: {
    gap: spacing.sm,
    paddingRight: spacing.lg
  },
  photoChip: {
    width: 140,
    height: 70,
    borderRadius: radius.md,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    alignItems: "center",
    justifyContent: "center",
    padding: spacing.sm
  },
  photoText: {
    color: colors.ink,
    fontSize: 13,
    fontWeight: "800",
    textAlign: "center"
  },
  section: {
    gap: spacing.sm
  },
  sectionTitle: {
    color: colors.ink,
    fontSize: 18,
    fontWeight: "900"
  },
  description: {
    color: colors.muted,
    fontSize: 14,
    lineHeight: 21,
    fontWeight: "600"
  },
  actionGrid: {
    flexDirection: "row",
    gap: spacing.sm
  },
  inlineTitle: {
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.sm
  },
  bullet: {
    borderRadius: radius.md,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    padding: spacing.md
  },
  bulletText: {
    color: colors.ink,
    fontSize: 14,
    lineHeight: 19,
    fontWeight: "700"
  },
  giftStatus: {
    borderRadius: radius.lg,
    backgroundColor: colors.successSoft,
    padding: spacing.lg,
    flexDirection: "row",
    gap: spacing.md,
    alignItems: "center"
  },
  giftStatusText: {
    flex: 1,
    color: colors.ink,
    fontSize: 14,
    lineHeight: 20,
    fontWeight: "800"
  }
});