"use client";

import React, { useState } from 'react';
import { Plus, Search, X } from 'lucide-react';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';

interface Note {
  id: string;
  title: string;
  content: string;
  lastEdited: Date;
  category?: string;
  tags?: string[];
}

interface NotesViewProps {
  onNoteSelect?: (note: Note) => void;
}

export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [notes, setNotes] = useState<Note[]>([
    {
      id: '1',
      title: 'Budget and expenses',
      content: 'Created with Secure Spreadsheets',
      lastEdited: new Date('2022-03-24T19:16:00'),
      category: 'Finance',
      tags: ['Finance']
    }
  ]);

  const handleNewNote = () => {
    const newNote: Note = {
      id: Date.now().toString(),
      title: 'New Note',
      content: '',
      lastEdited: new Date()
    };
    setNotes([newNote, ...notes]);
    onNoteSelect?.(newNote);
  };

  const formatDate = (date: Date) => {
    return format(date, 'EEEE d MMM yyyy, HH:mm', { locale: fr });
  };

  return (
    <div className="flex flex-col h-full bg-carnet-bg border-r border-carnet-border">
      {/* Search Header */}
      <div className="p-4 border-b border-carnet-border">
        <div className="relative">
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Link tags, notes, files..."
            className="w-full pl-9 pr-4 py-2 bg-white border border-carnet-border rounded-md text-sm text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none focus:ring-1 focus:ring-primary"
          />
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-carnet-text-muted" />
          {searchQuery && (
            <button
              onClick={() => setSearchQuery('')}
              className="absolute right-3 top-2.5 text-carnet-text-muted hover:text-carnet-text-primary"
            >
              <X className="h-4 w-4" />
            </button>
          )}
        </div>
      </div>

      {/* Category Header */}
      <div className="px-4 py-3 border-b border-carnet-border flex items-center justify-between">
        <div className="flex items-center">
          <div className="w-6 h-6 bg-carnet-tag-finance-bg rounded-md flex items-center justify-center">
            <span className="text-xs font-medium text-carnet-tag-finance-text">F</span>
          </div>
          <span className="ml-2 text-sm font-medium text-carnet-text-primary">Finance</span>
        </div>
        <button 
          className="p-1.5 rounded-md hover:bg-carnet-hover"
          onClick={handleNewNote}
        >
          <Plus className="w-4 h-4 text-carnet-text-muted" />
        </button>
      </div>

      {/* Notes List */}
      <div className="flex-1 overflow-y-auto">
        {notes.map((note) => (
          <div 
            key={note.id}
            className="px-4 py-3 border-b border-carnet-border hover:bg-carnet-hover cursor-pointer"
            onClick={() => onNoteSelect?.(note)}
          >
            <div className="flex flex-col">
              <div className="flex items-center">
                <span className="text-sm font-medium text-carnet-text-primary">
                  {note.title}
                </span>
                {note.tags?.map((tag) => (
                  <span 
                    key={tag}
                    className="ml-2 px-1.5 py-0.5 bg-carnet-tag-finance-bg rounded text-xs font-medium text-carnet-tag-finance-text"
                  >
                    {tag}
                  </span>
                ))}
              </div>
              <div className="mt-1 flex items-center text-xs text-carnet-text-muted">
                <span>{formatDate(note.lastEdited)}</span>
                {note.content && (
                  <>
                    <span className="mx-1.5">•</span>
                    <span>{note.content}</span>
                  </>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};