"use client";

import { Select } from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { TagPicker } from "@/components/tasks/tag-picker";
import type { NoteFolder, Project, Tag } from "@/types";

interface NoteMetaProps {
  folderId: string | null;
  projectId: string | null;
  linkedTaskId: string | null;
  tagIds: string[];
  folders: NoteFolder[];
  projects: Project[];
  tags: Tag[];
  tasks: { id: string; title: string }[];
  onFolderChange: (id: string | null) => void;
  onProjectChange: (id: string | null) => void;
  onLinkedTaskChange: (id: string | null) => void;
  onTagsChange: (ids: string[]) => void;
  onCreateTag: (name: string, color: string) => Promise<Tag>;
  disabled?: boolean;
}

export function NoteMeta({
  folderId,
  projectId,
  linkedTaskId,
  tagIds,
  folders,
  projects,
  tags,
  tasks,
  onFolderChange,
  onProjectChange,
  onLinkedTaskChange,
  onTagsChange,
  onCreateTag,
  disabled = false,
}: NoteMetaProps) {
  return (
    <div className="space-y-4 p-4 border-t border-border lg:border-t-0 lg:border-l lg:p-6">
      <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
        Properties
      </h3>

      <div className="space-y-3">
        {/* Folder */}
        <div className="space-y-1">
          <Label className="text-xs text-muted-foreground">Folder</Label>
          <Select
            value={folderId || ""}
            onChange={(e) => onFolderChange(e.target.value || null)}
            className="h-8 text-xs"
            disabled={disabled}
          >
            <option value="">No folder</option>
            {folders.map((f) => (
              <option key={f.id} value={f.id}>
                {f.name}
              </option>
            ))}
          </Select>
        </div>

        {/* Project */}
        <div className="space-y-1">
          <Label className="text-xs text-muted-foreground">Project</Label>
          <Select
            value={projectId || ""}
            onChange={(e) => onProjectChange(e.target.value || null)}
            className="h-8 text-xs"
            disabled={disabled}
          >
            <option value="">No project</option>
            {projects.map((p) => (
              <option key={p.id} value={p.id}>
                {p.icon} {p.name}
              </option>
            ))}
          </Select>
        </div>

        {/* Linked task */}
        <div className="space-y-1">
          <Label className="text-xs text-muted-foreground">Linked task</Label>
          <Select
            value={linkedTaskId || ""}
            onChange={(e) => onLinkedTaskChange(e.target.value || null)}
            className="h-8 text-xs"
            disabled={disabled}
          >
            <option value="">No linked task</option>
            {tasks.map((t) => (
              <option key={t.id} value={t.id}>
                {t.title}
              </option>
            ))}
          </Select>
        </div>

        {/* Tags */}
        <div className="space-y-1">
          <Label className="text-xs text-muted-foreground">Tags</Label>
          <TagPicker
            tags={tags}
            selectedIds={tagIds}
            onChange={onTagsChange}
            onCreateTag={onCreateTag}
            disabled={disabled}
          />
        </div>
      </div>
    </div>
  );
}