"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { Bold, Italic, List, ListOrdered, LinkIcon, Code, Heading2, Eye, Edit3 } from "lucide-react"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"

interface MarkdownEditorProps {
  value: string
  onChange: (value: string) => void
  placeholder?: string
  minHeight?: string
  id?: string
}

export function MarkdownEditor({
  value,
  onChange,
  placeholder = "Escriba aquí usando Markdown...",
  minHeight = "200px",
  id,
}: MarkdownEditorProps) {
  const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit")

  const insertMarkdown = (before: string, after = "") => {
    const textarea = document.getElementById(id || "markdown-editor") as HTMLTextAreaElement
    if (!textarea) return

    const start = textarea.selectionStart
    const end = textarea.selectionEnd
    const selectedText = value.substring(start, end)
    const newText = value.substring(0, start) + before + selectedText + after + value.substring(end)

    onChange(newText)

    setTimeout(() => {
      textarea.focus()
      textarea.setSelectionRange(start + before.length, start + before.length + selectedText.length)
    }, 0)
  }

  const toolbarButtons = [
    { icon: Bold, label: "Negrita", action: () => insertMarkdown("**", "**") },
    { icon: Italic, label: "Cursiva", action: () => insertMarkdown("*", "*") },
    { icon: Heading2, label: "Encabezado", action: () => insertMarkdown("## ", "") },
    { icon: List, label: "Lista", action: () => insertMarkdown("- ", "") },
    { icon: ListOrdered, label: "Lista numerada", action: () => insertMarkdown("1. ", "") },
    { icon: LinkIcon, label: "Link", action: () => insertMarkdown("[", "](url)") },
    { icon: Code, label: "Código", action: () => insertMarkdown("`", "`") },
  ]

  return (
    <div className="space-y-2">
      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "edit" | "preview")} className="w-full">
        <div className="flex items-center justify-between border-b">
          <TabsList className="h-10 bg-transparent">
            <TabsTrigger value="edit" className="gap-2">
              <Edit3 className="h-4 w-4" />
              Editar
            </TabsTrigger>
            <TabsTrigger value="preview" className="gap-2">
              <Eye className="h-4 w-4" />
              Vista Previa
            </TabsTrigger>
          </TabsList>

          {activeTab === "edit" && (
            <div className="flex items-center gap-1 px-2">
              {toolbarButtons.map((button, index) => (
                <Button
                  key={index}
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={button.action}
                  title={button.label}
                  className="h-8 w-8 p-0"
                >
                  <button.icon className="h-4 w-4" />
                </Button>
              ))}
            </div>
          )}
        </div>

        <TabsContent value="edit" className="mt-0">
          <Textarea
            id={id || "markdown-editor"}
            value={value}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
            className="font-mono"
            style={{ minHeight }}
          />
        </TabsContent>

        <TabsContent value="preview" className="mt-0">
          <div
            className="rounded-md border border-input bg-transparent px-4 py-3 prose prose-sm dark:prose-invert max-w-none overflow-auto"
            style={{ minHeight }}
          >
            {value ? (
              <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
            ) : (
              <p className="text-muted-foreground italic">Sin contenido para previsualizar</p>
            )}
          </div>
        </TabsContent>
      </Tabs>

      <p className="text-xs text-muted-foreground">
        Soporta Markdown: **negrita**, *cursiva*, ## títulos, - listas, [links](url), `código`
      </p>
    </div>
  )
}