'use client'

import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link'
import dynamic from 'next/dynamic'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Switch } from '@/components/ui/switch'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import { Skeleton } from '@/components/ui/skeleton'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { toast } from 'sonner'
import {
  ArrowLeft,
  Save,
  Loader2,
  FileText,
  Video,
  Link as LinkIcon,
  File,
  Trash2,
  Eye,
  AlertCircle,
} from 'lucide-react'

// Dynamically import BlockEditor to avoid SSR issues
const BlockEditor = dynamic(
  () => import('@/components/shared/block-editor').then((mod) => mod.BlockEditor),
  {
    ssr: false,
    loading: () => (
      <div className="min-h-[300px] rounded-lg border bg-muted/20 animate-pulse" />
    ),
  }
)

const resourceTypeOptions = [
  { value: 'DOCUMENT', label: 'Document', icon: FileText },
  { value: 'PDF', label: 'PDF', icon: FileText },
  { value: 'VIDEO', label: 'Video', icon: Video },
  { value: 'LINK', label: 'External Link', icon: LinkIcon },
  { value: 'OTHER', label: 'Other', icon: File },
]

const cohortOptions = [
  { value: 'ALL', label: 'All Members', description: 'Visible to everyone' },
  { value: 'SEMIFINALIST', label: 'Semi-finalists', description: 'Visible to semi-finalist evaluators' },
  { value: 'FINALIST', label: 'Finalists', description: 'Visible to finalist evaluators only' },
]

