/**
 * S8. Arrived — this file owns the prop contract (`ArrivedCardProps`,
 * below); src/screens/index.ts just re-exports it. No MapLibre surface of
 * its own (not in this file's task scope, and the spec doesn't ask for
 * one) — it floats over whichever map is already on screen underneath,
 * per App.tsx's Overlay pattern.
 */
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Svg, { Path } from "react-native-svg";

import { Button, Card } from "../../components";
import { radius, spacing, theme, typeScale } from "../../theme";
import type { JourneyStats, SelectedPlace, Units } from "../../state/types";
import { formatDistance, formatDuration } from "../mapChrome";

export type ArrivedCardProps = {
  place: SelectedPlace;
  journey: JourneyStats;
  units: Units;
  onDone: () => void;
};

function CheckIcon(): React.JSX.Element {
  return (
    <Svg width={28} height={28} viewBox="0 0 24 24">
      <Path
        d="M5 12.5l4.5 4.5L19 7"
        stroke={theme.textOnSignal}
        strokeWidth={2.5}
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      />
    </Svg>
  );
}

/** "You have arrived" card: destination, journey stats, Done → S3. */
export function ArrivedCard({ place, journey, units, onDone }: ArrivedCardProps): React.JSX.Element {
  return (
    <View style={styles.scrim}>
      <Card style={styles.card}>
        <View style={styles.badge}>
          <CheckIcon />
        </View>

        <Text style={styles.title}>You have arrived</Text>
        <Text style={styles.destinationName} numberOfLines={2}>
          {place.name}
        </Text>
        {place.address ? (
          <Text style={styles.destinationAddress} numberOfLines={1}>
            {place.address}
          </Text>
        ) : null}

        <View style={styles.statsRow}>
          <View style={styles.statCell}>
            <Text style={styles.statValue}>{formatDuration(journey.durationSeconds)}</Text>
            <Text style={styles.statLabel}>Journey time</Text>
          </View>
          <View style={styles.statDivider} />
          <View style={styles.statCell}>
            <Text style={styles.statValue}>{formatDistance(journey.distanceMeters, units)}</Text>
            <Text style={styles.statLabel}>Distance</Text>
          </View>
        </View>

        <Button label="Done" variant="primary" fullWidth onPress={onDone} style={styles.doneButton} />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  scrim: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "rgba(16,24,42,0.35)",
    paddingHorizontal: spacing[6],
  },
  card: {
    width: "100%",
    maxWidth: 360,
    alignItems: "center",
    paddingVertical: spacing[6],
    gap: spacing[1],
  },
  badge: {
    width: 56,
    height: 56,
    borderRadius: radius.pill,
    backgroundColor: theme.signal,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: spacing[3],
  },
  title: {
    fontSize: typeScale.title.fontSize,
    lineHeight: typeScale.title.lineHeight,
    fontWeight: typeScale.title.fontWeight,
    color: theme.textPrimary,
  },
  destinationName: {
    marginTop: spacing[2],
    fontSize: typeScale.headline.fontSize,
    fontWeight: "600",
    color: theme.textPrimary,
    textAlign: "center",
  },
  destinationAddress: {
    marginTop: 2,
    fontSize: typeScale.body.fontSize,
    color: theme.textSecondary,
    textAlign: "center",
  },
  statsRow: {
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "stretch",
    marginTop: spacing[5],
    marginBottom: spacing[5],
    backgroundColor: theme.surfaceAlt,
    borderRadius: radius.md,
    paddingVertical: spacing[3],
  },
  statCell: {
    flex: 1,
    alignItems: "center",
  },
  statDivider: {
    width: 1,
    alignSelf: "stretch",
    backgroundColor: theme.border,
  },
  statValue: {
    fontSize: typeScale.headline.fontSize,
    fontWeight: typeScale.headline.fontWeight,
    color: theme.textPrimary,
  },
  statLabel: {
    marginTop: 2,
    fontSize: typeScale.caption.fontSize,
    color: theme.textSecondary,
  },
  doneButton: {
    alignSelf: "stretch",
  },
});
