'use client'

import { useState } from 'react'
import { motion, AnimatePresence } from 'motion/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { Pencil, X, Loader2 } from 'lucide-react'

type EditableCardProps = {
  title: string
  icon?: React.ReactNode
  summary: React.ReactNode
  children: React.ReactNode
  onSave?: () => void | Promise<void>
  isSaving?: boolean
  alwaysShowEdit?: boolean
  defaultEditing?: boolean
  className?: string
}

export function EditableCard({
  title,
  icon,
  summary,
  children,
  onSave,
  isSaving = false,
  alwaysShowEdit = false,
  defaultEditing = false,
  className,
}: EditableCardProps) {
  const [isEditing, setIsEditing] = useState(defaultEditing)

  const handleSave = async () => {
    if (onSave) {
      await onSave()
    }
    setIsEditing(false)
  }

  return (
    <Card className={cn('group relative overflow-hidden', className)}>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            {icon && (
              <span className="text-muted-foreground">{icon}</span>
            )}
            <CardTitle className="text-sm font-semibold">{title}</CardTitle>
          </div>
          {!isEditing && (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsEditing(true)}
              className={cn(
                'h-7 gap-1.5 text-xs',
                !alwaysShowEdit && 'sm:opacity-0 sm:group-hover:opacity-100 transition-opacity'
              )}
            >
              <Pencil className="h-3 w-3" />
              Edit
            </Button>
          )}
          {isEditing && (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsEditing(false)}
              disabled={isSaving}
              className="h-7 gap-1.5 text-xs"
            >
              <X className="h-3 w-3" />
              Cancel
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent className="pt-0">
        <AnimatePresence mode="wait" initial={false}>
          {isEditing ? (
            <motion.div
              key="edit"
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              transition={{ duration: 0.2, ease: 'easeInOut' }}
            >
              <div className="space-y-4">
                {children}
                {onSave && (
                  <div className="flex justify-end pt-2 border-t">
                    <Button
                      size="sm"
                      onClick={handleSave}
                      disabled={isSaving}
                    >
                      {isSaving && <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />}
                      Save Changes
                    </Button>
                  </div>
                )}
              </div>
            </motion.div>
          ) : (
            <motion.div
              key="view"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.15 }}
            >
              {summary}
            </motion.div>
          )}
        </AnimatePresence>
      </CardContent>
    </Card>
  )
}
