import { useEffect, useState } from 'react'
import { notifications } from '@mantine/notifications'
import { VillageActivityLineChart, VillageComparisonBarChart } from '@/frontend/components/DashboardCharts'
import { ErrorDataTable } from '@/frontend/components/ErrorDataTable'
import { SummaryCard } from '@/frontend/components/SummaryCard'
import {
  ActionIcon,
  Group,
  SimpleGrid,
  Stack,
  Text,
  Title,
  Modal,
  Button,
  TextInput,
  Switch,
  Badge,
  Textarea,
  Skeleton
} from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'
import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
import useSWR from 'swr'
import {
  TbActivity,
  TbAlertTriangle,
  TbBuildingCommunity,
  TbRefresh,
  TbVersions
} from 'react-icons/tb'
import { API_URLS } from '../config/api'

export const Route = createFileRoute('/apps/$appId/')({
  component: AppOverviewPage,
})

const fetcher = (url: string) => fetch(url).then((res) => res.json())

function AppOverviewPage() {
  const { appId } = useParams({ from: '/apps/$appId/' })
  const navigate = useNavigate()
  const isDesaPlus = appId === 'desa-plus'
  const [versionModalOpened, { open: openVersionModal, close: closeVersionModal }] = useDisclosure(false)

  // Form State
  const [latestVersion, setLatestVersion] = useState('')
  const [minVersion, setMinVersion] = useState('')
  const [messageUpdate, setMessageUpdate] = useState('')
  const [maintenance, setMaintenance] = useState(false)
  const [isSaving, setIsSaving] = useState(false)

  // Data Fetching
  const { data: gridRes, isLoading: gridLoading, mutate: mutateGrid } = useSWR(isDesaPlus ? API_URLS.getGridOverview() : null, fetcher)
  const { data: dailyRes, isLoading: dailyLoading, mutate: mutateDaily } = useSWR(isDesaPlus ? API_URLS.getDailyActivity() : null, fetcher)
  const { data: comparisonRes, isLoading: comparisonLoading, mutate: mutateComparison } = useSWR(isDesaPlus ? API_URLS.getComparisonActivity() : null, fetcher)

  const grid = gridRes?.data
  const dailyData = dailyRes?.data || []
  const comparisonData = comparisonRes?.data || []

  // Initialize form when data loads or modal opens
  useEffect(() => {
    if (grid?.version && versionModalOpened) {
      setLatestVersion(grid.version.mobile_latest_version || '')
      setMinVersion(grid.version.mobile_minimum_version || '')
      setMessageUpdate(grid.version.mobile_message_update || '')
      setMaintenance(grid.version.mobile_maintenance === 'true')
    }
  }, [grid, versionModalOpened])

  const handleRefresh = () => {
    mutateGrid()
    mutateDaily()
    mutateComparison()
  }

  const handleSaveVersion = async () => {
    setIsSaving(true)
    try {
      const response = await fetch(API_URLS.postVersionUpdate(), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          mobile_latest_version: latestVersion,
          mobile_minimum_version: minVersion,
          mobile_maintenance: maintenance,
          mobile_message_update: messageUpdate,
        }),
      })

      if (response.ok) {
        notifications.show({
          title: 'Update Successful',
          message: 'Application version information has been updated.',
          color: 'teal',
        })
        mutateGrid()
        closeVersionModal()
      } else {
        notifications.show({
          title: 'Update Failed',
          message: 'Failed to update version information. Please check your data.',
          color: 'red',
        })
      }
    } catch (error) {
      notifications.show({
        title: 'Network Error',
        message: 'Could not connect to the server. Please try again later.',
        color: 'red',
      })
    } finally {
      setIsSaving(false)
    }
  }

  return (
    <>
      <Modal opened={versionModalOpened} onClose={closeVersionModal} title="Update Version Information" radius="md">
        <Stack gap="md">
          <TextInput 
            label="Active Version" 
            placeholder="e.g. 2.0.5"
            value={latestVersion} 
            onChange={(e) => setLatestVersion(e.currentTarget.value)}
          />
          <TextInput 
            label="Minimum Version" 
            placeholder="e.g. 2.0.0"
            value={minVersion} 
            onChange={(e) => setMinVersion(e.currentTarget.value)}
          />
          <Textarea 
            label="Update Message" 
            placeholder="Enter release notes or update message..." 
            value={messageUpdate}
            onChange={(e) => setMessageUpdate(e.currentTarget.value)}
            minRows={3}
            autosize
          />
          <Switch 
            label="Maintenance Mode" 
            description="Enable to put the app in maintenance mode for users." 
            checked={maintenance}
            onChange={(e) => setMaintenance(e.currentTarget.checked)}
          />
          <Button fullWidth onClick={handleSaveVersion} loading={isSaving}>Save Changes</Button>
        </Stack>
      </Modal>

      <Stack gap="xl">
        <Group justify="space-between">
          <Stack gap={0}>
            <Title order={3}>Overview</Title>
            <Text size="sm" c="dimmed">Detailed metrics for {isDesaPlus ? 'Desa+' : appId}</Text>
          </Stack>

          {/* <Group gap="md">
            <ActionIcon variant="light" color="brand-blue" size="lg" radius="md" onClick={handleRefresh}>
              <TbRefresh size={20} />
            </ActionIcon>
          </Group> */}
        </Group>

        <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
          <SummaryCard
            title="Active Version"
            value={gridLoading ? '...' : (grid?.version?.mobile_latest_version || 'N/A')}
            icon={TbVersions}
            color="brand-blue"
            onClick={openVersionModal}
          >
            <Group justify="space-between" mt="md">
              <Stack gap={0}>
                <Text size="xs" c="dimmed">Min. Version</Text>
                <Text size="sm" fw={600}>{grid?.version?.mobile_minimum_version || '-'}</Text>
              </Stack>
              <Stack gap={0} align="flex-end">
                <Text size="xs" c="dimmed">Maintenance</Text>
                <Badge size="sm" color={grid?.version?.mobile_maintenance === 'true' ? 'red' : 'gray'} variant="light">
                  {grid?.version?.mobile_maintenance?.toUpperCase() || 'FALSE'}
                </Badge>
              </Stack>
            </Group>
          </SummaryCard>

          <SummaryCard
            title="Total Activity Today"
            value={gridLoading ? '...' : (grid?.activity?.today?.toLocaleString() || '0')}
            icon={TbActivity}
            color="teal"
            trend={grid?.activity?.increase ? { value: `${grid.activity.increase}%`, positive: grid.activity.increase > 0 } : undefined}
          />

          <SummaryCard
            title="Total Villages Active"
            value={gridLoading ? '...' : (grid?.village?.active || '0')}
            icon={TbBuildingCommunity}
            color="indigo"
            onClick={() => navigate({ to: `/apps/${appId}/villages` })}
          >
            <Group justify="space-between" mt="md">
              <Text size="xs" c="dimmed">Nonactive Villages</Text>
              <Badge size="sm" color="red" variant="light">{grid?.village?.inactive || 0}</Badge>
            </Group>
          </SummaryCard>

          <SummaryCard
            title="Errors Today"
            value="12"
            icon={TbAlertTriangle}
            color="red"
            isError={true}
            trend={{ value: '4.8%', positive: false }}
          />
        </SimpleGrid>

        <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
          <VillageActivityLineChart data={dailyData} isLoading={dailyLoading} />
          <VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} />
        </SimpleGrid>

        <ErrorDataTable />
      </Stack>
    </>
  )
}