"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
import { Plus, Edit, Trash2, ArrowLeft, User, Upload, X } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { AuthGuard } from "@/components/auth-guard"
import { useAuth } from "@/hooks/use-auth"
import apiClient from "@/lib/api-client"
import { API_CONFIG } from "@/lib/config"
import { useToast } from "@/hooks/use-toast"

interface VoteEvent {
  id: string
  title: string
  description: string
  start_date: string
  end_date: string
  is_active: boolean
  is_voting_open: boolean
}

interface Candidate {
  id: string
  vote_event_id: string
  name: string
  image_url: string
  description: string
  created_at: string
  updated_at: string
}

interface CandidateFormData {
  name: string
  description: string
  image_url: string
}

function CandidateManagementContent() {
  const { user, logout } = useAuth()
  const { toast } = useToast()
  const params = useParams()
  const eventId = params.eventId as string

  const [event, setEvent] = useState<VoteEvent | null>(null)
  const [candidates, setCandidates] = useState<Candidate[]>([])
  const [loading, setLoading] = useState(true)
  const [formData, setFormData] = useState<CandidateFormData>({
    name: "",
    description: "",
    image_url: ""
  })
  const [editingCandidate, setEditingCandidate] = useState<Candidate | null>(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [uploadingImage, setUploadingImage] = useState(false)
  const [imageFile, setImageFile] = useState<File | null>(null)
  const [imagePreview, setImagePreview] = useState<string>("")

  useEffect(() => {
    if (eventId) {
      fetchEventDetails()
      fetchCandidates()
    }
  }, [eventId])

  const fetchEventDetails = async () => {
    try {
      const response = await apiClient.get(`${API_CONFIG.ENDPOINTS.VOTE_EVENTS}/${eventId}`)
      if (response.data.success) {
        setEvent(response.data.data)
      }
    } catch (error) {
      console.error('Error fetching event details:', error)
      toast({
        title: "Error",
        description: "Failed to fetch event details",
        variant: "destructive"
      })
    }
  }

  const fetchCandidates = async () => {
    try {
      setLoading(true)
      const response = await apiClient.get(`${API_CONFIG.ENDPOINTS.VOTE_EVENTS}/${eventId}/candidates`)
      if (response.data.success) {
        setCandidates(response.data.data.candidates || [])
      }
    } catch (error) {
      console.error('Error fetching candidates:', error)
      toast({
        title: "Error",
        description: "Failed to fetch candidates",
        variant: "destructive"
      })
    } finally {
      setLoading(false)
    }
  }

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      // Validate file type
      const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp']
      if (!validTypes.includes(file.type)) {
        toast({
          title: "Invalid File Type",
          description: "Please select a valid image file (JPEG, PNG, GIF, WebP)",
          variant: "destructive"
        })
        return
      }

      // Validate file size (max 5MB)
      const maxSize = 5 * 1024 * 1024 // 5MB
      if (file.size > maxSize) {
        toast({
          title: "File Too Large",
          description: "Please select an image smaller than 5MB",
          variant: "destructive"
        })
        return
      }

      setImageFile(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        setImagePreview(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

  const uploadImage = async (file: File): Promise<string> => {
    const formData = new FormData()
    formData.append('file', file)
    formData.append('type', file.type)
    
    try {
      const response = await apiClient.post(API_CONFIG.ENDPOINTS.FILES, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      
      if (response.data.success) {
        return response.data.data.url
      } else {
        throw new Error('Upload failed')
      }
    } catch (error) {
      console.error('Error uploading image:', error)
      throw new Error('Failed to upload image')
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)

    try {
      let imageUrl = formData.image_url

      // Upload new image if selected
      if (imageFile) {
        setUploadingImage(true)
        try {
          imageUrl = await uploadImage(imageFile)
        } catch (uploadError) {
          setUploadingImage(false)
          throw uploadError
        }
        setUploadingImage(false)
      }

      const payload = {
        vote_event_id: eventId,
        name: formData.name,
        image_url: imageUrl,
        description: formData.description
      }

      if (editingCandidate) {
        // Update existing candidate
        await apiClient.put(`${API_CONFIG.ENDPOINTS.CANDIDATES}/${editingCandidate.id}`, payload)
        toast({
          title: "Success",
          description: "Candidate updated successfully"
        })
      } else {
        // Create new candidate
        await apiClient.post(API_CONFIG.ENDPOINTS.CANDIDATES, payload)
        toast({
          title: "Success",
          description: "Candidate created successfully"
        })
      }

      setIsDialogOpen(false)
      resetForm()
      fetchCandidates()
    } catch (error) {
      console.error('Error saving candidate:', error)
      toast({
        title: "Error",
        description: editingCandidate ? "Failed to update candidate" : "Failed to create candidate",
        variant: "destructive"
      })
    } finally {
      setSubmitting(false)
    }
  }

  const handleEdit = (candidate: Candidate) => {
    setEditingCandidate(candidate)
    setFormData({
      name: candidate.name,
      description: candidate.description,
      image_url: candidate.image_url
    })
    setImagePreview(candidate.image_url)
    setIsDialogOpen(true)
  }

  const handleDelete = async (candidateId: string) => {
    try {
      await apiClient.delete(`${API_CONFIG.ENDPOINTS.CANDIDATES}/${candidateId}`)
      toast({
        title: "Success",
        description: "Candidate deleted successfully"
      })
      fetchCandidates()
    } catch (error) {
      console.error('Error deleting candidate:', error)
      toast({
        title: "Error",
        description: "Failed to delete candidate",
        variant: "destructive"
      })
    }
  }

  const resetForm = () => {
    setFormData({
      name: "",
      description: "",
      image_url: ""
    })
    setEditingCandidate(null)
    setImageFile(null)
    setImagePreview("")
    setUploadingImage(false)
  }

  const removeImage = () => {
    setImageFile(null)
    setImagePreview("")
    setFormData({ ...formData, image_url: "" })
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm border-b">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <div className="flex items-center gap-4">
            <Link href="/admin/events" className="text-gray-600 hover:text-gray-900">
              <ArrowLeft className="h-6 w-6" />
            </Link>
            <img src="/images/meti-logo.png" alt="METI - New & Renewable Energy" className="h-12 w-auto" />
            <div>
              <h1 className="text-2xl font-bold text-gray-900">Candidate Management</h1>
              {event && (
                <p className="text-sm text-gray-600">{event.title}</p>
              )}
            </div>
          </div>
          <div className="flex items-center gap-4">
            <span className="text-sm text-gray-600">Welcome, {user?.username || 'Admin'}</span>
            <Button variant="outline" size="sm" onClick={logout}>
              Logout
            </Button>
          </div>
        </div>
      </header>

      <div className="container mx-auto px-4 py-8">
        {/* Header with Create Button */}
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
          <div>
            <h2 className="text-3xl font-bold text-gray-900">Candidates</h2>
            <p className="text-gray-600 mt-1">Manage candidates for this voting event</p>
          </div>
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button 
                onClick={() => {
                  resetForm()
                  setIsDialogOpen(true)
                }}
                className="bg-blue-600 hover:bg-blue-700"
              >
                <Plus className="h-4 w-4 mr-2" />
                Add Candidate
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-md">
              <DialogHeader>
                <DialogTitle>{editingCandidate ? 'Edit Candidate' : 'Add New Candidate'}</DialogTitle>
                <DialogDescription>
                  {editingCandidate ? 'Update the candidate details below.' : 'Fill in the details to add a new candidate.'}
                </DialogDescription>
              </DialogHeader>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="name">Candidate Name</Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    placeholder="Enter candidate name"
                    required
                  />
                </div>
                
                <div>
                  <Label htmlFor="description">Description</Label>
                  <Textarea
                    id="description"
                    value={formData.description}
                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                    placeholder="Enter candidate description"
                    rows={3}
                  />
                </div>

                <div>
                  <Label>Candidate Photo</Label>
                  <div className="mt-2">
                    {imagePreview ? (
                      <div className="relative w-32 h-32 mx-auto">
                        <Image
                          src={imagePreview}
                          alt="Preview"
                          fill
                          className="object-cover rounded-lg border-2 border-gray-200"
                        />
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={removeImage}
                          className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0 bg-white border-red-200 hover:bg-red-50 hover:border-red-300"
                        >
                          <X className="h-3 w-3 text-red-600" />
                        </Button>
                      </div>
                    ) : (
                      <div className="border-2 border-dashed border-gray-300 hover:border-gray-400 rounded-lg p-6 text-center transition-colors">
                        <Upload className="h-8 w-8 text-gray-400 mx-auto mb-2" />
                        <p className="text-sm text-gray-600 mb-1">Upload candidate photo</p>
                        <p className="text-xs text-gray-500 mb-3">JPEG, PNG, GIF, WebP (max 5MB)</p>
                        <Input
                          type="file"
                          accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
                          onChange={handleImageChange}
                          className="hidden"
                          id="image-upload"
                        />
                        <Label htmlFor="image-upload" className="cursor-pointer">
                          <Button type="button" variant="outline" size="sm" asChild>
                            <span>Choose File</span>
                          </Button>
                        </Label>
                      </div>
                    )}
                  </div>
                </div>

                <div className="flex gap-2 pt-4">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => setIsDialogOpen(false)}
                    className="flex-1"
                  >
                    Cancel
                  </Button>
                  <Button type="submit" disabled={submitting || uploadingImage} className="flex-1">
                    {uploadingImage ? 'Uploading...' : submitting ? 'Saving...' : editingCandidate ? 'Update' : 'Add'}
                  </Button>
                </div>
              </form>
            </DialogContent>
          </Dialog>
        </div>

        {/* Event Info Card */}
        {event && (
          <Card className="mb-6">
            <CardHeader>
              <CardTitle className="text-lg">{event.title}</CardTitle>
              <CardDescription>{event.description}</CardDescription>
            </CardHeader>
          </Card>
        )}

        {/* Candidates List */}
        {loading ? (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading candidates...</p>
          </div>
        ) : candidates.length > 0 ? (
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {candidates.map((candidate) => (
              <Card key={candidate.id} className="hover:shadow-lg transition-shadow">
                <CardHeader className="text-center">
                  <div className="w-24 h-24 mx-auto mb-4 relative">
                    {candidate.image_url ? (
                      <Image
                        src={candidate.image_url}
                        alt={candidate.name}
                        fill
                        className="object-cover rounded-full"
                      />
                    ) : (
                      <div className="w-full h-full bg-gray-200 rounded-full flex items-center justify-center">
                        <User className="h-12 w-12 text-gray-400" />
                      </div>
                    )}
                  </div>
                  <CardTitle className="text-xl">{candidate.name}</CardTitle>
                  <CardDescription className="text-sm">
                    {candidate.description || "No description provided"}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex gap-2">
                    <Button 
                      variant="outline" 
                      size="sm" 
                      onClick={() => handleEdit(candidate)}
                      className="flex-1"
                    >
                      <Edit className="h-4 w-4 mr-2" />
                      Edit
                    </Button>
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button 
                          variant="outline" 
                          size="sm" 
                          className="flex-1 text-red-600 hover:text-red-700"
                        >
                          <Trash2 className="h-4 w-4 mr-2" />
                          Delete
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>Delete Candidate</AlertDialogTitle>
                          <AlertDialogDescription>
                            Are you sure you want to delete "{candidate.name}"? This action cannot be undone.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction onClick={() => handleDelete(candidate.id)}>
                            Delete
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        ) : (
          <Card>
            <CardContent className="text-center py-12">
              <User className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium mb-2">No Candidates Found</h3>
              <p className="text-gray-600 mb-4">Add candidates to this voting event.</p>
              <Button onClick={() => setIsDialogOpen(true)}>
                <Plus className="h-4 w-4 mr-2" />
                Add Candidate
              </Button>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}

export default function CandidateManagementPage() {
  return (
    <AuthGuard requiredRole="superadmin">
      <CandidateManagementContent />
    </AuthGuard>
  )
}