import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Textarea } from '@/components/ui/textarea';
import { Eye, PencilLine } from 'lucide-react';
import { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';

interface MarkdownEditorProps {
    name?: string;
    id?: string;
    value?: string;
    defaultValue?: string;
    onChange?: (value: string) => void;
    placeholder?: string;
    rows?: number;
    disabled?: boolean;
    required?: boolean;
}

export function MarkdownEditor({
    name,
    id,
    value,
    defaultValue,
    onChange,
    placeholder = 'Write your content here...\n\nSupports **bold**, *italic*, `code`, lists, and more.',
    rows = 8,
    disabled = false,
    required = false,
}: MarkdownEditorProps) {
    // For uncontrolled mode, track the value internally for preview
    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
    const isControlled = value !== undefined;
    const displayValue = isControlled ? value : internalValue;

    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        if (!isControlled) {
            setInternalValue(e.target.value);
        }
        onChange?.(e.target.value);
    };

    return (
        <Tabs defaultValue="write" className="w-full">
            <TabsList>
                <TabsTrigger value="write" className="gap-1.5">
                    <PencilLine className="h-3.5 w-3.5" />
                    Write
                </TabsTrigger>
                <TabsTrigger value="preview" className="gap-1.5">
                    <Eye className="h-3.5 w-3.5" />
                    Preview
                </TabsTrigger>
            </TabsList>
            <TabsContent value="write">
                <Textarea
                    id={id}
                    name={name}
                    value={isControlled ? value : undefined}
                    defaultValue={!isControlled ? defaultValue : undefined}
                    onChange={handleChange}
                    placeholder={placeholder}
                    rows={rows}
                    disabled={disabled}
                    required={required}
                    className="min-h-[200px] resize-y font-mono text-sm"
                />
                <p className="mt-2 text-xs text-muted-foreground">
                    Supports Markdown: **bold**, *italic*, `code`, [links](url), lists, and more.
                </p>
            </TabsContent>
            <TabsContent value="preview">
                <div className="min-h-[200px] rounded-md border bg-muted/30 p-4">
                    {displayValue ? (
                        <div className="prose prose-sm dark:prose-invert max-w-none prose-p:my-2 prose-headings:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-0">
                            <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                                {displayValue}
                            </ReactMarkdown>
                        </div>
                    ) : (
                        <p className="text-muted-foreground italic">
                            Nothing to preview. Start writing to see the result.
                        </p>
                    )}
                </div>
            </TabsContent>
        </Tabs>
    );
}