'use client'

import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import {
  Box,
  Card,
  CardContent,
  Typography,
  Button,
  Chip,
  Paper,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  MenuItem,
  Select,
  FormControl,
  InputLabel,
  Alert,
  CircularProgress,
  Divider,
  IconButton,
} from '@mui/material'
import {
  AccountCircle,
  Settings,
  Link as LinkIcon,
  RequestQuote,
  Logout,
  CheckCircle,
  Cancel,
  Refresh,
  CloudUpload,
} from '@mui/icons-material'
import PersonIcon from '@mui/icons-material/Person';
import PersonPinCircleOutlinedIcon from '@mui/icons-material/PersonPinCircleOutlined';

interface UserData {
  id: number
  name: string
  email: string
  isApiConnected: boolean
  active: boolean
  createdAt: string
}

interface SpAccount {
  id: number
  account_type: number
  goal: string | null
  region: string
  store_name: string 
  region_detail: string
  status: number
  created_at: string
}

interface Quote {
  id: number
  name: string
  email: string
  brief: string
  created_at: string
}

export default function AmazonApiUserDashboard() {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [userData, setUserData] = useState<UserData | null>(null)
  const [spAccounts, setSpAccounts] = useState<SpAccount[]>([])
  const [quotes, setQuotes] = useState<Quote[]>([])
  const [error, setError] = useState('')
  const [authDialogOpen, setAuthDialogOpen] = useState(false)
  const [quoteDialogOpen, setQuoteDialogOpen] = useState(false)
  const [authLoading, setAuthLoading] = useState(false)
  const [quoteLoading, setQuoteLoading] = useState(false)
  const [successMessage, setSuccessMessage] = useState('')

  // SP-API Authorization form
  const [accountType, setAccountType] = useState('seller')
  const [region, setRegion] = useState('na')
  const [goal, setGoal] = useState('')

  // Quote request form
  const [quoteName, setQuoteName] = useState('')
  const [quoteEmail, setQuoteEmail] = useState('')
  const [quoteDescription, setQuoteDescription] = useState('')

  useEffect(() => {
    fetchUserData()
  }, [])

  const fetchUserData = async () => {
    try {
      setLoading(true)
      const response = await fetch('/api/user/profile', {
        credentials: 'include',
      })

      if (response.status === 401) {
        router.push('/amazon/login')
        return
      }

      const data = await response.json()

      //console.log(data,'data');
      

      if (data.success) {
        setUserData(data.user)
        setSpAccounts(data.spAccounts || [])
        setQuotes(data.quotes || [])
        
        // Pre-fill quote form with user data
        setQuoteName(data.user.name)
        setQuoteEmail(data.user.email)
      } else {
        setError(data.error || 'Failed to load user data')
      }
    } catch (err) {
      console.error('Error fetching user data:', err)
      setError('Failed to load dashboard data')
    } finally {
      setLoading(false)
    }
  }

  const handleLogout = async () => {
    await fetch("/api/logout", {
      method: "POST",
      credentials: "include",
    });
  
    router.push("/amazon/login");
  };
  

  const handleInitiateAuth = async () => {
    try {
      setAuthLoading(true)
      setError('')
      setSuccessMessage('')

      const response = await fetch('/api/sp-api/pre-auth', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify({
          accountType,
          region,
          goal: goal || null,
        }),
      })

      const data = await response.json()

      if (data.success && data.authUrl) {
        // Open authorization URL in new window
        window.location.href = data.authUrl;
        setSuccessMessage('Authorization window opened. Please complete the process.')
        setAuthDialogOpen(false)
        // Refresh data after a delay
        setTimeout(() => {
          fetchUserData()
        }, 2000)
      } else {
        setError(data.error || 'Failed to initiate authorization')
      }
    } catch (err) {
      console.error('Error initiating auth:', err)
      setError('Failed to initiate authorization')
    } finally {
      setAuthLoading(false)
    }
  }

  const handleRequestQuote = async () => {
    try {
      setQuoteLoading(true)
      setError('')
      setSuccessMessage('')

      if (!quoteName || !quoteEmail || !quoteDescription) {
        setError('Please fill all fields')
        return
      }

      const response = await fetch('/api/request-quote', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: quoteName,
          email: quoteEmail,
          description: quoteDescription,
        }),
      })

      const data = await response.json()

      if (data.success) {
        setSuccessMessage(data.message)
        setQuoteDialogOpen(false)
        setQuoteDescription('')
        fetchUserData()
      } else {
        setError(data.error || 'Failed to submit quote request')
      }
    } catch (err) {
      console.error('Error requesting quote:', err)
      setError('Failed to submit quote request')
    } finally {
      setQuoteLoading(false)
    }
  }

  const getAccountTypeLabel = (type: number) => {
    return type === 1 ? 'Seller' : 'Vendor'
  }

  const getRegionLabel = (region: string) => {
    const labels: { [key: string]: string } = {
      na: 'North America',
      eu: 'Europe',
      asia: 'Asia',
    }
    return labels[region] || region.toUpperCase()
  }

  const getStatusChip = (status: number) => {
    if (status === 1) {
      return <Chip label="Connected" color="success" size="small" icon={<CheckCircle />} />
    }
    return <Chip label="Pending" color="warning" size="small" icon={<Cancel />} />
  }

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <CircularProgress />
      </div>
    )
  }

  if (error && !userData) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <Alert severity="error">{error}</Alert>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-linear-to-br from-gray-50 to-gray-100 pt-28">
      {/* Header */}
      <div>
        <div className="container mx-auto px-4 pt-4">
          <div className="md:flex justify-between items-center">
            <div className="flex items-center gap-3 mb-5">
              <CloudUpload className="text-blue-600" />
              <Typography variant="h5" className="font-bold text-gray-800">
                Amazon SP-API Dashboard
              </Typography>
            </div>
            <div className="flex justify-between items-center gap-4">
              <Chip
                label={userData?.isApiConnected ? 'API Connected' : 'Not Connected'}
                color={userData?.isApiConnected ? 'success' : 'default'}
                icon={userData?.isApiConnected ? <CheckCircle /> : <Cancel />}
              />
              <Button
                variant="text"
                startIcon={<Logout />}
                onClick={handleLogout}
                sx={{
                  color:'#c32630'
                }}
              >
                Logout
              </Button>
            </div>
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 py-6">
        {/* Success/Error Messages */}
        {successMessage && (
          <Alert severity="success" className="mb-6" onClose={() => setSuccessMessage('')}>
            {successMessage}
          </Alert>
        )}
        {error && (
          <Alert severity="error" className="mb-6" onClose={() => setError('')}>
            {error}
          </Alert>
        )}

        <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
          {/* User Info Card */}
          <div className="md:col-span-4">
            <Card className="shadow-lg">
              <CardContent>
                <div className="flex items-start gap-2 mb-4">
                  <PersonPinCircleOutlinedIcon className='mt-1 text-[#c32630]' />
                  <div>
                    <Typography variant="h6" className="font-bold">
                      {userData?.name}
                    </Typography>
                    <Typography variant="body2" className="text-gray-500">
                      {userData?.email}
                    </Typography>
                  </div>
                </div>
                <Divider className="my-4" />
                <div className="space-y-2">
                  <div className="flex justify-between mt-6">
                    <Typography variant="body2" className="text-gray-600">
                      Account Status:
                    </Typography>
                    <Chip
                      label={userData?.active ? 'Active' : 'Inactive'}
                      color={userData?.active ? 'success' : 'default'}
                      size="small"
                    />
                  </div>
                  <div className="flex justify-between">
                    <Typography variant="body2" className="text-gray-600">
                      Member Since:
                    </Typography>
                    <Typography variant="body2">
                      {userData?.createdAt ? new Date(userData.createdAt).toLocaleDateString() : 'N/A'}
                    </Typography>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Quick Actions */}
          <div className="md:col-span-8">
            <Card className="shadow-lg">
              <CardContent>
                <Typography variant="h6" className="font-bold mb-4">
                  Quick Actions
                </Typography>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-17">
                  <Button
                    variant="contained"
                    fullWidth
                    startIcon={<LinkIcon />}
                    onClick={() => setAuthDialogOpen(true)}
                    sx={{
                      backgroundColor:'#c32630'
                    }}
                    size="large"
                  >
                    Connect Amazon SP-API
                  </Button>
                  <Button
                    variant="outlined"
                    fullWidth
                    startIcon={<RequestQuote />}
                    onClick={() => setQuoteDialogOpen(true)}
                    sx={{
                      border:'1px solid #c32630',
                      color:'#c32630'
                    }}
                    size="large"
                  >
                    Request Price Quote
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* SP-API Accounts */}
          <div className="md:col-span-12">
            <Card className="shadow-lg">
              <CardContent>
                <div className="flex justify-between items-center mb-4">
                  <h2 className="font-medium text-[25px]">
                    Seller Central
                  </h2>
                  <IconButton onClick={fetchUserData} size="small">
                    <Refresh />
                  </IconButton>
                </div>
                {spAccounts.length === 0 ? (
                  <Paper className="p-6 text-center bg-gray-50">
                    <Typography variant="body2" className="text-gray-500">
                      No SP-API authorizations yet. Click "Connect Amazon SP-API" to get started.
                    </Typography>
                  </Paper>
                ) : (
                  <div className="space-y-3 h-[500px] overflow-auto">
                    {spAccounts.map((account) => (
                      <Paper key={account.id} className="p-4 bg-gray-50">
                        <div className="flex justify-between items-start">
                          <div>
                            <h2 className="font-semibold text-[20px] text-[#c32630]">
                              {account.store_name}
                            </h2>
                            <Typography variant="subtitle1" className="font-semibold">
                              {getAccountTypeLabel(account.account_type)} - {getRegionLabel(account.region)}
                            </Typography>
                            <Typography variant="body2" className="text-gray-600 mt-1">
                              Goal: {account.goal || 'N/A'} | Created: {new Date(account.created_at).toLocaleDateString()}
                            </Typography>
                          </div>
                          {getStatusChip(account.status)}
                        </div>
                      </Paper>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Quote Requests */}
          <div className="md:col-span-12">
            <Card className="shadow-lg">
              <CardContent>
                <h2 className="font-medium text-[25px] mb-4">
                  Recent Quote Requests
                </h2>
                {quotes.length === 0 ? (
                  <Paper className="p-6 text-center bg-gray-50">
                    <Typography variant="body2" className="text-gray-500">
                      No quote requests yet.
                    </Typography>
                  </Paper>
                ) : (
                  <div className="space-y-3">
                    {quotes.map((quote) => (
                      <Paper key={quote.id} className="p-4 bg-gray-50">
                        <Typography variant="subtitle1" className="font-semibold">
                          {quote.name}
                        </Typography>
                        <Typography variant="body2" className="text-gray-600 mt-1">
                          {quote.brief.substring(0, 150)}...
                        </Typography>
                        <Typography variant="caption" className="text-gray-400 mt-2 block">
                          {new Date(quote.created_at).toLocaleDateString()}
                        </Typography>
                      </Paper>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

      {/* SP-API Authorization Dialog */}
      <Dialog open={authDialogOpen} onClose={() => setAuthDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle>Connect Amazon SP-API</DialogTitle>
        <DialogContent>
          <div className="space-y-4 pt-4">
            <div className='mb-3'>
              <FormControl fullWidth>
                <InputLabel>Account Type</InputLabel>
                <Select
                  value={accountType}
                  onChange={(e) => setAccountType(e.target.value)}
                  label="Account Type"
                >
                  <MenuItem value="seller">Seller</MenuItem>
                  <MenuItem value="vendor">Vendor</MenuItem>
                </Select>
              </FormControl>
            </div>
            <div className='mb-3'>
              <FormControl fullWidth>
                <InputLabel>Region</InputLabel>
                <Select
                  value={region}
                  onChange={(e) => setRegion(e.target.value)}
                  label="Region"
                >
                  <MenuItem value="na">North America</MenuItem>
                  <MenuItem value="eu">Europe</MenuItem>
                  <MenuItem value="asia">Asia</MenuItem>
                </Select>
              </FormControl>
            </div>
            <div>
              <TextField
                fullWidth
                label="Goal (Optional)"
                value={goal}
                onChange={(e) => setGoal(e.target.value)}
                placeholder="e.g., Integration, Testing"
              />
            </div>
          </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setAuthDialogOpen(false)}>Cancel</Button>
          <Button
            onClick={handleInitiateAuth}
            variant="contained"
            disabled={authLoading}
            startIcon={authLoading ? <CircularProgress size={20} /> : <LinkIcon />}
          >
            {authLoading ? 'Processing...' : 'Authorize'}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Quote Request Dialog */}
      <Dialog open={quoteDialogOpen} onClose={() => setQuoteDialogOpen(false)} maxWidth="md" fullWidth>
        <DialogTitle>Request Price Quote</DialogTitle>
        <DialogContent>
          <div className="space-y-4 pt-4">
          <div className="mb-3">
            <TextField
              fullWidth
              label="Name"
              value={quoteName}
              onChange={(e) => setQuoteName(e.target.value)}
              required
            />
          </div>
          <div className="mb-3">
            <TextField
              fullWidth
              label="Email"
              type="email"
              value={quoteEmail}
              onChange={(e) => setQuoteEmail(e.target.value)}
              required
            />
          </div>
          <div className="mb-3">
            <TextField
              fullWidth
              label="Description"
              multiline
              rows={6}
              value={quoteDescription}
              onChange={(e) => setQuoteDescription(e.target.value)}
              placeholder="Please describe your requirements..."
              required
            />
          </div>
          </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setQuoteDialogOpen(false)}>Cancel</Button>
          <Button
            onClick={handleRequestQuote}
            variant="contained"
            disabled={quoteLoading}
            startIcon={quoteLoading ? <CircularProgress size={20} /> : <RequestQuote />}
          >
            {quoteLoading ? 'Submitting...' : 'Submit Request'}
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}