"use client";

import React from "react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { PaintbrushIcon } from "lucide-react";

export function ColorPicker({ value, onChange }: { value: string, onChange: (val: string) => void }) {
  const customColors = [
    "#f59e0b", "#e7a500", "#10b981", "#3b82f6", "#6366f1", "#8b5cf6", "#ec4899", "#ef4444", "#f97316",
    "#14b8a6", "#06b6d4", "#0ea5e9", "#eab308", "#84cc16", "#22c55e", "#a855f7", "#d946ef", "#f43f5e"
  ];

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="w-[180px] h-11 justify-start text-left font-normal gap-3 border-indigo-100 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-800">
          <div className="w-6 h-6 rounded border shadow-inner" style={{ backgroundColor: value || "#e7a500" }} />
          <span className="font-mono text-sm tracking-wider font-bold text-slate-700 dark:text-slate-300 mx-auto" dir="ltr">{value || "#e7a500"}</span>
          <PaintbrushIcon className="w-4 h-4 text-muted-foreground mr-auto opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-64 p-4 rounded-2xl bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-xl z-[100]" align="start">
        <div className="font-bold text-sm text-slate-800 dark:text-slate-200 mb-3 text-center">انتخاب رنگ اصلی فروشگاه</div>
        <div className="grid grid-cols-6 gap-2 mb-4 justify-items-center">
          {customColors.map(c => (
             <div 
               key={c} 
               onClick={() => onChange(c)}
               className={`w-7 h-7 rounded-full cursor-pointer hover:scale-125 active:scale-95 transition-all shadow-sm ${value === c ? 'ring-2 ring-primary ring-offset-2 dark:ring-offset-slate-900 scale-110' : ''}`}
               style={{ backgroundColor: c }}
               title={c}
             />
          ))}
        </div>
        <div className="flex items-center gap-2 pt-3 border-t border-slate-100 dark:border-slate-800">
           <Input 
             value={value || "#e7a500"} 
             onChange={(e) => onChange(e.target.value)} 
             className="font-mono font-bold text-center h-10 border-slate-200 dark:border-slate-700 focus-visible:ring-primary shadow-sm" 
             dir="ltr" 
           />
           <div className="relative w-10 h-10 shrink-0 rounded-xl overflow-hidden border-2 border-slate-200 dark:border-slate-700 shadow-sm cursor-pointer hover:scale-105 active:scale-95 transition-transform group">
             <input 
               type="color" 
               value={value || "#e7a500"} 
               onChange={(e) => onChange(e.target.value)} 
               className="absolute -top-4 -left-4 w-20 h-20 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" 
             />
             <div className="w-full h-full" style={{ backgroundColor: value || "#e7a500" }} />
           </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}