import { Session } from "@/types/session/session";

export const SessionDetail = ({ session }: { session: Session }) => (
  <div className="rounded-lg border border-gray-200/60 dark:border-gray-700/60 bg-white dark:bg-gray-900/40 p-4">
    <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-3">Session Details</h3>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Basic Information</h4>
        <dl className="grid grid-cols-1 gap-2">
          <div className="flex items-baseline justify-between">
            <dt className="text-xs text-gray-500 dark:text-gray-400">Transaction ID</dt>
            <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.transaction_id}</dd>
          </div>
          <div className="flex items-baseline justify-between">
            <dt className="text-xs text-gray-500 dark:text-gray-400">ID Tag</dt>
            <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.id_tag}</dd>
          </div>
          <div className="flex items-baseline justify-between">
            <dt className="text-xs text-gray-500 dark:text-gray-400">User</dt>
            <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.user}</dd>
          </div>
          {session.rate && (
            <div className="flex items-baseline justify-between">
              <dt className="text-xs text-gray-500 dark:text-gray-400">Rate</dt>
              <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.rate}</dd>
            </div>
          )}
        </dl>
      </div>

      <div>
        <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Timestamps</h4>
        <dl className="grid grid-cols-1 gap-2">
          {session.metrics?.charging_start && (
            <div className="flex items-baseline justify-between">
              <dt className="text-xs text-gray-500 dark:text-gray-400">Charging Start</dt>
              <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{new Date(session.metrics.charging_start).toLocaleString()}</dd>
            </div>
          )}
          {session.metrics?.charging_stop && (
            <div className="flex items-baseline justify-between">
              <dt className="text-xs text-gray-500 dark:text-gray-400">Charging Stop</dt>
              <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{new Date(session.metrics.charging_stop).toLocaleString()}</dd>
            </div>
          )}
        </dl>
      </div>
    </div>

    <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Technical</h4>
        <dl className="grid grid-cols-1 gap-2">
          {typeof session.metrics?.meter_start === 'number' && (
            <div className="flex items-baseline justify-between">
              <dt className="text-xs text-gray-500 dark:text-gray-400">Meter Start</dt>
              <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.metrics.meter_start}</dd>
            </div>
          )}
          {session.metrics?.timezone && (
            <div className="flex items-baseline justify-between">
              <dt className="text-xs text-gray-500 dark:text-gray-400">Timezone</dt>
              <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.metrics.timezone}</dd>
            </div>
          )}
          {session.metrics?.charging_stop_reason && (
            <div className="flex items-baseline justify-between">
              <dt className="text-xs text-gray-500 dark:text-gray-400">Stop Reason</dt>
              <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.metrics.charging_stop_reason}</dd>
            </div>
          )}
        </dl>
      </div>

      <div>
        {(session.configurations || session.target) && (
          <>
            <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Configurations & Targets</h4>
            <dl className="grid grid-cols-1 gap-2">
              {session.configurations && (
                <>
                  <div className="flex items-baseline justify-between">
                    <dt className="text-xs text-gray-500 dark:text-gray-400">Include Raw Energy Report</dt>
                    <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.configurations.include_raw_energy_report ? 'Yes' : 'No'}</dd>
                  </div>
                  <div className="flex items-baseline justify-between">
                    <dt className="text-xs text-gray-500 dark:text-gray-400">Include ID Tag</dt>
                    <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.configurations.include_id_tag ? 'Yes' : 'No'}</dd>
                  </div>
                </>
              )}
              {session.target && (
                <>
                  {typeof session.target.time === 'number' && (
                    <div className="flex items-baseline justify-between">
                      <dt className="text-xs text-gray-500 dark:text-gray-400">Target Time</dt>
                      <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.target.time}</dd>
                    </div>
                  )}
                  {typeof session.target.cost === 'number' && (
                    <div className="flex items-baseline justify-between">
                      <dt className="text-xs text-gray-500 dark:text-gray-400">Target Cost</dt>
                      <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.target.cost}</dd>
                    </div>
                  )}
                  {typeof session.target.energy === 'number' && (
                    <div className="flex items-baseline justify-between">
                      <dt className="text-xs text-gray-500 dark:text-gray-400">Target Energy</dt>
                      <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.target.energy}</dd>
                    </div>
                  )}
                  {typeof session.target.state_of_charge === 'number' && (
                    <div className="flex items-baseline justify-between">
                      <dt className="text-xs text-gray-500 dark:text-gray-400">Target SoC</dt>
                      <dd className="text-sm font-medium text-gray-900 dark:text-gray-100">{session.target.state_of_charge}%</dd>
                    </div>
                  )}
                </>
              )}
            </dl>
          </>
        )}
      </div>
    </div>
  </div>
)