import { useCallback, useEffect, useState } from 'react';
import { StyleSheet, Text } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import api, { getApiBaseUrl } from '../../core/api';
import { extractApiError } from '../../core/getApiBaseUrl';
import { GuestStackParamList } from '../../navigation/types';
import { ScreenLayout } from '../../components/ui/ScreenLayout';
import { FormField } from '../../components/ui/FormField';
import { AppButton } from '../../components/ui/AppButton';
import { RecordCard } from '../../components/ui/RecordCard';
import { colors } from '../../constants/theme';

function ApiErrorText({ message }: { message: string }) {
  return <Text style={styles.error}>{message}</Text>;
}

export function ContactScreen() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [status, setStatus] = useState('');

  const submit = async () => {
    try {
      await api.post('/public/contact', { name, email, message });
      setStatus('Message sent. We will get back to you soon.');
    } catch (e) {
      setStatus(extractApiError(e));
    }
  };

  return (
    <ScreenLayout title="Contact" subtitle="Reach our support team">
      <FormField field={{ key: 'name', label: 'Name', required: true }} value={name} onChange={(v) => setName(String(v))} />
      <FormField field={{ key: 'email', label: 'Email', type: 'email', required: true }} value={email} onChange={(v) => setEmail(String(v))} />
      <FormField field={{ key: 'message', label: 'Message', type: 'textarea', required: true }} value={message} onChange={(v) => setMessage(String(v))} />
      {status ? <Text style={status.includes('Cannot reach') ? styles.error : styles.ok}>{status}</Text> : null}
      <AppButton label="Send" icon="contact" onPress={submit} />
    </ScreenLayout>
  );
}

export function LegalScreen({ route }: NativeStackScreenProps<GuestStackParamList, 'Legal'>) {
  const page = route.params.page;
  const titles = { terms: 'Terms and Conditions', privacy: 'Privacy Policy', about: 'About Us' };
  const [content, setContent] = useState('');
  const [error, setError] = useState('');

  const load = useCallback(async () => {
    setError('');
    try {
      const { data } = await api.get(`/public/pages/${page}`);
      setContent(data.content || data.body || '');
    } catch (e) {
      setError(extractApiError(e));
      setContent('');
    }
  }, [page]);

  useEffect(() => {
    load();
  }, [load]);

  return (
    <ScreenLayout title={titles[page]} subtitle="Legal" onRefresh={load}>
      {error ? <ApiErrorText message={error} /> : null}
      <Text style={styles.body}>{content.replace(/<[^>]+>/g, ' ')}</Text>
    </ScreenLayout>
  );
}

export function PartnersScreen() {
  const [partners, setPartners] = useState<Record<string, unknown>[]>([]);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const { data } = await api.get('/public/partners');
      setPartners(data.data || data || []);
    } catch (e) {
      setPartners([]);
      setError(extractApiError(e));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  return (
    <ScreenLayout title="Partners" onRefresh={load} refreshing={loading}>
      {error ? <ApiErrorText message={error} /> : null}
      {!error && !loading && partners.length === 0 ? (
        <Text style={styles.muted}>No partners listed yet.</Text>
      ) : null}
      {partners.map((p) => (
        <RecordCard key={String(p.id)} title={String(p.name || p.title)} subtitle={String(p.description || '')} />
      ))}
      <Text style={styles.apiHint}>API: {getApiBaseUrl()}</Text>
    </ScreenLayout>
  );
}

function CmsListScreen({
  title,
  fetchList,
  onOpen,
}: {
  title: string;
  fetchList: () => Promise<Record<string, unknown>[]>;
  onOpen: (slug: string) => void;
}) {
  const [items, setItems] = useState<Record<string, unknown>[]>([]);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      setItems(await fetchList());
    } catch (e) {
      setItems([]);
      setError(extractApiError(e));
    } finally {
      setLoading(false);
    }
  }, [fetchList]);

  useEffect(() => {
    load();
  }, [load]);

  return (
    <ScreenLayout title={title} onRefresh={load} refreshing={loading} hideSubscriptionBanner>
      {error ? <ApiErrorText message={error} /> : null}
      {items.map((item) => (
        <RecordCard
          key={String(item.id || item.slug)}
          title={String(item.title)}
          subtitle={String(item.excerpt || item.summary || '')}
          onPress={() => onOpen(String(item.slug))}
        />
      ))}
    </ScreenLayout>
  );
}

export function GuidePublicScreen({ navigation }: NativeStackScreenProps<GuestStackParamList, 'GuidePublic'>) {
  return (
    <CmsListScreen
      title="Guides"
      fetchList={async () => {
        const { data } = await api.get('/public/documentation');
        const payload = data.data ?? data;
        return Array.isArray(payload) ? payload : [];
      }}
      onOpen={(slug) => navigation.navigate('GuideView', { slug })}
    />
  );
}

export function BlogPublicScreen({ navigation }: NativeStackScreenProps<GuestStackParamList, 'BlogPublic'>) {
  return (
    <CmsListScreen
      title="Blog"
      fetchList={async () => {
        const { data } = await api.get('/public/blog');
        const payload = data.data ?? data;
        return Array.isArray(payload) ? payload : [];
      }}
      onOpen={(slug) => navigation.navigate('BlogView', { slug })}
    />
  );
}

export function FaqPublicScreen({ navigation }: NativeStackScreenProps<GuestStackParamList, 'FaqPublic'>) {
  return (
    <CmsListScreen
      title="FAQ"
      fetchList={async () => {
        const { data } = await api.get('/public/faq');
        const payload = data.data ?? data;
        return Array.isArray(payload) ? payload : [];
      }}
      onOpen={(slug) => navigation.navigate('FaqView', { slug })}
    />
  );
}

export function ContentViewScreen({
  route,
  title,
  apiPrefix,
}: {
  route: { params: { slug: string } };
  title: string;
  apiPrefix: string;
}) {
  const [content, setContent] = useState('');
  const [error, setError] = useState('');

  const load = useCallback(async () => {
    setError('');
    try {
      const { data } = await api.get(`${apiPrefix}/${route.params.slug}`);
      setContent(data.content || data.body || '');
    } catch (e) {
      setError(extractApiError(e));
      setContent('');
    }
  }, [apiPrefix, route.params.slug]);

  useEffect(() => {
    load();
  }, [load]);

  return (
    <ScreenLayout title={title} onRefresh={load} hideSubscriptionBanner>
      {error ? <ApiErrorText message={error} /> : null}
      <Text style={styles.body}>{content.replace(/<[^>]+>/g, '\n')}</Text>
    </ScreenLayout>
  );
}

const styles = StyleSheet.create({
  body: { fontSize: 15, lineHeight: 22, color: colors.text },
  error: { color: colors.danger, marginBottom: 12, lineHeight: 20 },
  ok: { color: colors.success, marginBottom: 12 },
  muted: { color: colors.textMuted, textAlign: 'center', marginTop: 24 },
  apiHint: { fontSize: 11, color: colors.textMuted, marginTop: 16, textAlign: 'center' },
});