import { useEffect, useState } from 'react';
import { StyleSheet, Text } from 'react-native';
import type { NavigationProp } from '@react-navigation/native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import api from '../../core/api';
import { AppStackParamList } from '../../navigation/types';
import { ScreenLayout } from '../../components/ui/ScreenLayout';
import { RecordCard } from '../../components/ui/RecordCard';
import { ResourceListInner } from '../resources/ResourceListScreen';
import { colors, spacing } from '../../constants/theme';

export function SuperadminGuidesScreen({ navigation }: NativeStackScreenProps<AppStackParamList, 'SuperadminGuides'>) {
  return <ResourceListInner navigation={navigation as NavigationProp<AppStackParamList>} resource="documentation-pages" />;
}

export function SuperadminBlogScreen({ navigation }: NativeStackScreenProps<AppStackParamList, 'SuperadminBlog'>) {
  return <ResourceListInner navigation={navigation as NavigationProp<AppStackParamList>} resource="blog-posts" />;
}

export function SuperadminFaqScreen({ navigation }: NativeStackScreenProps<AppStackParamList, 'SuperadminFaq'>) {
  return <ResourceListInner navigation={navigation as NavigationProp<AppStackParamList>} resource="faq-pages" />;
}

function ApiListScreen({ title, subtitle, path }: { title: string; subtitle?: string; path: string }) {
  const [rows, setRows] = useState<Record<string, unknown>[]>([]);
  const [loading, setLoading] = useState(true);
  const load = () => {
    setLoading(true);
    api.get(path)
      .then(({ data }) => {
        const list = data.data || data.accounts || data.users || data.roles || data.items || data;
        setRows(Array.isArray(list) ? list : []);
      })
      .finally(() => setLoading(false));
  };
  useEffect(() => {
    load();
  }, [path]);

  const rowTitle = (row: Record<string, unknown>) =>
    String(row.name || row.email || row.title || row.code || row.id || 'Record');

  const rowSubtitle = (row: Record<string, unknown>) => {
    const parts = [row.status, row.role, row.email, row.description].filter(Boolean).map(String);
    return parts.slice(0, 2).join(' · ') || 'No details';
  };

  return (
    <ScreenLayout title={title} subtitle={subtitle} onRefresh={load} refreshing={loading}>
      {rows.map((row) => (
        <RecordCard
          key={String(row.id || rowTitle(row))}
          title={rowTitle(row)}
          subtitle={rowSubtitle(row)}
          badge={row.status ? String(row.status) : undefined}
        />
      ))}
      {!rows.length && !loading ? (
        <Text style={styles.empty}>No records found.</Text>
      ) : null}
    </ScreenLayout>
  );
}

export function SuperadminAccountsScreen() {
  return <ApiListScreen title="Accounts" subtitle="Platform tenant accounts" path="/superadmin/accounts" />;
}
export function SuperadminUsersScreen() {
  return <ApiListScreen title="Users" subtitle="Platform user accounts" path="/superadmin/users" />;
}
export function SuperadminRolesScreen() {
  return <ApiListScreen title="Roles" subtitle="Permission roles" path="/superadmin/roles" />;
}
export function SuperadminEnumOptionsScreen() {
  return <ApiListScreen title="Enum Options" subtitle="Lookup values" path="/superadmin/enum-options" />;
}
export function SuperadminPartnersScreen() {
  return <ApiListScreen title="Partners" subtitle="Partner organizations" path="/superadmin/partners" />;
}
export function SuperadminBackupsScreen() {
  return <ApiListScreen title="Backups" subtitle="Database backups" path="/superadmin/backups" />;
}

export function SuperadminReportsScreen() {
  const [data, setData] = useState<Record<string, unknown>>({});
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    api.get('/superadmin/reports/summary')
      .then(({ data: d }) => setData(d))
      .finally(() => setLoading(false));
  }, []);
  const stats = Object.entries(data).filter(([key]) => typeof data[key] !== 'object');
  return (
    <ScreenLayout title="Platform Reports" subtitle="System-wide metrics" refreshing={loading}>
      {stats.map(([key, value]) => (
        <RecordCard key={key} title={key.replace(/_/g, ' ')} subtitle={String(value)} badge="reports" />
      ))}
    </ScreenLayout>
  );
}

function JsonSettingsScreen({ title, subtitle, getPath }: { title: string; subtitle?: string; getPath: string }) {
  const [raw, setRaw] = useState('');
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    api.get(getPath)
      .then(({ data }) => setRaw(JSON.stringify(data, null, 2)))
      .finally(() => setLoading(false));
  }, [getPath]);
  return (
    <ScreenLayout title={title} subtitle={subtitle || getPath}>
      <Text selectable style={styles.json}>{loading ? 'Loading…' : raw || 'No settings data.'}</Text>
    </ScreenLayout>
  );
}

export function SuperadminFeatureSettingsScreen() {
  return <ApiListScreen title="Feature Settings" subtitle="Enable platform modules" path="/superadmin/feature-settings" />;
}
export function SuperadminCaptchaSettingsScreen() {
  return <JsonSettingsScreen title="Captcha Settings" subtitle="Bot protection configuration" getPath="/superadmin/captcha-settings" />;
}
export function SuperadminBrandingSettingsScreen() {
  return <JsonSettingsScreen title="Branding Settings" subtitle="Logo, colors, and identity" getPath="/superadmin/branding-settings" />;
}
export function SuperadminContactSettingsScreen() {
  return <JsonSettingsScreen title="Contact Settings" subtitle="Public contact details" getPath="/superadmin/contact-settings" />;
}
export function SuperadminLegalPagesScreen() {
  return <JsonSettingsScreen title="Legal Pages" subtitle="Terms, privacy, and policies" getPath="/superadmin/legal-pages" />;
}

export function PlatformHelpSupportScreen() {
  return <ApiListScreen title="Platform Support" subtitle="Support tickets" path="/support-tickets" />;
}

export function DiagnosisListScreen({ navigation }: NativeStackScreenProps<AppStackParamList, 'DiagnosisList'>) {
  return <ResourceListInner navigation={navigation as NavigationProp<AppStackParamList>} resource="diagnoses" />;
}
export function PrescriptionListScreen({ navigation }: NativeStackScreenProps<AppStackParamList, 'PrescriptionList'>) {
  return <ResourceListInner navigation={navigation as NavigationProp<AppStackParamList>} resource="prescriptions" />;
}
export function PaymentsListScreen({ navigation }: NativeStackScreenProps<AppStackParamList, 'PaymentsList'>) {
  return <ResourceListInner navigation={navigation as NavigationProp<AppStackParamList>} resource="invoices" />;
}

const styles = StyleSheet.create({
  empty: { color: colors.textMuted, textAlign: 'center', marginTop: spacing.lg },
  json: { color: colors.text, fontFamily: 'monospace', fontSize: 12, lineHeight: 18 },
});