export default function EditLearningResourcePage() {
  const params = useParams()
  const router = useRouter()
  const resourceId = params.id as string

  // Fetch resource
  const { data: resource, isLoading, error } = trpc.learningResource.get.useQuery({ id: resourceId })
  const { data: stats } = trpc.learningResource.getStats.useQuery({ id: resourceId })

  // Form state
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [contentJson, setContentJson] = useState<string>('')
  const [resourceType, setResourceType] = useState<string>('DOCUMENT')
  const [cohortLevel, setCohortLevel] = useState<string>('ALL')
  const [externalUrl, setExternalUrl] = useState('')
  const [isPublished, setIsPublished] = useState(false)
  const [programId, setProgramId] = useState<string | null>(null)

  // API
  const { data: programs } = trpc.program.list.useQuery({ status: 'ACTIVE' })
  const utils = trpc.useUtils()
  const updateResource = trpc.learningResource.update.useMutation({
    onSuccess: () => {
      utils.learningResource.get.invalidate({ id: resourceId })
      utils.learningResource.list.invalidate()
    },
  })
  const deleteResource = trpc.learningResource.delete.useMutation({
    onSuccess: () => utils.learningResource.list.invalidate(),
  })
  const getUploadUrl = trpc.learningResource.getUploadUrl.useMutation()

  // Populate form when resource loads
  useEffect(() => {
    if (resource) {
      setTitle(resource.title)
      setDescription(resource.description || '')
      setContentJson(resource.contentJson ? JSON.stringify(resource.contentJson) : '')
      setResourceType(resource.resourceType)
      setCohortLevel(resource.cohortLevel)
      setExternalUrl(resource.externalUrl || '')
      setIsPublished(resource.isPublished)
      setProgramId(resource.programId)
    }
  }, [resource])

  // Handle file upload for BlockNote
  const handleUploadFile = async (file: File): Promise<string> => {
    try {
      const { url, bucket, objectKey } = await getUploadUrl.mutateAsync({
        fileName: file.name,
        mimeType: file.type,
      })

      await fetch(url, {
        method: 'PUT',
        body: file,
        headers: {
          'Content-Type': file.type,
        },
      })

      const minioEndpoint = process.env.NEXT_PUBLIC_MINIO_ENDPOINT || 'http://localhost:9000'
      return `${minioEndpoint}/${bucket}/${objectKey}`
    } catch (error) {
      toast.error('Failed to upload file')
      throw error
    }
  }

  const handleSubmit = async () => {
    if (!title.trim()) {
      toast.error('Please enter a title')
      return
    }

    if (resourceType === 'LINK' && !externalUrl) {
      toast.error('Please enter an external URL')
      return
    }

    try {
      await updateResource.mutateAsync({
        id: resourceId,
        title,
        description: description || undefined,
        contentJson: contentJson ? JSON.parse(contentJson) : undefined,
        resourceType: resourceType as 'PDF' | 'VIDEO' | 'DOCUMENT' | 'LINK' | 'OTHER',
        cohortLevel: cohortLevel as 'ALL' | 'SEMIFINALIST' | 'FINALIST',
        externalUrl: externalUrl || null,
        isPublished,
      })

      toast.success('Resource updated successfully')
      router.push('/admin/learning')
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Failed to update resource')
    }
  }

  const handleDelete = async () => {
    try {
      await deleteResource.mutateAsync({ id: resourceId })
      toast.success('Resource deleted successfully')
      router.push('/admin/learning')
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Failed to delete resource')
    }
  }

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <Skeleton className="h-9 w-40" />
        </div>
        <Skeleton className="h-8 w-64" />
        <div className="grid gap-6 lg:grid-cols-3">
          <div className="lg:col-span-2 space-y-6">
            <Skeleton className="h-64 w-full" />
            <Skeleton className="h-96 w-full" />
          </div>
          <div className="space-y-6">
            <Skeleton className="h-48 w-full" />
            <Skeleton className="h-32 w-full" />
          </div>
        </div>
      </div>
    )
  }

  if (error || !resource) {
    return (
      <div className="space-y-6">
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Resource not found</AlertTitle>
          <AlertDescription>
            The resource you&apos;re looking for does not exist.
          </AlertDescription>
        </Alert>
        <Button asChild>
          <Link href="/admin/learning">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Learning Hub
          </Link>
        </Button>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" asChild className="-ml-4">
          <Link href="/admin/learning">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Learning Hub
          </Link>
        </Button>
      </div>

      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Edit Resource</h1>
          <p className="text-muted-foreground">
            Update this learning resource
          </p>
        </div>
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button variant="outline" className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
              <Trash2 className="mr-2 h-4 w-4" />
              Delete
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Delete Resource</AlertDialogTitle>
              <AlertDialogDescription>
                Are you sure you want to delete &quot;{resource.title}&quot;? This action
                cannot be undone.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
              <AlertDialogAction
                onClick={handleDelete}
                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              >
                {deleteResource.isPending ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : null}
                Delete
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Main content */}
        <div className="lg:col-span-2 space-y-6">
          {/* Basic Info */}
          <Card>
            <CardHeader>
              <CardTitle>Resource Details</CardTitle>
              <CardDescription>
                Basic information about this resource
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="title">Title *</Label>
                <Input
                  id="title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="e.g., Ocean Conservation Best Practices"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="description">Short Description</Label>
                <Textarea
                  id="description"
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  placeholder="Brief description of this resource"
                  rows={2}
                  maxLength={500}
                />
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="type">Resource Type</Label>
                  <Select value={resourceType} onValueChange={setResourceType}>
                    <SelectTrigger id="type">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {resourceTypeOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          <div className="flex items-center gap-2">
                            <option.icon className="h-4 w-4" />
                            {option.label}
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="cohort">Access Level</Label>
                  <Select value={cohortLevel} onValueChange={setCohortLevel}>
                    <SelectTrigger id="cohort">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {cohortOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {resourceType === 'LINK' && (
                <div className="space-y-2">
                  <Label htmlFor="url">External URL *</Label>
                  <Input
                    id="url"
                    type="url"
                    value={externalUrl}
                    onChange={(e) => setExternalUrl(e.target.value)}
                    placeholder="https://example.com/resource"
                  />
                </div>
              )}
            </CardContent>
          </Card>

          {/* Content Editor */}
          <Card>
            <CardHeader>
              <CardTitle>Content</CardTitle>
              <CardDescription>
                Rich text content with images and videos. Type / for commands.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <BlockEditor
                key={resourceId}
                initialContent={contentJson || undefined}
                onChange={setContentJson}
                onUploadFile={handleUploadFile}
                className="min-h-[300px]"
              />
            </CardContent>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Publish Settings */}
          <Card>
            <CardHeader>
              <CardTitle>Publish Settings</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="published">Published</Label>
                  <p className="text-sm text-muted-foreground">
                    Make this resource visible to jury members
                  </p>
                </div>
                <Switch
                  id="published"
                  checked={isPublished}
                  onCheckedChange={setIsPublished}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="program">Program</Label>
                <Select
                  value={programId || 'global'}
                  onValueChange={(v) => setProgramId(v === 'global' ? null : v)}
                >
                  <SelectTrigger id="program">
                    <SelectValue placeholder="Select program" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="global">Global (All Programs)</SelectItem>
                    {programs?.map((program) => (
                      <SelectItem key={program.id} value={program.id}>
                        {program.year} Edition
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

          {/* Statistics */}
          {stats && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Eye className="h-5 w-5" />
                  Statistics
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-2xl font-semibold">{stats.totalViews}</p>
                    <p className="text-sm text-muted-foreground">Total views</p>
                  </div>
                  <div>
                    <p className="text-2xl font-semibold">{stats.uniqueUsers}</p>
                    <p className="text-sm text-muted-foreground">Unique users</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Actions */}
          <Card>
            <CardContent className="pt-6">
              <div className="flex flex-col gap-2">
                <Button
                  onClick={handleSubmit}
                  disabled={updateResource.isPending || !title.trim()}
                  className="w-full"
                >
                  {updateResource.isPending ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Save className="mr-2 h-4 w-4" />
                  )}
                  Save Changes
                </Button>
                <Button variant="outline" asChild className="w-full">
                  <Link href="/admin/learning">Cancel</Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}