import { useEffect, useMemo, useState } from 'react';
import {
  Alert,
  Box,
  Button,
  Container,
  Divider,
  Link,
  Paper,
  Stack,
  TextField,
  Typography,
} from '@mui/material';
import { Link as RouterLink, useNavigate } from 'react-router-dom';
import { useAppStore } from '../../store/useAppStore';
import { loginUser, registerUser, requestPasswordReset } from '../../utils/authApi';
import { supabaseClient } from '../../lib/supabaseClient';

const copy = {
  login: {
    eyebrow: 'Tek panel, sonsuz çıktı',
    heading: 'imagepub giriş yap',
    body:
      'OCR, crop ve EPUB üretimini tek akışta yöneten imgpub hesabına eriş. Taslaklarını, kapaklarını ve sürümlerini nerede kalmış olursan ol devam ettir.',
    submit: 'Giriş yap',
    switchLabel: 'Hesabın yok mu?',
    switchLink: { to: '/register', label: 'Hemen kaydol' },
    google: 'Google ile giriş yap',
    highlights: [
      'Kütüphanendeki projeleri bulutta sakla',
      'OCR sonrası metinleri EPUB şablonlarına aktar',
      'Toplu crop ile sayfa düzenini koru',
    ],
  },
  register: {
    eyebrow: 'Dakikalar içinde hazır',
    heading: 'Yeni imgpub hesabı oluştur',
    body:
      'Taradığın sayfaları düzenle, OCR ile Türkçe metni temizle ve EPUB olarak dışa aktar. Kayıt ol, yayın kulübeni dilediğin zaman genişlet.',
    submit: 'Hesabımı oluştur',
    switchLabel: 'Zaten hesabın var mı?',
    switchLink: { to: '/login', label: 'Giriş yap' },
    google: 'Google ile devam et',
    highlights: [
      'Akıllı crop önerileri ile zamandan kazan',
      'OCR çıktısını EPUB ve PDF olarak taşı',
      'Kapak ve önizleme görsellerini tek tuşla üret',
    ],
  },
  forgot: {
    eyebrow: 'Sıfırlama bağlantısı gönder',
    heading: 'Şifreni mi unuttun?',
    body:
      'imgpub hesabına tekrar erişmek için email adresini gir. Demo ortamında e-posta gönderimi simüle edilir.',
    submit: 'Sıfırlama bağlantısı gönder',
    switchLabel: 'Parolanı hatırladın mı?',
    switchLink: { to: '/login', label: 'Giriş yap' },
    google: 'Google ile devam et',
    highlights: [
      'Akışını kaybetmeden geri dön',
      'Hızlıca yeni parola belirle',
      'Güvenli studio erişimini koru',
    ],
  },
};

const fields = {
  login: [
    { name: 'email', label: 'Email adresi', type: 'email' },
    { name: 'password', label: 'Şifre', type: 'password' },
  ],
  register: [
    { name: 'name', label: 'Ad Soyad', type: 'text' },
    { name: 'email', label: 'Email adresi', type: 'email' },
    { name: 'password', label: 'Şifre', type: 'password' },
  ],
  forgot: [{ name: 'email', label: 'Email adresi', type: 'email' }],
};

const highlightIconMap = {
  'Kütüphanendeki projeleri bulutta sakla': 'fa-solid fa-crop-simple',
  'OCR sonrası metinleri EPUB şablonlarına aktar': 'fa-solid fa-book',
  'Toplu crop ile sayfa düzenini koru': 'fa-solid fa-image',
  'Akıllı crop önerileri ile zamandan kazan': 'fa-solid fa-crop-simple',
  'OCR çıktısını EPUB ve PDF olarak taşı': 'fa-solid fa-book',
  'Kapak ve önizleme görsellerini tek tuşla üret': 'fa-solid fa-image',
  'Akışını kaybetmeden geri dön': 'fa-solid fa-rotate-left',
  'Hızlıca yeni parola belirle': 'fa-solid fa-key',
  'Güvenli studio erişimini koru': 'fa-solid fa-lock',
};

