import { useCallback, useEffect, useState } from 'react';
import { Alert, StyleSheet, Text, View } from 'react-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 { AppButton } from '../../components/ui/AppButton';
import { FormField } from '../../components/ui/FormField';
import { colors, spacing } from '../../constants/theme';
import { useAuth } from '../../context/AuthContext';
import { useSubscriptionRestriction } from '../../hooks/useSubscriptionRestriction';

export function CalendarScreen() {
  const [schedules, setSchedules] = useState<Record<string, unknown>[]>([]);
  const [loading, setLoading] = useState(true);
  const load = useCallback(async () => {
    setLoading(true);
    try {
      const { data } = await api.get('/schedules', { params: { per_page: 50 } });
      setSchedules(data.data || data);
    } finally {
      setLoading(false);
    }
  }, []);
  useEffect(() => {
    load();
  }, [load]);
  return (
    <ScreenLayout title="Calendar" subtitle="Appointments and schedules" onRefresh={load} refreshing={loading}>
      {schedules.map((s) => (
        <RecordCard
          key={String(s.id)}
          title={String(s.title || s.patient_name || `Schedule #${s.id}`)}
          subtitle={[s.date, s.time, s.status].filter(Boolean).join(' · ')}
          badge={s.status ? String(s.status) : undefined}
        />
      ))}
    </ScreenLayout>
  );
}

export function ConsultationsScreen() {
  const { readOnly, runIfAllowed } = useSubscriptionRestriction();
  const [date, setDate] = useState(new Date().toISOString().slice(0, 10));
  const [records, setRecords] = useState<Record<string, unknown>[]>([]);
  const [loading, setLoading] = useState(false);
  const load = useCallback(async () => {
    setLoading(true);
    try {
      const { data } = await api.get('/consultations', { params: { date } });
      setRecords(data.data || data);
    } finally {
      setLoading(false);
    }
  }, [date]);
  useEffect(() => {
    load();
  }, [load]);

  const markServed = (id: number) => {
    if (!runIfAllowed(() => {})) return;
    void api.post(`/consultations/patients/${id}/served`).then(load);
  };
  const cancel = (id: number) => {
    if (!runIfAllowed(() => {})) return;
    void api.post(`/consultations/patients/${id}/cancel`).then(load);
  };

  return (
    <ScreenLayout title="Consultations" subtitle="Daily queue and patient status" onRefresh={load} refreshing={loading}>
      <FormField field={{ key: 'date', label: 'Date', type: 'text' }} value={date} onChange={(v) => setDate(String(v))} />
      {records.map((r) => (
        <RecordCard
          key={String(r.id)}
          title={String(r.patient_name || r.name || `#${r.id}`)}
          subtitle={`Priority ${r.priority_number ?? '-'} · ${String(r.status || 'pending')}`}
          badge={String(r.status || '')}
          actions={
            readOnly
              ? undefined
              : [
                  { icon: 'check', label: 'Served', onPress: () => markServed(Number(r.id)) },
                  { icon: 'close', label: 'Cancel', onPress: () => cancel(Number(r.id)), variant: 'danger' },
                ]
          }
        />
      ))}
    </ScreenLayout>
  );
}

export function ProfileScreen() {
  const { userName, refreshSession, logout } = useAuth();
  const [user, setUser] = useState<Record<string, unknown>>({});
  useEffect(() => {
    api.get('/profile').then(({ data }) => setUser(data.user || data));
  }, []);
  return (
    <ScreenLayout title="Profile" subtitle="Your account details">
      <RecordCard
        title={String(user.name || userName)}
        subtitle={String(user.email || '')}
        badge={String(user.role || user.login_portal || '')}
      />
      <AppButton label="Refresh" icon="refresh" variant="secondary" onPress={refreshSession} />
      <AppButton label="Logout" icon="logout" variant="danger" onPress={logout} />
    </ScreenLayout>
  );
}

