'use client';

import { useState } from 'react';
import { Plus, Send } from 'lucide-react';
import Table from '@/components/ui/Table';
import Badge from '@/components/ui/Badge';
import Modal from '@/components/ui/Modal';

const templates = [
  { id: '1', name: 'Booking Confirmation', channel: 'EMAIL', subject: 'Your booking is confirmed', active: true },
  { id: '2', name: 'Payment Receipt', channel: 'EMAIL', subject: 'Payment received', active: true },
  { id: '3', name: 'Trip Reminder', channel: 'SMS', body: 'Your trip is tomorrow', active: true },
  { id: '4', name: 'Cancellation Notice', channel: 'PUSH', body: 'Your booking has been cancelled', active: false },
];

export default function NotificationsPage() {
  const [showModal, setShowModal] = useState(false);
  const [activeTab, setActiveTab] = useState<'templates' | 'send'>('templates');

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Notifications</h1>
          <p className="text-muted-foreground">Manage notification templates and send messages</p>
        </div>
        <button onClick={() => setShowModal(true)} className="btn btn-primary flex items-center gap-2">
          <Plus className="h-4 w-4" />
          New Template
        </button>
      </div>

      <div className="flex gap-2 border-b border-border">
        <button
          onClick={() => setActiveTab('templates')}
          className={`px-4 py-2 font-medium ${activeTab === 'templates' ? 'border-b-2 border-primary text-primary' : 'text-muted-foreground'}`}
        >
          Templates
        </button>
        <button
          onClick={() => setActiveTab('send')}
          className={`px-4 py-2 font-medium ${activeTab === 'send' ? 'border-b-2 border-primary text-primary' : 'text-muted-foreground'}`}
        >
          Send Notification
        </button>
      </div>

      {activeTab === 'templates' ? (
        <div className="card">
          <Table
            data={templates}
            columns={[
              { key: 'name', label: 'Template Name' },
              { key: 'channel', label: 'Channel', render: (item) => (
                <Badge>{item.channel}</Badge>
              )},
              { key: 'subject', label: 'Subject/Body', render: (item) => item.subject || item.body },
              { key: 'active', label: 'Status', render: (item) => (
                <Badge variant="status" status={item.active ? 'CONFIRMED' : 'CANCELLED'}>
                  {item.active ? 'Active' : 'Inactive'}
                </Badge>
              )},
            ]}
          />
        </div>
      ) : (
        <div className="card">
          <form className="space-y-4">
            <div>
              <label className="label">Recipient Type</label>
              <select className="input">
                <option>All Passengers</option>
                <option>Specific Passenger</option>
                <option>Booking Reference</option>
              </select>
            </div>
            <div>
              <label className="label">Channel</label>
              <select className="input">
                <option>Email</option>
                <option>SMS</option>
                <option>Push Notification</option>
              </select>
            </div>
            <div>
              <label className="label">Subject</label>
              <input type="text" className="input" placeholder="Enter subject" />
            </div>
            <div>
              <label className="label">Message</label>
              <textarea className="input" rows={6} placeholder="Enter message content"></textarea>
            </div>
            <button type="submit" className="btn btn-primary flex items-center gap-2">
              <Send className="h-4 w-4" />
              Send Notification
            </button>
          </form>
        </div>
      )}

      <Modal isOpen={showModal} onClose={() => setShowModal(false)} title="Create Notification Template">
        <form className="space-y-4">
          <div>
            <label className="label">Template Name</label>
            <input type="text" className="input" placeholder="Enter template name" />
          </div>
          <div>
            <label className="label">Channel</label>
            <select className="input">
              <option>Email</option>
              <option>SMS</option>
              <option>Push Notification</option>
            </select>
          </div>
          <div>
            <label className="label">Subject</label>
            <input type="text" className="input" placeholder="Enter subject" />
          </div>
          <div>
            <label className="label">Body</label>
            <textarea className="input" rows={4} placeholder="Enter template body"></textarea>
          </div>
          <div className="flex justify-end gap-2">
            <button type="button" onClick={() => setShowModal(false)} className="btn btn-secondary">
              Cancel
            </button>
            <button type="submit" className="btn btn-primary">
              Create Template
            </button>
          </div>
        </form>
      </Modal>
    </div>
  );
}