const AuthPage = ({ mode }) => {
  const variant = copy[mode];
  const formFields = fields[mode] || [];
  const navigate = useNavigate();
  const setAuthSession = useAppStore((state) => state.setAuthSession);
  const [formError, setFormError] = useState(null);
  const [formMessage, setFormMessage] = useState(null);
  const [submitting, setSubmitting] = useState(false);

  const defaultValues = useMemo(
    () => formFields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {}),
    [formFields],
  );
  const [formValues, setFormValues] = useState(defaultValues);

  useEffect(() => {
    setFormValues(defaultValues);
    setFormError(null);
    setFormMessage(null);
  }, [defaultValues]);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormValues((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    setFormError(null);
    setFormMessage(null);
    setSubmitting(true);

    try {
      if (mode === 'login') {
        const response = await loginUser(formValues);
        setAuthSession(response);
        navigate('/');
      } else if (mode === 'register') {
        const response = await registerUser(formValues);
        setAuthSession(response);
        navigate('/');
      } else if (mode === 'forgot') {
        await requestPasswordReset({ email: formValues.email });
        setFormMessage('Şifre sıfırlama talebin alındı. Lütfen e-posta kutunu kontrol et.');
      }
    } catch (error) {
      setFormError(error.message);
    } finally {
      setSubmitting(false);
    }
  };

  const handleGoogleSignIn = async () => {
    setFormError(null);
    setFormMessage(null);
    if (!supabaseClient) {
      setFormError('Google ile giriş yapılandırılmadı.');
      return;
    }
    setSubmitting(true);
    try {
      const { error } = await supabaseClient.auth.signInWithOAuth({
        provider: 'google',
        options: {
          redirectTo: window.location.origin,
        },
      });
      if (error) throw error;
    } catch (error) {
      setFormError(error.message || 'Google ile giriş başlatılamadı.');
      setSubmitting(false);
    }
  };

  return (
    <Box
      sx={{
        minHeight: '100vh',
        background: 'linear-gradient(180deg, #F9F7F4 0%, #F3EEE5 60%, #F9F7F4 100%)',
        display: 'flex',
        alignItems: 'center',
        py: { xs: 2, md: 4 },
      }}
    >
      <Container maxWidth="lg" sx={{ px: { xs: 2, md: 6 } }}>
        <Paper
          elevation={0}
          sx={{
            borderRadius: 1,
            overflow: 'hidden',
            p: 0,
            display: 'grid',
            gridTemplateColumns: { xs: '1fr', md: '520px 1fr' },
            minHeight: { xs: 'auto', md: 520 },
          }}
        >
          <Box sx={{ p: { xs: 2.5, md: 4 } }}>
            <Stack spacing={2} maxWidth={{ xs: '100%', md: 360 }} mx="auto">
              <Stack spacing={0.75}>
                <Typography
                  variant="h4"
                  sx={{
                    fontFamily: '"Caudex", serif',
                    color: '#1C1815',
                    fontWeight: 700,
                    letterSpacing: 1,
                    fontSize: { xs: '1.35rem', md: '1.6rem' },
                  }}
                >
                  imagepub
                </Typography>
                <Typography variant="overline" sx={{ color: '#B5AD9A', letterSpacing: 2 }}>
                  {variant.eyebrow}
                </Typography>
                <Typography
                  variant="h4"
                  sx={{
                    color: '#1C1815',
                    fontWeight: 700,
                    lineHeight: 1.2,
                    fontSize: { xs: '1.5rem', md: '1.9rem' },
                  }}
                >
                  {variant.heading}
                </Typography>
                <Typography sx={{ color: '#5A5751', lineHeight: 1.4, fontSize: { xs: '0.92rem', md: '1rem' } }}>
                  {variant.body}
                </Typography>
              </Stack>
              <Stack spacing={1.5}>
                <Button
                  fullWidth
                  size="large"
                  variant="outlined"
                  startIcon={<Box component="img" src="/google.svg" alt="Google" width={18} height={18} />}
                  onClick={handleGoogleSignIn}
                  disabled={submitting || !supabaseClient}
                  sx={{
                    borderColor: '#E0DFDC',
                    color: '#1C1815',
                    backgroundColor: '#FFFFFF',
                    borderRadius: 3,
                    py: 1.6,
                    fontWeight: 600,
                    '&:hover': { borderColor: '#CFC8BD', backgroundColor: '#FAF8F6' },
                    '&.Mui-disabled': {
                      opacity: 1,
                      borderColor: '#E0DFDC',
                      color: '#1C1815',
                      backgroundColor: '#FFFFFF',
                      cursor: 'not-allowed',
                    },
                  }}
                >
                  {variant.google}
                </Button>
                <Divider sx={{ color: '#B5AD9A', fontSize: 12 }}>veya e-posta ile</Divider>
                <Stack spacing={1.5} component="form" onSubmit={handleSubmit}>
                  {formFields.map((field) => (
                    <TextField
                      key={field.name}
                      type={field.type}
                      label={field.label}
                      name={field.name}
                      fullWidth
                      required
                      value={formValues[field.name] || ''}
                      onChange={handleChange}
                      variant="outlined"
                      InputProps={{ sx: { borderRadius: 3 } }}
                      disabled={submitting}
                    />
                  ))}
                  {formError && <Alert severity="error">{formError}</Alert>}
                  {formMessage && <Alert severity="success">{formMessage}</Alert>}
                  <Button type="submit" variant="contained" size="large" fullWidth sx={{ py: 1 }} disabled={submitting}>
                    {variant.submit}
                  </Button>
                </Stack>
                {mode === 'login' && (
                  <Link
                    component={RouterLink}
                    to="/forgot-password"
                    underline="none"
                    sx={{ color: '#C0462A', fontWeight: 600, fontSize: 14, textAlign: 'center' }}
                  >
                    Şifreni mi unuttun?
                  </Link>
                )}
                {variant.switchLabel && variant.switchLink && (
                  <Typography sx={{ color: '#7B7366', fontSize: 14, textAlign: 'center' }}>
                    {variant.switchLabel}{' '}
                    <Link component={RouterLink} to={variant.switchLink.to} underline="none" sx={{ fontWeight: 600 }}>
                      {variant.switchLink.label}
                    </Link>
                  </Typography>
                )}
              </Stack>
            </Stack>
          </Box>
          <Box
            sx={{
              backgroundColor: '#F5F1EA',
              borderLeft: { md: '1px solid #E4DDD3' },
              p: { xs: 2.5, md: 4 },
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
            }}
          >
            <AuthShowcase mode={mode} />
          </Box>
        </Paper>
      </Container>
    </Box>
  );
};