export function SettingsScreen() {
  const { portal } = useAuth();
  const { restricted: readOnly } = useSubscriptionRestriction();
  const tabs = readOnly && portal === 'owner'
    ? [{ key: 'subscription', label: 'Subscription', path: '/subscriptions/current', icon: 'payment' }]
    : [
        { key: 'subscription', label: 'Subscription', path: '/subscriptions/current', icon: 'payment' },
        { key: 'payment', label: 'Payment gateway', path: '/payment-gateway-settings', icon: 'payment' },
        { key: 'billing', label: 'Billing numbers', path: '/billing-number-settings', icon: 'invoice' },
      ];

  return (
    <ScreenLayout title="Settings" subtitle="Clinic configuration" hideSubscriptionBanner>
      {tabs.map((t) => (
        <SettingsLink key={t.key} title={t.label} path={t.path} icon={t.icon} showDetails={t.key === 'subscription'} />
      ))}
    </ScreenLayout>
  );
}

function SettingsLink({
  title,
  path,
  showDetails,
}: {
  title: string;
  path: string;
  icon: string;
  showDetails?: boolean;
}) {
  const [preview, setPreview] = useState('');
  const [loading, setLoading] = useState(true);
  const { message: restrictedMessage } = useSubscriptionRestriction();

  useEffect(() => {
    setLoading(true);
    api.get(path)
      .then(({ data }) => {
        if (showDetails && data?.account) {
          const account = data.account as Record<string, unknown>;
          const lines = [
            account.is_expired ? 'Status: Expired' : 'Status: Active',
            account.trial_ends_at ? `Trial ends: ${String(account.trial_ends_at).slice(0, 10)}` : null,
            account.subscription_ends_at
              ? `Subscription ends: ${String(account.subscription_ends_at).slice(0, 10)}`
              : 'No active subscription',
            data.monthly_quote?.amount_due != null
              ? `Monthly quote: ${data.monthly_quote.amount_due} ${data.monthly_quote.currency || 'USD'}`
              : null,
          ].filter(Boolean);
          setPreview(lines.join('\n'));
          return;
        }
        setPreview(JSON.stringify(data).slice(0, 100) + '…');
      })
      .catch(() => setPreview('Unable to load settings preview.'))
      .finally(() => setLoading(false));
  }, [path, showDetails]);

  return (
    <>
      {showDetails && restrictedMessage ? (
        <RecordCard title="Subscription required" subtitle={restrictedMessage} badge="expired" />
      ) : null}
      <RecordCard title={title} subtitle={loading ? 'Loading…' : preview || 'Tap to preview'} />
      {showDetails ? (
        <Text style={styles.muted}>
          Complete checkout and renew on the web app under Settings → Subscription for full billing options.
        </Text>
      ) : null}
    </>
  );
}

export function ReportsScreen() {
  const [summary, setSummary] = useState<Record<string, unknown>>({});
  const [loading, setLoading] = useState(true);
  const load = useCallback(() => {
    setLoading(true);
    api.get('/reports/summary')
      .then(({ data }) => setSummary(data))
      .finally(() => setLoading(false));
  }, []);
  useEffect(() => {
    load();
  }, [load]);

  const stats = Array.isArray(summary.stats)
    ? summary.stats
    : Object.entries(summary)
        .filter(([key]) => !['message', 'period'].includes(key))
        .slice(0, 8)
        .map(([key, value]) => ({ label: key.replace(/_/g, ' '), value: String(value) }));

  return (
    <ScreenLayout title="Reports" subtitle="Clinic performance summary" onRefresh={load} refreshing={loading}>
      {stats.map((stat, index) => (
        <RecordCard
          key={`${stat.label}-${index}`}
          title={String(stat.label)}
          subtitle={String(stat.value ?? '-')}
          badge="reports"
        />
      ))}
    </ScreenLayout>
  );
}

export { PosScreen } from './PosScreen';

export function InventoryScreen() {
  const [items, setItems] = useState<Record<string, unknown>[]>([]);
  const [loading, setLoading] = useState(true);
  const load = useCallback(() => {
    setLoading(true);
    api.get('/inventory')
      .then(({ data }) => setItems(data.items || data.data || []))
      .finally(() => setLoading(false));
  }, []);
  useEffect(() => {
    load();
  }, [load]);
  return (
    <ScreenLayout title="Inventory" subtitle="Product stock levels" onRefresh={load} refreshing={loading}>
      {items.map((item) => (
        <RecordCard
          key={String(item.service_product_id || item.id)}
          title={String(item.name || 'Product')}
          subtitle={`Available: ${item.stock_available ?? item.quantity_on_hand ?? '-'} · SKU: ${item.sku || '—'}`}
          badge={item.low_stock ? 'Low stock' : item.track_inventory ? 'Tracked' : 'Not tracked'}
        />
      ))}
    </ScreenLayout>
  );
}

