'use client'

import { useState } from 'react'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
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 { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Switch } from '@/components/ui/switch'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import {
  ArrowLeft,
  Plus,
  Pencil,
  Trash2,
  Loader2,
  LayoutTemplate,
  Eye,
  Variable,
} from 'lucide-react'
import { toast } from 'sonner'

const AVAILABLE_VARIABLES = [
  { name: '{{projectName}}', desc: 'Project title' },
  { name: '{{userName}}', desc: "Recipient's name" },
  { name: '{{deadline}}', desc: 'Deadline date' },
  { name: '{{roundName}}', desc: 'Round name' },
  { name: '{{programName}}', desc: 'Program name' },
]

interface TemplateFormData {
  name: string
  category: string
  subject: string
  body: string
  variables: string[]
  isActive: boolean
}

const defaultForm: TemplateFormData = {
  name: '',
  category: '',
  subject: '',
  body: '',
  variables: [],
  isActive: true,
}

export default function MessageTemplatesPage() {
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [deleteId, setDeleteId] = useState<string | null>(null)
  const [formData, setFormData] = useState<TemplateFormData>(defaultForm)
  const [showPreview, setShowPreview] = useState(false)

  const utils = trpc.useUtils()

  const { data: templates, isLoading } = trpc.message.listTemplates.useQuery()

  const createMutation = trpc.message.createTemplate.useMutation({
    onSuccess: () => {
      utils.message.listTemplates.invalidate()
      toast.success('Template created')
      closeDialog()
    },
    onError: (e) => toast.error(e.message),
  })

  const updateMutation = trpc.message.updateTemplate.useMutation({
    onSuccess: () => {
      utils.message.listTemplates.invalidate()
      toast.success('Template updated')
      closeDialog()
    },
    onError: (e) => toast.error(e.message),
  })

  const deleteMutation = trpc.message.deleteTemplate.useMutation({
    onSuccess: () => {
      utils.message.listTemplates.invalidate()
      toast.success('Template deleted')
      setDeleteId(null)
    },
    onError: (e) => toast.error(e.message),
  })

  const closeDialog = () => {
    setDialogOpen(false)
    setEditingId(null)
    setFormData(defaultForm)
    setShowPreview(false)
  }

  const openEdit = (template: Record<string, unknown>) => {
    setEditingId(String(template.id))
    setFormData({
      name: String(template.name || ''),
      category: String(template.category || ''),
      subject: String(template.subject || ''),
      body: String(template.body || ''),
      variables: Array.isArray(template.variables) ? template.variables.map(String) : [],
      isActive: template.isActive !== false,
    })
    setDialogOpen(true)
  }

  const insertVariable = (variable: string) => {
    setFormData((prev) => ({
      ...prev,
      body: prev.body + variable,
    }))
  }

  const handleSubmit = () => {
    if (!formData.name.trim() || !formData.subject.trim()) {
      toast.error('Name and subject are required')
      return
    }

    const payload = {
      name: formData.name.trim(),
      category: formData.category.trim() || 'General',
      subject: formData.subject.trim(),
      body: formData.body.trim(),
      variables: formData.variables.length > 0 ? formData.variables : undefined,
    }

    if (editingId) {
      updateMutation.mutate({ id: editingId, ...payload, isActive: formData.isActive })
    } else {
      createMutation.mutate(payload)
    }
  }

  const getPreviewText = (text: string): string => {
    return text
      .replace(/\{\{userName\}\}/g, 'John Doe')
      .replace(/\{\{projectName\}\}/g, 'Ocean Cleanup Initiative')
      .replace(/\{\{roundName\}\}/g, 'Round 1 - Semi-Finals')
      .replace(/\{\{programName\}\}/g, 'MOPC 2026')
      .replace(/\{\{deadline\}\}/g, 'March 15, 2026')
  }

  const isPending = createMutation.isPending || updateMutation.isPending

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

      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Message Templates</h1>
          <p className="text-muted-foreground">
            Create and manage reusable message templates
          </p>
        </div>
        <Dialog open={dialogOpen} onOpenChange={(open) => !open && closeDialog()}>
          <DialogTrigger asChild>
            <Button onClick={() => { setFormData(defaultForm); setEditingId(null); setDialogOpen(true) }}>
              <Plus className="mr-2 h-4 w-4" />
              Create Template
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>{editingId ? 'Edit Template' : 'Create Template'}</DialogTitle>
              <DialogDescription>
                Define a reusable message template with variable placeholders.
              </DialogDescription>
            </DialogHeader>

            <div className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>Template Name</Label>
                  <Input
                    placeholder="e.g., Evaluation Reminder"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  />
                </div>

                <div className="space-y-2">
                  <Label>Category</Label>
                  <Input
                    placeholder="e.g., Notification, Reminder"
                    value={formData.category}
                    onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label>Subject</Label>
                <Input
                  placeholder="e.g., Reminder: {{roundName}} evaluation deadline"
                  value={formData.subject}
                  onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                />
              </div>

              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label>Message Body</Label>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setShowPreview(!showPreview)}
                  >
                    <Eye className="mr-1 h-3 w-3" />
                    {showPreview ? 'Edit' : 'Preview'}
                  </Button>
                </div>

                {showPreview ? (
                  <Card>
                    <CardContent className="p-4">
                      <p className="text-sm font-medium mb-2">
                        Subject: {getPreviewText(formData.subject)}
                      </p>
                      <div className="text-sm whitespace-pre-wrap border-t pt-2">
                        {getPreviewText(formData.body) || 'No content yet'}
                      </div>
                    </CardContent>
                  </Card>
                ) : (
                  <Textarea
                    placeholder="Write your template message..."
                    value={formData.body}
                    onChange={(e) => setFormData({ ...formData, body: e.target.value })}
                    rows={8}
                  />
                )}
              </div>

              {/* Variable buttons */}
              {!showPreview && (
                <div className="space-y-2">
                  <Label className="flex items-center gap-1">
                    <Variable className="h-3 w-3" />
                    Insert Variable
                  </Label>
                  <div className="flex flex-wrap gap-1">
                    {AVAILABLE_VARIABLES.map((v) => (
                      <Button
                        key={v.name}
                        variant="outline"
                        size="sm"
                        className="text-xs"
                        onClick={() => insertVariable(v.name)}
                        title={v.desc}
                      >
                        {v.name}
                      </Button>
                    ))}
                  </div>
                </div>
              )}

              {editingId && (
                <div className="flex items-center gap-2">
                  <Switch
                    id="template-active"
                    checked={formData.isActive}
                    onCheckedChange={(checked) =>
                      setFormData({ ...formData, isActive: checked })
                    }
                  />
                  <label htmlFor="template-active" className="text-sm cursor-pointer">
                    Active
                  </label>
                </div>
              )}
            </div>

            <DialogFooter>
              <Button variant="outline" onClick={closeDialog}>
                Cancel
              </Button>
              <Button onClick={handleSubmit} disabled={isPending}>
                {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                {editingId ? 'Update' : 'Create'}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      {/* Variable reference panel */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <Variable className="h-4 w-4" />
            Available Template Variables
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-3">
            {AVAILABLE_VARIABLES.map((v) => (
              <div key={v.name} className="flex items-center gap-2">
                <code className="text-xs bg-muted rounded px-2 py-1 font-mono">
                  {v.name}
                </code>
                <span className="text-xs text-muted-foreground">{v.desc}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Templates list */}
      {isLoading ? (
        <TemplatesSkeleton />
      ) : templates && (templates as unknown[]).length > 0 ? (
        <Card>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead className="hidden md:table-cell">Category</TableHead>
                <TableHead className="hidden md:table-cell">Subject</TableHead>
                <TableHead className="hidden lg:table-cell">Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {(templates as Array<Record<string, unknown>>).map((template) => (
                <TableRow key={String(template.id)}>
                  <TableCell className="font-medium">
                    {String(template.name)}
                  </TableCell>
                  <TableCell className="hidden md:table-cell">
                    {template.category ? (
                      <Badge variant="secondary" className="text-xs">
                        {String(template.category)}
                      </Badge>
                    ) : (
                      <span className="text-xs text-muted-foreground">--</span>
                    )}
                  </TableCell>
                  <TableCell className="hidden md:table-cell text-sm text-muted-foreground truncate max-w-[200px]">
                    {String(template.subject || '')}
                  </TableCell>
                  <TableCell className="hidden lg:table-cell">
                    {template.isActive !== false ? (
                      <Badge variant="default" className="text-xs">Active</Badge>
                    ) : (
                      <Badge variant="secondary" className="text-xs">Inactive</Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => openEdit(template)}
                      >
                        <Pencil className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => setDeleteId(String(template.id))}
                      >
                        <Trash2 className="h-4 w-4 text-destructive" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Card>
      ) : (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <LayoutTemplate className="h-12 w-12 text-muted-foreground/50" />
            <p className="mt-2 font-medium">No templates yet</p>
            <p className="text-sm text-muted-foreground">
              Create a template to speed up message composition.
            </p>
          </CardContent>
        </Card>
      )}

      {/* Delete confirmation */}
      <AlertDialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Template</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete this template? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => deleteId && deleteMutation.mutate({ id: deleteId })}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {deleteMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}

function TemplatesSkeleton() {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="space-y-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex items-center gap-4">
              <Skeleton className="h-4 w-40" />
              <Skeleton className="h-6 w-24" />
              <Skeleton className="h-4 w-48" />
              <Skeleton className="h-8 w-16 ml-auto" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}