'use client'

import { useState } from 'react'
import { 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 { toast } from 'sonner'
import { ArrowLeft, Save, Loader2, FileText, Video, Link as LinkIcon, File } 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 NewLearningResourcePage() {
  const router = useRouter()

  // 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)

  // API
  const { data: programs } = trpc.program.list.useQuery({ status: 'ACTIVE' })
  const [programId, setProgramId] = useState<string | null>(null)

  const createResource = trpc.learningResource.create.useMutation()
  const getUploadUrl = trpc.learningResource.getUploadUrl.useMutation()

  // 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,
      })

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

      // Return the MinIO URL
      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 createResource.mutateAsync({
        programId,
        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 || undefined,
        isPublished,
      })

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

  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>
        <h1 className="text-2xl font-semibold tracking-tight">Add Resource</h1>
        <p className="text-muted-foreground">
          Create a new learning resource for jury members
        </p>
      </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
                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>

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