export function CustomerBookingScreen() {
  const [widgets, setWidgets] = useState<Record<string, unknown>[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    api.get('/customer/booking/widgets')
      .then(({ data }) => setWidgets(data.data || data))
      .finally(() => setLoading(false));
  }, []);
  return (
    <ScreenLayout title="Book Appointment" subtitle="Available booking widgets">
      {widgets.map((w) => (
        <RecordCard
          key={String(w.id)}
          title={String(w.clinic_branch_name || w.name || 'Booking widget')}
          subtitle={String(w.share_url || 'Online booking link')}
          badge="booking"
        />
      ))}
      {!widgets.length && !loading ? (
        <Text style={styles.muted}>No booking widgets available.</Text>
      ) : null}
    </ScreenLayout>
  );
}

export function HelpSupportScreen() {
  const { readOnly, runIfAllowed } = useSubscriptionRestriction({ path: '/help-support' });
  const [tickets, setTickets] = useState<Record<string, unknown>[]>([]);
  const [loading, setLoading] = useState(true);
  const load = useCallback(() => {
    setLoading(true);
    api.get('/support-tickets')
      .then(({ data }) => setTickets(data.data || data))
      .finally(() => setLoading(false));
  }, []);
  useEffect(() => {
    load();
  }, [load]);
  return (
    <ScreenLayout
      title="Help & Support"
      subtitle="Support tickets and requests"
      onRefresh={load}
      refreshing={loading}
      hideSubscriptionBanner
    >
      {!readOnly ? (
        <AppButton
          label="New"
          icon="add"
          onPress={() => {
            if (!runIfAllowed(() => {})) return;
            Alert.alert('New ticket', 'Create support tickets with attachments on the web app.');
          }}
        />
      ) : null}
      {tickets.map((t) => (
        <RecordCard
          key={String(t.id)}
          title={String(t.subject || `Ticket #${t.id}`)}
          subtitle={String(t.updated_at || t.created_at || '')}
          badge={String(t.status || 'open')}
        />
      ))}
    </ScreenLayout>
  );
}

export function PatientDetailScreen({ route }: NativeStackScreenProps<AppStackParamList, 'PatientDetail'>) {
  const [patient, setPatient] = useState<Record<string, unknown>>({});
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    api.get(`/patients/${route.params.id}`)
      .then(({ data }) => setPatient(data.data || data))
      .finally(() => setLoading(false));
  }, [route.params.id]);

  const fullName = [patient.first_name, patient.last_name].filter(Boolean).join(' ') || `Patient #${route.params.id}`;

  return (
    <ScreenLayout title="Patient Profile" subtitle={`Patient #${route.params.id}`}>
      <RecordCard
        title={fullName}
        subtitle={[patient.email, patient.phone].filter(Boolean).join(' · ') || 'No contact details'}
        badge={String(patient.status || 'active')}
      />
      <RecordCard title="Date of birth" subtitle={String(patient.date_of_birth || '—')} />
      <RecordCard title="Gender" subtitle={String(patient.gender || '—')} />
      <RecordCard title="Address" subtitle={String(patient.address || patient.address_line_1 || '—')} />
      {loading ? <Text style={styles.muted}>Loading patient details…</Text> : null}
    </ScreenLayout>
  );
}

export function NotificationSettingsScreen() {
  const [templates, setTemplates] = useState<Record<string, unknown>[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    api.get('/notification-settings')
      .then(({ data }) => {
        const list = data.templates || data.data || (Array.isArray(data) ? data : []);
        setTemplates(Array.isArray(list) ? list : []);
      })
      .finally(() => setLoading(false));
  }, []);
  return (
    <ScreenLayout title="Notification Settings" subtitle="Email and SMS templates">
      {templates.map((template) => (
        <RecordCard
          key={String(template.id || template.key)}
          title={String(template.name || template.event || template.key || 'Template')}
          subtitle={String(template.channel || template.type || 'notification')}
          badge={String(template.status || 'active')}
        />
      ))}
      {!templates.length && !loading ? (
        <Text style={styles.muted}>No notification templates found.</Text>
      ) : null}
    </ScreenLayout>
  );
}

export { AskDrAiScreen } from './AskDrAiScreen';

const styles = StyleSheet.create({
  muted: { color: colors.textMuted, textAlign: 'center', marginTop: spacing.lg },
});