'use client';

import { useState } from 'react';
import { routes } from '@/config/routes';
import TableLayout from '../../table-layout';
import DataTable from '@/components/common/DataTable';
import { PiCalendar, PiCaretDown, PiCaretRight, PiCaretUp, PiDownload, PiPhoneCall, PiPhoneDisconnect, PiPhoneIncoming, PiPhoneSlash, PiPhoneX, PiPhoneXBold, PiPlayBold, PiUser, PiUserBold } from 'react-icons/pi';

type Column<T> = {
  header: string;
  accessor: keyof T;
  render?: (value: any, row: T) => React.ReactNode;
};

type CallLog = {
  id: number;
  mobile: string;
  companyName: string;
  callType: 'missed' | 'outgoing' | 'incoming' | 'not_answered';
  date: string;
  time: string;
  duration: string;
  salesPerson: string;
  audioUrl: string;
};

const pageHeader = {
  title: 'Call Log',
  breadcrumb: [
    { href: routes.dashboard, name: 'Home' },
    { name: 'Lead Management' },
  ],
};

export default function Page() {
  const [calls] = useState<CallLog[]>([
    {
      id: 1,
      mobile: '9876543210',
      companyName: 'ABC Pvt Ltd',
      callType: 'incoming',
      date: '25-Mar-2026',
      time: '10:30 AM',
      duration: '00:45',
      salesPerson: 'John Sales',
      audioUrl: '/audio/rec1.mp3',
    },
    {
      id: 2,
      mobile: '9123456780',
      companyName: 'XYZ Traders',
      callType: 'outgoing',
      date: '25-Mar-2026',
      time: '11:10 AM',
      duration: '01:20',
      salesPerson: 'Arun Sales',
      audioUrl: '/audio/rec2.mp3',
    },
  ]);

  const [selectedCall, setSelectedCall] = useState<CallLog | null>(null);
  const [openHistory, setOpenHistory] = useState(true);

  const columns: Column<CallLog>[] = [
    {
      header: 'Mobile / Company',
      accessor: 'mobile',
      render: (_, row) => (
        <div>
          <p className="font-medium">{row.mobile}</p>
          <p className="text-xs text-gray-500">{row.companyName}</p>
        </div>
      ),
    },
    {
      header: 'Call Type',
      accessor: 'callType',
      render: (_, row) => (
        <span
          className={`px-2 py-1 rounded text-xs font-medium ${
            row.callType === 'missed'
              ? 'bg-red-100 text-red-600'
              : row.callType === 'incoming'
              ? 'bg-green-100 text-green-600'
              : row.callType === 'outgoing'
              ? 'bg-blue-100 text-blue-600'
              : 'bg-gray-100 text-gray-600'
          }`}
        >
          {row.callType}
        </span>
      ),
    },
    {
      header: 'Date / Time',
      accessor: 'date',
      render: (_, row) => (
        <div className="text-sm">
          <p>{row.date}</p>
          <p className="text-gray-500">{row.time}</p>
        </div>
      ),
    },
    {
      header: 'Duration',
      accessor: 'duration',
      render: (_, row) => (
        <>
          <div className="flex flex-col items-center gap-1">
            <span className="text-xs text-gray-600">
              {row.salesPerson}
            </span>
            <span className="text-xs bg-orange px-2 py-1 rounded">
              {row.duration}
            </span>
          </div>
        </>
      )
    },
    {
      header: 'Action',
      accessor: 'audioUrl',
      render: (_, row) => (
        <div className="flex items-center gap-3">
        
          <a
            href='#'
            className="text-dark text-sm underline"
          >
            <PiCaretRight/>
          </a>
        </div>
      ),
    },
  ];

  return (
    <TableLayout
      title={pageHeader.title}
      breadcrumb={pageHeader.breadcrumb}
      data={[]}
      fileName="call_log"
      header="Call Log"
      showExport={false}
      showImport={false}
    >
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div className="lg:col-span-2 rounded-lg border bg-white shadow-sm">
          <DataTable
            data={calls}
            columns={columns}
            searchAble
            pagination
            onRowClick={(row: CallLog) => setSelectedCall(row)}
          />
        </div>

        <div className="space-y-4">
          <div className="rounded-lg border bg-white p-4">
            <h4 className="font-semibold mb-3">Contact Details</h4>
            {selectedCall ? (
              <div className="flex items-center gap-3 mb-2">
                <span className='bg-gray-200 rounded-full p-3'>
                  <PiUserBold />
                </span>
                <div className='flex flex-col'>
                  <span className="font-semibold text-dark">
                    {selectedCall.mobile}
                  </span>
                  <span className="text-xs text-gray-500">{selectedCall.companyName}</span>
                </div>
              </div>
            ) : (
              <span className="text-sm text-gray-400">
                Click a row to view details
              </span>
            )}
            <div className="grid grid-cols-1 md:grid-cols-1 gap-2">
              <div className="flex flex-row gap-2 items-center">
                <PiUser/>
                <span className="text-sm text-gray-700 font-semibold">{ selectedCall?.salesPerson }</span>
              </div>
              <div className="flex flex-row gap-2 items-center">
                <PiCalendar/>
                <span className="text-sm text-red-700 font-semibold">{ selectedCall?.date }</span>
                <span className="text-sm text-gray-700 font-semibold">|</span>
                <span className="text-sm text-red-700 font-semibold">{ selectedCall?.time }</span>
              </div>
            </div>
          </div>

          <div className="rounded-lg border bg-white p-4 grid grid-cols-2 gap-3 text-center text-sm">
            <div className="flex flex-col bg-red-50 p-3 rounded-lg items-center">
              <PiPhoneX className='text-2xl text-red-600'/>
              <span className='text-red-600'>Missed</span>
              <div className="font-bold text-2xl">0</div>
            </div>
            <div className="flex flex-col bg-orange-50 p-3 rounded-lg items-center">
              <PiPhoneSlash className='text-2xl text-orange-600'/>
              <span className='text-orange-600'>Rejected </span>
              <div className="font-bold text-2xl">0</div>
            </div>
            <div className="flex flex-col bg-green-50 p-3 rounded-lg items-center">
              <PiPhoneIncoming className='text-2xl text-green-600'/>
              <span className='text-green-600'>Incoming </span>
              <div className="font-bold text-2xl">1</div>
            </div>
            <div className="flex flex-col bg-blue-50 p-3 rounded-lg items-center">
              <PiPhoneSlash className='text-2xl text-blue-600'/>
              <span className='text-blue-600'>Outgoing </span>
              <div className="font-bold text-2xl">1</div>
            </div>
            <div className="flex flex-col bg-gray-100 p-3 rounded-lg items-center">
              <PiPhoneDisconnect className='text-2xl text-gray-600'/>
              <span className='text-gray-600'>Not Answered</span>
              <div className="font-bold text-2xl">1</div>
            </div>
            <div className="flex flex-col border p-3 rounded-lg items-center">
              <PiPhoneCall className='text-2xl text-gray-600'/>
              <span className='text-gray-600'>Total</span>
              <div className="font-bold text-2xl">1</div>
            </div>
          </div>
          <div className="rounded-lg border bg-white p-4">
            <div
              className="flex justify-between items-center cursor-pointer"
              onClick={() => setOpenHistory(!openHistory)}
            >
              <h4 className="font-semibold">Previous Call History</h4>
              <span>{openHistory ? <PiCaretUp/> : <PiCaretDown/>}</span>
            </div>
            {openHistory && (
              <div className="mt-3 space-y-3 max-h-64 overflow-auto">
                {[1, 2, 3, 4].map((i) => (
                  <div
                    key={i}
                    className="p-2 border rounded-lg flex justify-between text-sm"
                  >
                    <div className='flex flex-col'>
                      <span className="font-medium">
                        {i % 2 === 0 ? 'Outgoing Call' : 'Incoming Call'}
                      </span>
                      <span className="text-gray-500 text-sm">25-Mar-2026 05:45 PM</span>
                    </div>
                    <div className='flex flex-col'>
                      <span className="text-blue-600 font-semibold">
                        {i % 2 === 0 ? '00:10' : '00:02'}
                      </span>
                      <span className="text-secondary text-sm">Rajesh</span>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

        </div>
      </div>
    </TableLayout>
  );
}