"use client";

import { useState } from "react";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import {
  Bold,
  Italic,
  Underline,
  Strikethrough,
  AlignLeft,
  AlignCenter,
  AlignRight,
  AlignJustify,
  List,
  ListOrdered,
  Link as LinkIcon,
  Image as ImageIcon,
  Paperclip,
  Palette,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

interface RichTextEditorProps {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  className?: string;
  minHeight?: string;
}

export function RichTextEditor({
  value = "",
  onChange,
  placeholder,
  className,
  minHeight = "120px",
}: RichTextEditorProps) {
  const [content, setContent] = useState(value);

  const handleChange = (newValue: string) => {
    setContent(newValue);
    onChange?.(newValue);
  };

  // Toolbar button component
  const ToolbarButton = ({
    icon: Icon,
    onClick,
    active = false,
  }: {
    icon: React.ComponentType<{ className?: string }>;
    onClick?: () => void;
    active?: boolean;
  }) => (
    <Button
      type="button"
      variant="ghost"
      size="icon"
      className={cn(
        "h-9 w-9 hover:bg-muted",
        active && "bg-muted text-primary"
      )}
      onClick={onClick}
    >
      <Icon className="h-5 w-5" />
    </Button>
  );

  return (
    <div className={cn("w-full border border-border rounded-lg", className)}>
      {/* Toolbar */}
      <div className="flex items-center gap-1 px-2 py-2 border-b border-border bg-muted/50 flex-wrap">
        {/* Font Size Selector */}
        <Select defaultValue="14">
          <SelectTrigger className="h-9 w-[80px] text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="12">12</SelectItem>
            <SelectItem value="14">14</SelectItem>
            <SelectItem value="16">16</SelectItem>
            <SelectItem value="18">18</SelectItem>
            <SelectItem value="20">20</SelectItem>
          </SelectContent>
        </Select>

        <div className="h-6 w-px bg-border mx-1" />

        {/* Text Formatting */}
        <ToolbarButton icon={Bold} />
        <ToolbarButton icon={Italic} />
        <ToolbarButton icon={Underline} />
        <ToolbarButton icon={Strikethrough} />

        <div className="h-6 w-px bg-border mx-1" />

        {/* Alignment */}
        <ToolbarButton icon={AlignLeft} />
        <ToolbarButton icon={AlignCenter} />
        <ToolbarButton icon={AlignRight} />
        <ToolbarButton icon={AlignJustify} />

        <div className="h-6 w-px bg-border mx-1" />

        {/* Lists */}
        <ToolbarButton icon={List} />
        <ToolbarButton icon={ListOrdered} />

        <div className="h-6 w-px bg-border mx-1" />

        {/* Insert Options */}
        <ToolbarButton icon={LinkIcon} />
        <ToolbarButton icon={ImageIcon} />
        <ToolbarButton icon={Paperclip} />

        <div className="h-6 w-px bg-border mx-1" />

        {/* Color Picker */}
        <ToolbarButton icon={Palette} />
      </div>

      {/* Text Area */}
      <Textarea
        value={content}
        onChange={(e) => handleChange(e.target.value)}
        placeholder={placeholder}
        className="border-0 focus-visible:ring-0 resize-none rounded-t-none"
        style={{ minHeight }}
      />
    </div>
  );
}