import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors, spacing, radii } from '../../theme';
import { Button } from '../ui/Button';
import { useResponsive } from '../../hooks/useResponsive';

interface UnauthorizedPageProps {
  onBack?: () => void;
}

export function UnauthorizedPage({ onBack }: UnauthorizedPageProps) {
  const { fontSize } = useResponsive();
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <View style={styles.iconContainer}>
          <Ionicons name="lock-closed" size={40} color={colors.danger[500]} />
        </View>
        <Text style={[styles.code, { fontSize: Math.round(fontSize.stat * 1.7) }]}>403</Text>
        <Text style={[styles.title, { fontSize: fontSize.h2 }]}>Access Restricted</Text>
        <Text style={[styles.description, { fontSize: fontSize.body }]}>
          You don't have permission to access this page. Contact your administrator if you believe this is an error.
        </Text>
        <Button title="Back to Dashboard" onPress={onBack || (() => {})} icon="arrow-back" />
      </View>
    </View>
  );
}

export function NotFoundPage({ onBack }: UnauthorizedPageProps) {
  const { fontSize } = useResponsive();
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <View style={[styles.iconContainer, { backgroundColor: colors.gray[100] }]}>
          <Ionicons name="search" size={40} color={colors.gray[400]} />
        </View>
        <Text style={[styles.code, { fontSize: Math.round(fontSize.stat * 1.7) }]}>404</Text>
        <Text style={[styles.title, { fontSize: fontSize.h2 }]}>Page Not Found</Text>
        <Text style={[styles.description, { fontSize: fontSize.body }]}>
          The page you're looking for doesn't exist or may have been moved.
        </Text>
        <Button title="Go to Dashboard" onPress={onBack || (() => {})} icon="home" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.background,
    padding: spacing.xxl,
  },
  card: {
    backgroundColor: colors.white,
    borderRadius: radii.xl,
    padding: spacing.xxxxl,
    alignItems: 'center',
    maxWidth: 400,
    width: '100%',
    borderWidth: 1,
    borderColor: colors.border,
  },
  iconContainer: {
    width: 80,
    height: 80,
    borderRadius: radii.full,
    backgroundColor: colors.danger[50],
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: spacing.xl,
  },
  code: {
    fontWeight: '800',
    color: colors.gray[200],
    marginBottom: spacing.sm,
  },
  title: {
    fontWeight: '700',
    color: colors.gray[900],
    marginBottom: spacing.md,
  },
  description: {
    color: colors.gray[500],
    textAlign: 'center',
    lineHeight: 20,
    marginBottom: spacing.xxl,
  },
});