const AuthShowcase = ({ mode }) => {
  const variant = copy[mode];

  return (
    <Stack spacing={3} maxWidth={420} mx="auto">
      <Box>
        <Typography variant="overline" sx={{ color: '#B5AD9A', letterSpacing: 3 }}>
          imgpub studio
        </Typography>
        <Typography variant="h5" sx={{ fontWeight: 700, color: '#1C1815', mt: 1 }}>
          Görsellerini EPUB&apos;a çeviren modern akış
        </Typography>
        <Typography sx={{ mt: 1, color: '#5A5751' }}>
          Toplu crop, OCR ve EPUB çıktısını tek yerde birleştir. Taslaklarını paylaşmak için sadece Google hesabın yeterli.
        </Typography>
      </Box>
      <AuthIllustration />
      <Stack spacing={1.5}>
        {variant.highlights.map((item) => {
          const iconClass = highlightIconMap[item];
          return (
            <Stack
              key={item}
              direction="row"
              spacing={2}
              alignItems="center"
              sx={{
                backgroundColor: '#FFFFFF',
                borderRadius: 3,
                border: '1px solid #E3DDD4',
                p: 2,
                boxShadow: '0 10px 30px rgba(48,40,27,0.08)',
              }}
            >
              <Box
                sx={{
                  width: 42,
                  height: 42,
                  borderRadius: 2,
                  background: 'linear-gradient(135deg, #E7C179 0%, #DBA453 100%)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: '#30281B',
                  fontWeight: 700,
                }}
              >
                {iconClass ? <Box component="i" className={iconClass} sx={{ color: '#000', fontSize: 18 }} /> : '•'}
              </Box>
              <Typography sx={{ color: '#1C1815', fontWeight: 600 }}>{item}</Typography>
            </Stack>
          );
        })}
      </Stack>
    </Stack>
  );
};

const AuthIllustration = () => (
  <Box
    sx={{
      position: 'relative',
      borderRadius: 4,
      p: 3,
      background: 'linear-gradient(145deg, #FFFFFF 0%, #F1EBE1 100%)',
      border: '1px solid #E4DDD3',
      minHeight: 220,
      overflow: 'hidden',
    }}
  >
    <Box
      sx={{
        position: 'absolute',
        inset: 0,
        opacity: 0.2,
        backgroundImage:
          'radial-gradient(circle at 20% 20%, rgba(231,193,121,0.6), transparent 45%), radial-gradient(circle at 80% 0%, rgba(41,97,93,0.4), transparent 40%)',
      }}
    />
    <Stack spacing={2} position="relative">
      <Paper elevation={0} sx={{ borderRadius: 3, p: 2, border: '1px solid #E1D8CD' }}>
        <Stack direction="row" spacing={1} alignItems="center">
          <Box
            sx={{
              width: 48,
              height: 48,
              borderRadius: '50%',
              backgroundColor: '#E7C179',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Box component="i" className="fa-solid fa-text-height" sx={{ color: '#000000', fontSize: 18 }} />
          </Box>
          <Box sx={{ flexGrow: 1 }}>
            <Typography sx={{ fontSize: 14, fontWeight: 700, color: '#30281B' }}>OCR &amp; Crop</Typography>
            <Typography sx={{ fontSize: 12, color: '#7B7366' }}>Sayfa kenarlarını otomatik hizala</Typography>
          </Box>
        </Stack>
      </Paper>
      <Paper elevation={0} sx={{ borderRadius: 3, p: 2.5, border: '1px solid #E1D8CD' }}>
        <Typography sx={{ fontSize: 13, color: '#7B7366', mb: 1 }}>EPUB Süreci</Typography>
        <Stack spacing={1}>
          {['Kapak', 'Metin', 'Önizleme'].map((item) => (
            <Stack key={item} direction="row" spacing={1.5} alignItems="center">
              <Box sx={{ width: 10, height: 10, borderRadius: '50%', backgroundColor: '#C3B59E' }} />
              <Typography sx={{ fontSize: 13, fontWeight: 600, color: '#1C1815' }}>{item}</Typography>
              <Box sx={{ flexGrow: 1, height: 4, borderRadius: 999, backgroundColor: '#EFE7DB' }} />
            </Stack>
          ))}
        </Stack>
      </Paper>
    </Stack>
  </Box>
);

export default AuthPage;
