import React, { useState, useEffect } from 'react';
import { useNavigate } from "@remix-run/react";
import {
  Page,
  Layout,
  Card,
  Text,
  TextField,
  Checkbox,
  Button,
  BlockStack,
  InlineStack,
  Spinner,
} from "@shopify/polaris";
import { SocialPlatform } from '../App';
import { SocialLoginConfig } from '../lib/shopify-metafields';
import { t } from '../lib/i18n';

const PLATFORMS: SocialPlatform[] = ['facebook', 'x', 'google', 'line', 'instagram', 'apple', 'tiktok'];

interface PlatformConfig {
  enabled: boolean;
  [key: string]: string | boolean;
}

// 各プラットフォームの設定項目定義
const PLATFORM_FIELDS: Record<SocialPlatform, { labelKey: string; key: string }[]> = {
  facebook: [
    { labelKey: 'appId', key: 'appId' },
    { labelKey: 'appSecret', key: 'appSecret' }
  ],
  x: [
    { labelKey: 'appId', key: 'appId' },
    { labelKey: 'clientId', key: 'clientId' },
    { labelKey: 'clientSecret', key: 'clientSecret' }
  ],
  google: [
    { labelKey: 'clientId', key: 'clientId' }
  ],
  line: [
    { labelKey: 'liffId', key: 'liffId' },
    { labelKey: 'channelId', key: 'channelId' },
    { labelKey: 'channelSecret', key: 'channelSecret' }
  ],
  instagram: [
    { labelKey: 'appId', key: 'appId' },
    { labelKey: 'appSecret', key: 'appSecret' }
  ],
  apple: [
    { labelKey: 'clientId', key: 'clientId' }
  ],
  tiktok: [
    { labelKey: 'clientKey', key: 'clientKey' },
    { labelKey: 'clientSecret', key: 'clientSecret' }
  ]
};

const SettingsPage: React.FC = () => {
  const navigate = useNavigate();
  const [configs, setConfigs] = useState<Record<SocialPlatform, PlatformConfig>>(() =>
    PLATFORMS.reduce(
      (acc, p) => {
        const fields = PLATFORM_FIELDS[p].reduce((fieldAcc, field) => {
          fieldAcc[field.key] = '';
          return fieldAcc;
        }, {} as Record<string, string>);
        acc[p] = { enabled: false, ...fields };
        return acc;
      },
      {} as Record<SocialPlatform, PlatformConfig>
    )
  );
  const [redirectUri, setRedirectUri] = useState('');
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);

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

  const loadConfigs = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/admin/config');
      if (res.ok) {
        const data: SocialLoginConfig = await res.json();
        setRedirectUri(data.redirectUri || '');
        
        const newConfigs = PLATFORMS.reduce(
          (acc, p) => {
            const platformData = data[p as keyof SocialLoginConfig];
            if (platformData && typeof platformData === 'object' && 'enabled' in platformData) {
              const fields = PLATFORM_FIELDS[p].reduce((fieldAcc, field) => {
                fieldAcc[field.key] = (platformData as any)?.[field.key] || '';
                return fieldAcc;
              }, {} as Record<string, string>);
              
              acc[p] = {
                enabled: platformData.enabled || false,
                ...fields,
              };
            } else {
              const fields = PLATFORM_FIELDS[p].reduce((fieldAcc, field) => {
                fieldAcc[field.key] = '';
                return fieldAcc;
              }, {} as Record<string, string>);
              
              acc[p] = {
                enabled: false,
                ...fields,
              };
            }
            return acc;
          },
          {} as Record<SocialPlatform, PlatformConfig>
        );
        setConfigs(newConfigs);
      } else if (res.status === 403) {
        // 認証エラーの場合は403エラー画面を表示
        window.location.href = '/403';
      }
    } catch (error) {
      console.error('設定読み込みエラー:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (
    platform: SocialPlatform,
    field: string,
    value: string
  ) => {
    setConfigs(prev => ({
      ...prev,
      [platform]: { ...prev[platform], [field]: value }
    }));
  };

  const handleToggle = (platform: SocialPlatform, enabled: boolean) => {
    setConfigs(prev => ({
      ...prev,
      [platform]: { ...prev[platform], enabled }
    }));
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      const socialConfig: SocialLoginConfig = {
        redirectUri,
        ...PLATFORMS.reduce(
          (acc, p) => {
            const platformConfig = configs[p];
            const platformData: any = { enabled: platformConfig.enabled };
            
            PLATFORM_FIELDS[p].forEach(field => {
              platformData[field.key] = platformConfig[field.key] || '';
            });
            
            acc[p] = platformData;
            return acc;
          },
          {} as any
        )
      };

      const res = await fetch('/api/admin/config', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(socialConfig),
      });

      if (res.ok) {
        alert(t('settings.saveSuccess'));
        // 保存後にトップページに遷移
        navigate('/app');
      } else if (res.status === 403) {
        // 認証エラーの場合は403エラー画面を表示
        window.location.href = '/403';
      } else {
        alert(t('settings.saveError'));
      }
    } catch (error) {
      console.error('保存エラー:', error);
      alert(t('settings.saveError'));
    } finally {
      setSaving(false);
    }
  };

  return (
    <Page title={t('settings.pageTitle')}>
      <Layout>
        <Layout.Section>
          <Card>
            {loading ? (
              <div style={{ textAlign: 'center', padding: '2rem' }}>
                <Spinner size="large" />
                <Text as="p" variant="bodyMd" alignment="center">
                  {t('settings.loading')}
                </Text>
              </div>
            ) : (
              <BlockStack gap="500">
                {/* 共通設定 */}
                <Card>
                  <BlockStack gap="300">
                    <Text as="h3" variant="headingMd">
                      {t('settings.commonSettings')}
                    </Text>
                    <TextField
                      label={t('settings.redirectUri')}
                      value={redirectUri}
                      onChange={setRedirectUri}
                      placeholder="https://example.com/callback"
                      autoComplete="off"
                      helpText={t('settings.redirectUriHelp')}
                    />
                  </BlockStack>
                </Card>

                {/* 各プラットフォームの設定 */}
                {PLATFORMS.map(platform => (
                  <Card key={platform}>
                    <BlockStack gap="300">
                      <Text as="h3" variant="headingMd">
                        {t(`settings.platforms.${platform}`)}
                      </Text>

                      <Checkbox
                        label={t('settings.enabled')}
                        checked={configs[platform].enabled}
                        onChange={(checked) => handleToggle(platform, checked)}
                      />

                      {PLATFORM_FIELDS[platform].map(field => (
                        <TextField
                          key={field.key}
                          label={t(`settings.fields.${field.labelKey}`)}
                          value={configs[platform][field.key] as string}
                          onChange={(value) => handleChange(platform, field.key, value)}
                          placeholder={t(`settings.fields.${field.labelKey}`)}
                          type={field.key.includes('secret') || field.key.includes('Secret') ? 'password' : 'text'}
                          autoComplete="off"
                        />
                      ))}
                    </BlockStack>
                  </Card>
                ))}

                <InlineStack align="end" gap="300">
                  <Button
                    onClick={() => navigate('/app')}
                    disabled={saving}
                  >
                    {t('settings.backToTop')}
                  </Button>
                  <Button
                    variant="primary"
                    onClick={handleSave}
                    loading={saving}
                    disabled={saving}
                  >
                    {saving ? t('settings.saving') : t('settings.save')}
                  </Button>
                </InlineStack>
              </BlockStack>
            )}
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
};

export default SettingsPage;